From 6a0c1cb3776949666044a9b01880c38bea96bfbb Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Wed, 16 Apr 2025 16:14:42 +0200
Subject: [PATCH] heh

---
 src/routes/(shell)/index.module.css | 39 +++++++++++++++++++++++++++++
 src/routes/(shell)/index.tsx        | 18 +++++++++++--
 2 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/(shell)/index.module.css

diff --git a/src/routes/(shell)/index.module.css b/src/routes/(shell)/index.module.css
new file mode 100644
index 0000000..cdd3e8c
--- /dev/null
+++ b/src/routes/(shell)/index.module.css
@@ -0,0 +1,39 @@
+.list {
+    anchor-name: --carousel;
+    overflow: auto;
+    scroll-snap-type: inline mandatory;
+
+    display: grid;
+    grid-auto-flow: column;
+
+    inline-size: 80%;
+    justify-self: center;
+
+    & > li {
+        inline-size: 30vw;
+        list-style: none;
+        scroll-snap-align: start;
+    }
+
+    &::scroll-button(inline-start),
+    &::scroll-button(inline-end) {
+        position: fixed;
+        position-anchor: --carousel;
+    }
+
+    &::scroll-button(inline-start) {
+        --_inner: center span-inline-end;
+        --_outer: inline-start center;
+
+        position-area: var(--_outer);
+        content: 'arrow_back' / 'Previous';
+    }
+
+    &::scroll-button(inline-end) {
+        --_inner: center span-inline-start;
+        --_outer: inline-end center;
+
+        position-area: var(--_outer);
+        content: 'arrow_forward' / 'Next';
+    }
+}
\ No newline at end of file
diff --git a/src/routes/(shell)/index.tsx b/src/routes/(shell)/index.tsx
index 70e3591..a130454 100644
--- a/src/routes/(shell)/index.tsx
+++ b/src/routes/(shell)/index.tsx
@@ -9,6 +9,7 @@ import {
 import { Show } from "solid-js";
 import { List } from "~/components/list";
 import { ListItem } from "~/features/overview/list-item";
+import css from './index.module.css';
 
 export const route = {
   preload: async () => ({
@@ -29,11 +30,24 @@ export default function Home() {
     <>
       <Title>Home</Title>
 
-      <Show when={continueWatching()}>{
+      <ul class={css.list}>
+        <li>Item 0</li>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+        <li>Item 4</li>
+        <li>Item 5</li>
+        <li>Item 6</li>
+        <li>Item 7</li>
+        <li>Item 8</li>
+        <li>Item 9</li>
+      </ul>
+
+      {/* <Show when={continueWatching()}>{
         entries => <List label="Continue watching" items={entries()}>
           {(item) => <ListItem entry={item()} />}
         </List>
-      }</Show>
+      }</Show> */}
 
       <Show when={highlight() && categories()}>
         <Overview highlight={highlight()!} categories={categories()!} />