kaas

src/components/hero/hero.tsx

@@ -1,17 +1,38 @@
-import { Index } from "solid-js";
-import { Entry } from "~/features/content";
+import { Component, createEffect, createMemo, For, Index } from "solid-js";
+import { createSlug, Entry } from "~/features/content";
 import css from "./hero.module.css";
 
 type HeroProps = {
-  entry: Entry;
+  entries: Entry[];
   class?: string;
 };
 
 export function Hero(props: HeroProps) {
+  const entry = createMemo(() => props.entries.at(0)!);
+  const slug = createMemo(() => createSlug(entry()));
+  
   return (
     <div class={`${css.container} ${props.class ?? ''}`}>
+      <For each={props.entries}>{
+        entry => <Page entry={entry} />
+      }</For>
+    </div>
+  );
+}
+
+const Page: Component<{ entry: Entry }> = (props) => {
+  const slug = createMemo(() => createSlug(props.entry));
+
+  createEffect(() => {
+    console.log(props.entry);
+  });
+
+  return (
+    <div class={`${css.page}`} style={{ '--thumb-image': `url(${props.entry.thumbnail})` }}>
 
       <h2 class={css.title}>{props.entry.title}</h2>
+      
+      <a class={css.cta} href={`/watch/${slug()}`}>Continue</a>
 
       <img src={props.entry.thumbnail} class={css.thumbnail} />
       <img src={props.entry.image} class={css.background} />
@@ -31,7 +52,7 @@ export function Hero(props: HeroProps) {
         </Index>
       </span>
 
-      <p class={css.summary}>{props.entry.summary}</p>
+      <p class={css.summary}>{props.entry.synopsis}</p>
     </div>
   );
-}
+};