From 93552152be180766fda08b1bd7ccefc4d26065ff Mon Sep 17 00:00:00 2001
From: Lieuwe Rooijakkers <lieuwerooijakkers@gmail.com>
Date: Sun, 19 Jan 2025 22:21:32 +0100
Subject: client advancements

---
 .../src/routes/app/components/content/content.jsx  | 32 ++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 client/src/routes/app/components/content/content.jsx

(limited to 'client/src/routes/app/components/content/content.jsx')

diff --git a/client/src/routes/app/components/content/content.jsx b/client/src/routes/app/components/content/content.jsx
new file mode 100644
index 0000000..42ecb8a
--- /dev/null
+++ b/client/src/routes/app/components/content/content.jsx
@@ -0,0 +1,32 @@
+import {useLayoutEffect, useRef, useState} from 'react';
+
+import './content.css';
+
+import Entry from '../../../../components/entry';
+
+export default function Content({ title, setTitle, items, setItems }) {
+	const [focused, setFocused] = useState(null);
+
+	const children = items.map((item, i) => {
+		return <Entry
+			item={item}
+			isFocused={i === focused}
+			onSelect={delta => setFocused(i + delta)}
+			onRemove={refocus => setItems(a => {
+				if (refocus) {
+					setFocused(i-1);
+				}
+				return [...a.slice(0, i), ...a.slice(i + 1)]
+			})}
+			onEnter={type => setItems(a => {
+				setFocused(i+1);
+				return a.toSpliced(i+1, 0, { type, text: '' });
+			})}
+		/>;
+	});
+
+	return <div className="content">
+		<h1 className='title' contentEditable="true">{title}</h1>
+		{children}
+	</div>;
+}
-- 
cgit v1.2.3-70-g09d2