Restore playground directory (#102)

src/pages/_playground/button.astro

@@ -0,0 +1,7 @@
+---
+import Button from '@/atoms/button.astro';
+---
+
+<div class="p-5">
+  <Button href="#">Button text</Button>
+</div>

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>

src/pages/_playground/icon-button.astro

@@ -0,0 +1,10 @@
+---
+import IconButton from '@/atoms/icon-button.astro';
+---
+
+<div class:list={['p-5', 'flex', 'flex-col', 'gap-2']}>
+  <IconButton icon="fa6-brands:facebook-f" size="small" href="#" />
+  <IconButton icon="fa6-brands:github" size="small" href="#" />
+  <IconButton icon="fa6-brands:linkedin-in" size="large" href="#" />
+  <IconButton icon="fa6-brands:twitter" size="large" href="#" />
+</div>

src/pages/_playground/icon.astro

@@ -0,0 +1,9 @@
+---
+import Icon from '@/atoms/icon';
+---
+
+<div class="p-5">
+  <!-- Available icon names here: https://icon-sets.iconify.design -->
+  <!-- Colors for simple icons here: https://simpleicons.org -->
+  <Icon client:load name="simple-icons:react" size={24} color="#61DAFB" />
+</div>

src/pages/_playground/image.astro

@@ -0,0 +1,7 @@
+---
+import { Image } from '@astrojs/image/components';
+---
+
+<div class="p-5">
+  <Image src={import('@/assets/my-image.jpeg')} alt="My image" width={120} height={120} format="webp" />
+</div>

src/pages/_playground/labelled-value.astro

@@ -0,0 +1,7 @@
+---
+import LabelledValue from '@/atoms/labelled-value.astro';
+---
+
+<div class="p-5">
+  <LabelledValue label="Label" value="value" />
+</div>

src/pages/_playground/main-section.astro

@@ -0,0 +1,37 @@
+---
+import MainSection from '@/sections/main-section.astro';
+import type { MainSection as MainSectionData } from '@/types/main-section';
+
+const mainSectionData: MainSectionData = {
+  image: import('@/assets/my-image.jpeg'),
+  fullName: 'Mark Freeman',
+  role: 'Senior React Developer',
+  details: [
+    { label: 'Phone', value: '+48 604 343 212' },
+    { label: 'Email', value: 'veeeery.long.email.address@gmail.com' },
+    { label: 'From', value: 'Warsaw, Poland' },
+    { label: 'Salary range', value: '18 000 - 25 000 PLN' },
+  ],
+  description:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ac dui at vestibulum. In condimentum metus id dui tincidunt, in blandit mi vehicula. Nulla lacinia, erat sit amet elementum vulputate, lectus mauris volutpat mi, vitae accumsan metus elit ut nunc. Vestibulum lacinia enim eget eros fermentum scelerisque. Proin augue leo, posuere ut imperdiet vitae, fermentum eu ipsum. Sed sed neque sagittis, posuere urna nec, commodo leo. Pellentesque posuere justo vitae massa volutpat maximus.',
+  tags: [{ name: 'Open for freelance' }, { name: 'Available for mentoring' }, { name: 'Working on side project' }],
+  action: {
+    label: 'Download CV',
+    url: '#',
+  },
+  socials: [
+    { name: 'Facebook', icon: 'fa6-brands:facebook-f', url: '#' },
+    { name: 'GitHub', icon: 'fa6-brands:github', url: '#' },
+    { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' },
+    { name: 'Twitter', icon: 'fa6-brands:twitter', url: '#' },
+  ],
+};
+---
+
+<body class="flex justify-center bg-gray-50">
+  <div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
+    <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
+      <MainSection {...mainSectionData} />
+    </main>
+  </div>
+</body>

src/pages/_playground/section-card.astro

@@ -0,0 +1,7 @@
+---
+import SectionCard from '@/atoms/section-card.astro';
+---
+
+<div class="p-5">
+  <SectionCard>SectionCard text</SectionCard>
+</div>

src/pages/_playground/sidebar-item.astro

@@ -0,0 +1,7 @@
+---
+import SidebarItem from '@/atoms/sidebar-item';
+---
+
+<div class="p-5">
+  <SidebarItem client:only="react" icon="fa6-solid:bars-progress" section="experience" />
+</div>

src/pages/_playground/sidebar.astro

@@ -0,0 +1,12 @@
+---
+import SidebarItem from '@/atoms/sidebar-item';
+import Sidebar from '@/organisms/sidebar.astro';
+---
+
+<div class="relative p-5">
+  <Sidebar>
+    <SidebarItem client:only="react" icon="fa6-solid:bars-progress" section="skills" />
+    <SidebarItem client:only="react" icon="fa6-solid:suitcase" section="experience" />
+    <SidebarItem client:only="react" icon="fa6-solid:rocket" section="portfolio" />
+  </Sidebar>
+</div>

src/pages/_playground/skill.astro

@@ -0,0 +1,14 @@
+---
+import Skill from '@/organisms/skill.astro';
+import type { LevelledSkill } from '@/types/skills-section';
+
+const levelledSkill: LevelledSkill = {
+  icon: 'simple-icons:react',
+  iconColor: '#61DAFB',
+  name: 'React.js',
+  level: 3,
+  url: 'https://reactjs.org/',
+};
+---
+
+<Skill {...levelledSkill} />

src/pages/_playground/skills-section.astro

@@ -0,0 +1,160 @@
+---
+import SkillsSection from '@/sections/skills-section.astro';
+import type { SkillsSection as SkillsSectionData } from '@/types/skills-section';
+
+const skills: SkillsSectionData = {
+  config: {
+    title: 'Skills',
+    icon: 'fa6-solid:bars-progress',
+  },
+  skillSets: [
+    {
+      title: 'I already know',
+      skills: [
+        {
+          icon: 'simple-icons:react',
+          iconColor: '#61DAFB',
+          name: 'React.js',
+          level: 5,
+          url: 'https://reactjs.org/',
+          description:
+            'Proin ut erat sed massa tempus suscipit. Mauris efficitur nunc sem, nec scelerisque ligula bibendum ut.',
+        },
+        {
+          icon: 'simple-icons:typescript',
+          iconColor: '#3178C6',
+          name: 'TypeScript',
+          level: 4,
+          url: 'https://www.typescriptlang.org/',
+          description: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
+        },
+        {
+          icon: 'simple-icons:sass',
+          iconColor: '#CC6699',
+          name: 'SASS',
+          level: 4,
+          url: 'https://sass-lang.com/',
+          description: 'Nulla interdum pellentesque ultricies. Ut id eros commodo, ultrices ligula eu, elementum ante.',
+        },
+        {
+          icon: 'simple-icons:chakraui',
+          iconColor: '#319795',
+          name: 'Chakra UI',
+          level: 5,
+          url: 'https://chakra-ui.com/',
+        },
+        {
+          icon: 'simple-icons:tailwindcss',
+          iconColor: '#06B6D4',
+          name: 'Tailwind CSS',
+          level: 2,
+          url: 'https://tailwindcss.com/',
+        },
+        {
+          icon: 'simple-icons:prettier',
+          iconColor: '#F7B93E',
+          name: 'Prettier',
+          level: 5,
+          url: 'https://prettier.io/',
+        },
+        {
+          icon: 'simple-icons:eslint',
+          iconColor: '#4B32C3',
+          name: 'ESLint',
+          level: 4,
+          url: 'https://eslint.org/',
+          description:
+            'Nulla tempor turpis at vehicula pharetra. Vestibulum tellus tortor, commodo et suscipit id, lobortis id nunc.',
+        },
+        {
+          icon: 'simple-icons:nestjs',
+          iconColor: '#E0234E',
+          name: 'NestJS',
+          level: 2,
+          url: 'https://nestjs.com/',
+          description:
+            'Praesent feugiat ultricies iaculis. In posuere vehicula odio, sed consequat velit porta viverra.',
+        },
+        {
+          icon: 'simple-icons:postgresql',
+          iconColor: '#4169E1',
+          name: 'PostgreSQL',
+          level: 2,
+          url: 'https://www.postgresql.org/',
+        },
+        {
+          icon: 'simple-icons:mongodb',
+          iconColor: '#47A248',
+          name: 'MongoDB',
+          level: 1,
+          url: 'https://www.mongodb.com/',
+        },
+        {
+          icon: 'simple-icons:firebase',
+          iconColor: '#FFCA28',
+          name: 'Firebase',
+          level: 1,
+          url: 'https://firebase.google.com/',
+        },
+        {
+          icon: 'simple-icons:pnpm',
+          iconColor: '#F69220',
+          name: 'pnpm',
+          level: 3,
+          url: 'https://pnpm.io/',
+        },
+      ],
+    },
+    {
+      title: 'I want to learn',
+      skills: [
+        {
+          icon: 'simple-icons:apollographql',
+          iconColor: '#311C87',
+          name: 'Apollo GraphQL',
+        },
+        {
+          icon: 'simple-icons:astro',
+          iconColor: '#FF5D01',
+          name: 'Astro',
+        },
+        {
+          icon: 'simple-icons:supabase',
+          iconColor: '#3ECF8E',
+          name: 'Supabase',
+        },
+        {
+          icon: 'simple-icons:cypress',
+          iconColor: '#17202C',
+          name: 'Cypress',
+        },
+      ],
+    },
+    {
+      title: 'I speak',
+      skills: [
+        {
+          icon: 'circle-flags:pl',
+          name: 'Polish - native',
+        },
+        {
+          icon: 'circle-flags:us',
+          name: 'English - C1',
+        },
+        {
+          icon: 'circle-flags:es-variant',
+          name: 'Spanish - B1',
+        },
+      ],
+    },
+  ],
+};
+---
+
+<body class="flex justify-center bg-gray-50">
+  <div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
+    <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
+      <SkillsSection config={skills.config} skillSets={skills.skillSets} />
+    </main>
+  </div>
+</body>

src/pages/_playground/tag.astro

@@ -0,0 +1,11 @@
+---
+import Tag from '@/atoms/tag.astro';
+---
+
+<div class="p-5">
+  <Tag>Tag text</Tag>
+</div>
+
+<div class="p-5">
+  <Tag name="simple-icons:react" color="#61DAFB">Tag text</Tag>
+</div>

src/pages/_playground/testimonial.astro

@@ -0,0 +1,20 @@
+---
+import Testimonial from '@/organisms/testimonial.astro';
+import type { Testimonial as TestimonialData } from '@/types/testimonials-section';
+
+const testimonial: TestimonialData = {
+  author: 'Howard Stewart',
+  relation: 'We work together as front-end developers at Google',
+  content:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl vel tincidunt aliquam, nunc nisl aliquet nisl, eget aliquet nunc nisl euismod nisl. Sed euismod, nisl vel tincidunt aliquam, nunc nisl aliquet nisl, eget aliquet nunc nisl euismod nisl.',
+  image: import('@/assets/testimonials/testimonial-1.jpeg'),
+  socials: [
+    { name: 'GitHub', icon: 'fa6-brands:github', url: '#' },
+    { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' },
+  ],
+};
+---
+
+<div class:list={['flex', 'flex-col', 'gap-2', 'max-w-[896px]']}>
+  <Testimonial testimonial={testimonial} />
+</div>

src/pages/_playground/testimonials-section.astro

@@ -0,0 +1,45 @@
+---
+import TestimonialsSection from '@/sections/testimonials-section.astro';
+import type { Testimonial } from '@/types/testimonials-section';
+
+const testimonials: Testimonial[] = [
+  {
+    image: import('@/assets/testimonials/testimonial-1.jpeg'),
+    author: 'Howard Stewart',
+    relation: 'We work together as front-end developers at Google',
+    content:
+      'In nec mattis sem. Morbi purus lorem, euismod ac varius at, aliquet vitae augue. Pellentesque ut facilisis felis. In sed dui blandit, aliquet odio eu, elementum leo. In facilisis dapibus tortor ac volutpat. Cras cursus nec odio maximus elementum.',
+    socials: [
+      { name: 'GitHub', icon: 'fa6-brands:github', url: '#' },
+      { name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' },
+    ],
+  },
+  {
+    image: import('@/assets/testimonials/testimonial-2.jpeg'),
+    author: 'Jean Richards',
+    relation: 'My project manager at GitLab',
+    content:
+      'Praesent nec congue elit. Vestibulum lobortis congue ipsum, a gravida mi tempus ac. Mauris aliquet purus nibh, vel varius turpis tempus non. Nullam eget ultricies orci. Quisque nulla ante, auctor eget varius ac, imperdiet nec magna.',
+    socials: [{ name: 'LinkedIn', icon: 'fa6-brands:linkedin-in', url: '#' }],
+  },
+  {
+    image: import('@/assets/testimonials/testimonial-3.jpeg'),
+    author: 'Jason Fisher',
+    relation: 'My customer for sidewing.com website',
+    content:
+      'Mauris tincidunt at purus vehicula porta. Mauris eget mollis turpis. Sed iaculis rutrum pharetra. Vivamus risus quam, suscipit et semper ut, aliquet ut tellus. Donec quis auctor nunc.',
+    socials: [
+      { name: 'GitHub', icon: 'fa6-brands:github', url: '#' },
+      { name: 'Website', icon: 'fa6-solid:globe', url: '#' },
+    ],
+  },
+];
+---
+
+<body class="flex justify-center bg-gray-50">
+  <div class="flex gap-8 w-full max-w-6xl px-2 py-3 sm:px-8 sm:py-12 lg:px-16 lg:py-20 lg:ml-22">
+    <main class="w-full space-y-4 sm:space-y-6 lg:space-y-8">
+      <TestimonialsSection testimonials={testimonials} config={{ title: 'Testimonials', icon: 'fa6-solid:comment' }} />
+    </main>
+  </div>
+</body>

src/pages/_playground/typography.astro

@@ -0,0 +1,48 @@
+---
+import Typography from '@/atoms/typography.astro';
+
+const text = 'A quick brown fox jumps over the lazy dog';
+---
+
+<div class="p-5 space-y-10">
+  <div>
+    <p class="mb-2 font-mono">paragraph (default)</p>
+    <Typography>{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">main-title</p>
+    <Typography variant="main-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">main-subtitle</p>
+    <Typography variant="main-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">section-title</p>
+    <Typography variant="section-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">section-subtitle</p>
+    <Typography variant="section-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">item-title</p>
+    <Typography variant="item-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">item-title-suffix</p>
+    <Typography variant="item-title-suffix">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">item-subtitle</p>
+    <Typography variant="item-subtitle">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">tile-title</p>
+    <Typography variant="tile-title">{text}</Typography>
+  </div>
+  <div>
+    <p class="mb-2 font-mono">tile-subtitle</p>
+    <Typography variant="tile-subtitle">{text}</Typography>
+  </div>
+</div>