Group up existing components into elements

elements/AnimeGrid/AnimeGrid.pixy

@@ -0,0 +1,34 @@
+component AnimeGrid(animes []*arn.Anime, user *arn.User)
+	#load-more-target.anime-grid
+		AnimeGridScrollable(animes, user)
+
+component AnimeGridWithRelation(entries []*utils.AnimeWithRelatedAnime, user *arn.User)
+	#load-more-target.anime-grid
+		AnimeGridWithRelationScrollable(entries, user)
+
+component AnimeGridScrollable(animes []*arn.Anime, user *arn.User)
+	each anime in animes
+		.anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(anime.ID)))
+			AnimeImageLink(anime, "medium", user)
+			AnimeGridButton(anime, user)
+
+component AnimeImageLink(anime *arn.Anime, size string, user *arn.User)
+	a(href="/anime/" + anime.ID)
+		img.anime-grid-image.lazy(data-src=anime.ImageLink(size), data-webp="true", data-color=anime.AverageColor(), alt=anime.Title.Romaji)
+		.image-title
+			.image-title-text= anime.Title.ByUser(user)
+
+component AnimeGridWithRelationScrollable(entries []*utils.AnimeWithRelatedAnime, user *arn.User)
+	each entry in entries
+		.anime-grid-cell(data-added=(user != nil && user.AnimeList().Contains(entry.Anime.ID)))
+			a(href="/anime/" + entry.Anime.ID)
+				img.anime-grid-image.lazy(data-src=entry.Anime.ImageLink("medium"), data-webp="true", data-color=entry.Anime.AverageColor(), alt=entry.Anime.Title.Romaji)
+				.image-title
+					.image-title-text= entry.Anime.Title.ByUser(user)
+			
+			AnimeGridButton(entry.Anime, user)
+
+component AnimeGridButton(anime *arn.Anime, user *arn.User)
+	if user != nil && !user.AnimeList().Contains(anime.ID)
+		button.anime-grid-add-button.action(data-action="addAnimeToCollection", data-trigger="click", data-api="/api/animelist/" + user.ID, data-anime-id=anime.ID, aria-label="Add anime to my list")
+			RawIcon("plus")

elements/AnimeGrid/AnimeGrid.scarlet

@@ -0,0 +1,34 @@
+.anime-grid
+	grid
+
+.anime-grid-cell
+	grid-cell
+	saturate-up
+	shadow-up
+	default-transition
+
+	:hover
+		.image-title,
+		.anime-grid-add-button
+			opacity 1
+
+< 450px
+	.anime-grid-cell
+		width 71px
+		height 100px
+		margin 0.3rem
+
+.anime-grid-cell-hide
+	opacity 0.05
+	pointer-events none
+
+.anime-grid-image
+	grid-image
+
+.anime-grid-add-button
+	opacity 0
+	position absolute
+	top 5px
+	right 5px
+	padding 0.25rem
+	height auto