chore: staged changes

src/modules/hero/@types/HeroItem.ts

@@ -0,0 +1,9 @@
+export interface HeroItem {
+  src: string
+  date: Date
+  camera: {
+    manufacturer: string
+    model: string
+    lens: string
+  }
+}

src/modules/hero/components/HeroImage.astro

@@ -0,0 +1,51 @@
+---
+import CfImage from '$core/components/cfImage.astro'
+import dayjs from 'dayjs'
+
+import type { HeroItem } from '../@types/HeroItem'
+
+export type Props = HeroItem
+
+const { src, date, camera } = Astro.props
+---
+
+<section class="relative">
+  <CfImage
+    id="cover"
+    src={src}
+    width={{
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      max: 2000,
+    }}
+    ratio={1.33}
+    fetchpriority="high"
+    decoding="async"
+    alt="cover"
+  />
+  <div class="absolute top-4 left-4 flex">
+    <div class="bg-black/70 px-4 py-3 rounded-xl font-mono text-xs text-white">
+      <p class="space-x-1">
+        <span class="font-bold">{camera.manufacturer}</span><span
+          >{camera.model}</span>
+      </p>
+      <p>{camera.lens}</p>
+      <p>{dayjs(date).format('DD MMM YYYY')}</p>
+    </div>
+  </div>
+</section>
+
+<style>
+  section {
+    @apply w-screen shrink-0 snap-center;
+  }
+</style>
+
+<style is:global>
+  picture,
+  img#cover {
+    @apply h-screen w-screen object-cover;
+  }
+</style>

src/modules/hero/constants/index.ts

@@ -0,0 +1,22 @@
+import type { HeroItem } from '../@types/HeroItem'
+
+export const heroItems: HeroItem[] = [
+  {
+    src: '/front/1.jpg',
+    date: new Date('2023-11-10'),
+    camera: {
+      manufacturer: 'Sony',
+      model: 'ILCE-7M4',
+      lens: 'FE 24-70mm F2.8 GM II',
+    },
+  },
+  {
+    src: '/front/2.jpg',
+    date: new Date('2023-02-16'),
+    camera: {
+      manufacturer: 'Apple',
+      model: 'iPhone 14 Pro',
+      lens: 'Main Camera — 24 mm ƒ1.78',
+    },
+  },
+]

src/pages/index.astro

@@ -1,30 +1,18 @@
 ---
-import FrontImage from '$app/components/frontImage.astro';
-import Layout from '../app/components/layout.astro'
+import HeroImage from '$modules/hero/components/HeroImage.astro'
+import Layout from '$app/components/layout.astro'
+import { heroItems } from '$modules/hero/constants'
 
 export const prerender = true
 ---
 
 <Layout noPadding>
-  <div id="frontImage" class="snap-mandatory snap-x flex overflow-x-auto overflow-y-hidden">
-    <FrontImage src="/front/1.jpg" />
-    <FrontImage src="/front/2.jpg" />
+  <div
+    id="frontImage"
+    class="snap-mandatory snap-x flex overflow-x-auto overflow-y-hidden"
+  >
+    {heroItems.map(item => <HeroImage {...item} />)}
   </div>
-  <!-- <CfImage
-    id="cover"
-    src="./front.jpg"
-    width={{
-      sm: 640,
-      md: 768,
-      lg: 1024,
-      xl: 1280,
-      max: 2000,
-    }}
-    ratio={1.33}
-    fetchpriority="high"
-    decoding="async"
-    alt="cover"
-  /> -->
 </Layout>
 
 <style>