From d6139f2c43a4755bacc329441d23e8413d53c974 Mon Sep 17 00:00:00 2001 From: Szymon Kin <68154191+hoolek77@users.noreply.github.com> Date: Thu, 17 Nov 2022 19:32:29 +0100 Subject: [PATCH] Create favorites section (#84) --- package-lock.json | 28 +++---- src/components/atoms/book-tile.astro | 9 ++- src/components/atoms/icon-with-tooltip.tsx | 2 +- src/components/atoms/media-tile.astro | 7 +- src/components/atoms/person-tile.astro | 10 +-- src/components/atoms/video-tile.astro | 6 +- .../sections/favorites-section.astro | 75 ++++++++++++++++++- src/pages/index.astro | 2 +- src/pages/playground/main-section.astro | 4 + 9 files changed, 108 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index d152fd7..95fb96a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8648,9 +8648,9 @@ } }, "node_modules/sharp": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.1.tgz", - "integrity": "sha512-GR8M1wBwOiFKLkm9JPun27OQnNRZdHfSf9VwcdZX6UrRmM1/XnOrLFTF0GAil+y/YK4E6qcM/ugxs80QirsHxg==", + "version": "0.31.2", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.2.tgz", + "integrity": "sha512-DUdNVEXgS5A97cTagSLIIp8dUZ/lZtk78iNVZgHdHbx1qnQR7JAHY0BnXnwwH39Iw+VKhO08CTYhIg0p98vQ5Q==", "hasInstallScript": true, "optional": true, "peer": true, @@ -8659,7 +8659,7 @@ "detect-libc": "^2.0.1", "node-addon-api": "^5.0.0", "prebuild-install": "^7.1.1", - "semver": "^7.3.7", + "semver": "^7.3.8", "simple-get": "^4.0.1", "tar-fs": "^2.1.1", "tunnel-agent": "^0.6.0" @@ -8672,9 +8672,9 @@ } }, "node_modules/sharp/node_modules/semver": { - "version": "7.3.7", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", - "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "version": "7.3.8", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", + "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", "optional": true, "peer": true, "dependencies": { @@ -16642,9 +16642,9 @@ "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==" }, "sharp": { - "version": "0.31.1", - "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.1.tgz", - "integrity": "sha512-GR8M1wBwOiFKLkm9JPun27OQnNRZdHfSf9VwcdZX6UrRmM1/XnOrLFTF0GAil+y/YK4E6qcM/ugxs80QirsHxg==", + "version": "0.31.2", + "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.31.2.tgz", + "integrity": "sha512-DUdNVEXgS5A97cTagSLIIp8dUZ/lZtk78iNVZgHdHbx1qnQR7JAHY0BnXnwwH39Iw+VKhO08CTYhIg0p98vQ5Q==", "optional": true, "peer": true, "requires": { @@ -16652,16 +16652,16 @@ "detect-libc": "^2.0.1", "node-addon-api": "^5.0.0", "prebuild-install": "^7.1.1", - "semver": "^7.3.7", + "semver": "^7.3.8", "simple-get": "^4.0.1", "tar-fs": "^2.1.1", "tunnel-agent": "^0.6.0" }, "dependencies": { "semver": { - "version": "7.3.7", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz", - "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==", + "version": "7.3.8", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz", + "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==", "optional": true, "peer": true, "requires": { diff --git a/src/components/atoms/book-tile.astro b/src/components/atoms/book-tile.astro index b42cac5..5c7fea8 100644 --- a/src/components/atoms/book-tile.astro +++ b/src/components/atoms/book-tile.astro @@ -14,16 +14,17 @@ const BookTile = 'a'; {value.title} -
+
{value.title} diff --git a/src/components/atoms/icon-with-tooltip.tsx b/src/components/atoms/icon-with-tooltip.tsx index 7c5482e..5e5d72a 100644 --- a/src/components/atoms/icon-with-tooltip.tsx +++ b/src/components/atoms/icon-with-tooltip.tsx @@ -6,7 +6,7 @@ type Props = IconProps & Omit; const IconWithTooltip = ({ name, color, size, ...tooltipProps }: Props) => ( -
+
diff --git a/src/components/atoms/media-tile.astro b/src/components/atoms/media-tile.astro index fdfcd55..119f423 100644 --- a/src/components/atoms/media-tile.astro +++ b/src/components/atoms/media-tile.astro @@ -14,13 +14,14 @@ const MediaTile = 'a'; {value.title}
diff --git a/src/components/atoms/person-tile.astro b/src/components/atoms/person-tile.astro index 928adfa..5072fe7 100644 --- a/src/components/atoms/person-tile.astro +++ b/src/components/atoms/person-tile.astro @@ -14,21 +14,19 @@ const PersonTile = 'a'; {value.name}
{value.name} - - {value.name} -
diff --git a/src/components/atoms/video-tile.astro b/src/components/atoms/video-tile.astro index 07d5a1d..b4a6ffa 100644 --- a/src/components/atoms/video-tile.astro +++ b/src/components/atoms/video-tile.astro @@ -18,13 +18,13 @@ const getVideoThumbnail = (url: string) => { {value.title} diff --git a/src/components/sections/favorites-section.astro b/src/components/sections/favorites-section.astro index 3c97766..2d8a12f 100644 --- a/src/components/sections/favorites-section.astro +++ b/src/components/sections/favorites-section.astro @@ -1,18 +1,87 @@ --- +import type { ComponentInstance } from 'astro'; + +import BookTile from '@/atoms/book-tile.astro'; +import MediaTile from '@/atoms/media-tile.astro'; +import PersonTile from '@/atoms/person-tile.astro'; import SectionCard from '@/atoms/section-card.astro'; import Typography from '@/atoms/typography.astro'; +import VideoTile from '@/atoms/video-tile.astro'; import type { Section } from '@/types/data'; -import type { FavoritesSection } from '@/types/favorites-section'; +import type { Book, FavoritesSection, Media, Person, Video } from '@/types/favorites-section'; export interface Props extends FavoritesSection {} const { config: { title }, + books, + medias, + people, + videos, } = Astro.props; +type Subsection = 'books' | 'medias' | 'people' | 'videos'; +type SubsectionData = Book | Media | Person | Video; +// eslint-disable-next-line @typescript-eslint/no-explicit-any -- required to avoid type casting +type SubsectionComponent = (_props: { value: any }) => ComponentInstance; + +interface FavoritesSubsection { + name: Subsection; + data: T[]; + title: string; + columnsLayout: string; + Component: SubsectionComponent; +} + +const booksSubsection: FavoritesSubsection = { + name: 'books', + columnsLayout: 'grid-cols-4', + Component: BookTile, + ...books, +}; + +const mediasSubsection: FavoritesSubsection = { + name: 'medias', + columnsLayout: 'grid-cols-6', + Component: MediaTile, + ...medias, +}; + +const peopleSubsection: FavoritesSubsection = { + name: 'people', + columnsLayout: 'grid-cols-6', + Component: PersonTile, + ...people, +}; + +const videosSubsection: FavoritesSubsection