From cd71aff5a34ba6b7cbf6f1c7cc22944c6747000f Mon Sep 17 00:00:00 2001
From: angbur <41025473+angbur@users.noreply.github.com>
Date: Mon, 24 Oct 2022 20:11:10 +0200
Subject: [PATCH] Components for the favorites section (#27)

Co-authored-by: WindOfCodes <59533802+WindOfCodes@users.noreply.github.com>
Co-authored-by: Konrad Szwarc <konrad.szwarc.dev@gmail.com>
Co-authored-by: Bury <agnieszka.bury@capgemini.com>
---
 .vscode/settings.json                  |  4 +-
 src/components/atoms/book-tile.astro   | 34 +++++++++++++++++
 src/components/atoms/media-tile.astro  | 34 +++++++++++++++++
 src/components/atoms/person-tile.astro | 34 +++++++++++++++++
 src/components/atoms/video-tile.astro  | 36 ++++++++++++++++++
 src/pages/playground/favorites.astro   | 51 ++++++++++++++++++++++++++
 src/types/favorites-section.ts         |  8 ++--
 7 files changed, 196 insertions(+), 5 deletions(-)
 create mode 100644 src/components/atoms/book-tile.astro
 create mode 100644 src/components/atoms/media-tile.astro
 create mode 100644 src/components/atoms/person-tile.astro
 create mode 100644 src/components/atoms/video-tile.astro
 create mode 100644 src/pages/playground/favorites.astro

diff --git a/.vscode/settings.json b/.vscode/settings.json
index f0e6104..8c88839 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -12,5 +12,7 @@
   "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
   "[javascript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
   "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" },
-  "[typescriptreact]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
 }
diff --git a/src/components/atoms/book-tile.astro b/src/components/atoms/book-tile.astro
new file mode 100644
index 0000000..b42cac5
--- /dev/null
+++ b/src/components/atoms/book-tile.astro
@@ -0,0 +1,34 @@
+---
+import { Image } from '@astrojs/image/components';
+
+import Typography from '@/atoms/typography.astro';
+import type { Book } from '@/types/favorites-section';
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: Book;
+}
+
+const { value, ...props } = Astro.props;
+const BookTile = 'a';
+---
+
+<BookTile
+  href={value.url}
+  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', props.class]}
+>
+  <Image
+    class:list={['rounded-lg', 'shadow-md', 'object-cover']}
+    src={value.cover}
+    aspectRatio="1.3"
+    alt={value.title}
+    format="webp"
+  />
+  <div class:list={['tile-content', 'gap-1']}>
+    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+      {value.title}
+    </Typography>
+    <Typography variant="tile-subtitle">
+      {value.author}
+    </Typography>
+  </div>
+</BookTile>
diff --git a/src/components/atoms/media-tile.astro b/src/components/atoms/media-tile.astro
new file mode 100644
index 0000000..fdfcd55
--- /dev/null
+++ b/src/components/atoms/media-tile.astro
@@ -0,0 +1,34 @@
+---
+import { Image } from '@astrojs/image/components';
+
+import Typography from '@/atoms/typography.astro';
+import type { Media } from '@/types/favorites-section';
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: Media;
+}
+
+const { value, ...props } = Astro.props;
+const MediaTile = 'a';
+---
+
+<MediaTile
+  href={value.url}
+  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', props.class]}
+>
+  <Image
+    class:list={['rounded-lg', 'shadow-md', 'object-cover']}
+    src={value.image}
+    alt={value.title}
+    aspectRatio="1.1"
+    format="webp"
+  />
+  <div class:list={['tile-content', 'gap-1']}>
+    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+      {value.title}
+    </Typography>
+    <Typography variant="tile-subtitle">
+      {value.type}
+    </Typography>
+  </div>
+</MediaTile>
diff --git a/src/components/atoms/person-tile.astro b/src/components/atoms/person-tile.astro
new file mode 100644
index 0000000..928adfa
--- /dev/null
+++ b/src/components/atoms/person-tile.astro
@@ -0,0 +1,34 @@
+---
+import { Image } from '@astrojs/image/components';
+
+import Typography from '@/atoms/typography.astro';
+import type { Person } from '@/types/favorites-section';
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: Person;
+}
+
+const { value, ...props } = Astro.props;
+const PersonTile = 'a';
+---
+
+<PersonTile
+  href={value.url}
+  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', props.class]}
+>
+  <Image
+    class:list={['rounded-lg', 'shadow-md', 'object-cover', 'transition', 'duration-300']}
+    src={value.image}
+    alt={value.name}
+    aspectRatio="1/1"
+    format="webp"
+  />
+  <div class:list={['tile-content', 'gap-1']}>
+    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+      {value.name}
+    </Typography>
+    <Typography variant="tile-subtitle">
+      {value.name}
+    </Typography>
+  </div>
+</PersonTile>
diff --git a/src/components/atoms/video-tile.astro b/src/components/atoms/video-tile.astro
new file mode 100644
index 0000000..07d5a1d
--- /dev/null
+++ b/src/components/atoms/video-tile.astro
@@ -0,0 +1,36 @@
+---
+import { Image } from '@astrojs/image/components';
+
+import Typography from '@/atoms/typography.astro';
+import type { Video } from '@/types/favorites-section';
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+  value: Video;
+}
+
+const { value, ...props } = Astro.props;
+const VideoTile = 'a';
+
+const getVideoThumbnail = (url: string) => {
+  return `https://img.youtube.com/vi/${url.split('/').pop()}/0.jpg`;
+};
+---
+
+<VideoTile
+  href={value.url}
+  class:list={['flex', 'flex-col', 'gap-3', 'transition', 'duration-300', 'hover:translate-y-2', props.class]}
+>
+  <Image
+    class:list={['rounded-lg', 'shadow-md', 'object-cover']}
+    src={getVideoThumbnail(value.url)}
+    width="auto"
+    aspectRatio="1.67"
+    alt={value.title}
+    format="webp"
+  />
+  <div class:list={['tile-content', 'gap-1']}>
+    <Typography class:list={['leading-5', 'hover:text-gray-900']} variant="tile-title">
+      {value.title}
+    </Typography>
+  </div>
+</VideoTile>
diff --git a/src/pages/playground/favorites.astro b/src/pages/playground/favorites.astro
new file mode 100644
index 0000000..faa065d
--- /dev/null
+++ b/src/pages/playground/favorites.astro
@@ -0,0 +1,51 @@
+---
+import BookTile from '@/atoms/book-tile.astro';
+import MediaTile from '@/atoms/media-tile.astro';
+import PersonTile from '@/atoms/person-tile.astro';
+import Typography from '@/atoms/typography.astro';
+import VideoTile from '@/atoms/video-tile.astro';
+import type { Book, Media, Person, Video } from '@/types/favorites-section';
+
+const book: Book = {
+  cover: import('@/assets/favorites/books/book-1.jpeg'),
+  title: 'The Pragmatic Programmer: From Journeyman to Master',
+  author: 'Andy Hunt, Dave Thomas',
+  url: 'https://www.goodreads.com/book/show/4099.The_Pragmatic_Programmer',
+};
+
+const person: Person = {
+  image: import('@/assets/favorites/people/person-1.jpg'),
+  name: 'Kent C. Dodds',
+  url: 'https://kentcdodds.com/',
+};
+
+const video: Video = {
+  thumbnail: import('@/assets/favorites/videos/video-1.jpeg'),
+  title: 'Building Resilient Frontend Architecture - Monica Lent - GOTO 2019',
+  url: 'https://youtu.be/TqfbAXCCVwE',
+};
+
+const media: Media = {
+  image: import('@/assets/favorites/media/media-1.jpeg'),
+  title: 'Fireship.io',
+  type: 'YouTube channel',
+  url: 'https://www.youtube.com/c/Fireship',
+};
+---
+
+<Typography class="m-2 font-mono" variant="item-title">Favourite Book</Typography>
+<div class="m-4 grid grid-cols-8">
+  <BookTile value={book} />
+</div>
+<Typography class="m-2 font-mono" variant="item-title">Favourite Person</Typography>
+<div class="m-4 grid grid-cols-12">
+  <PersonTile value={person} />
+</div>
+<Typography class="m-2 font-mono" variant="item-title">Favourite Video</Typography>
+<div class="m-4 grid grid-cols-6">
+  <VideoTile value={video} />
+</div>
+<Typography class="m-2 font-mono" variant="item-title">Favourite Media</Typography>
+<div class="m-4 grid grid-cols-12">
+  <MediaTile value={media} />
+</div>
diff --git a/src/types/favorites-section.ts b/src/types/favorites-section.ts
index 6e567ca..e65c0bb 100644
--- a/src/types/favorites-section.ts
+++ b/src/types/favorites-section.ts
@@ -1,25 +1,25 @@
 import type { LocalImage, SectionConfig } from './common';
 
-interface Book {
+export interface Book {
   title: string;
   cover: LocalImage;
   author: string;
   url?: string;
 }
 
-interface Person {
+export interface Person {
   name: string;
   image: LocalImage;
   url?: string;
 }
 
-interface Video {
+export interface Video {
   title: string;
   thumbnail: LocalImage;
   url: string;
 }
 
-interface Media {
+export interface Media {
   title: string;
   type: string;
   image: LocalImage;