move member leftpanel components in separate files

src/components/Members/Home.tsx

@@ -1,75 +1,4 @@
-import type { ComponentChild } from "preact";
+import LeftPanel from "./LeftPanel"
-import { FaCog } from "react-icons/fa";
-
-function User() {
-  return (
-    <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
-      <img src="https://placekitten.com/200/200" alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
-      <p className="ml-2 text-center flex-grow">John Doe</p>
-    </div>
-  )
-}
-
-function Channels() {
-  const channels = ["Discussion", "Nature", "Portrait", "Architecture"];
-
-  return (
-    <div className="flex flex-col flex-grow border-b-2 border-b-gray-200">
-      <div className="flex justify-between items-center p-4">
-        <p className="flex-grow text-gray-500 font-medium text-xl">
-          Canaux
-        </p>
-        <button className="px-1 pb-1 leading-none transition-all text-gray-400 hover:text-gray-500 hover:bg-gray-100 text-xl border border-gray-300 rounded-md">+</button>
-      </div>
-      <ul>
-        {channels.map((channel) => (
-          <li className="p-2 hover:bg-gray-100 cursor-pointer text-xl flex items-center" key={channel}>
-            <p className="flex-grow">
-              <span className="text-gray-400">#</span> {channel}
-            </p>
-            <FaCog className="transition hover:text-gray-700" />
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
-
-function UserPersonnalLinks() {
-  return (
-    <div className="flex flex-col border-b-2 border-b-gray-200 h-fit">
-      <SectionLink>Galerie personelle</SectionLink>
-    </div>
-  )
-}
-
-function SectionLink({children, className = ""}: {children: ComponentChild, className?: string}) {
-  return (
-    <p className={"text-xl hover:bg-gray-100 cursor-pointer px-4 py-2" + className}>{children}</p>
-  )
-}
-
-function SiteManagement() {
-  return (
-    <div className="flex flex-col">
-      <p className="text-xl text-gray-500 mb-1 p-4">Gestion du site</p>
-      <SectionLink>Membres</SectionLink>
-      <SectionLink>Pages</SectionLink>
-      <SectionLink>Galeries</SectionLink>
-    </div>
-  )
-}
-
-function LeftPanel() {
-  return (
-    <div className="w-1/5 border-r-2 border-gray-200 flex flex-col">
-      <User />
-      <Channels />
-      <UserPersonnalLinks />
-      <SiteManagement />
-    </div>
-  )
-}
 
 function Chat() {
   return (

src/components/Members/LeftPanel/Channels.tsx

@@ -0,0 +1,26 @@
+import { FaCog } from "react-icons/fa";
+
+export default function Channels() {
+  const channels = ["Discussion", "Nature", "Portrait", "Architecture"];
+
+  return (
+    <div className="flex flex-col flex-grow border-b-2 border-b-gray-200">
+      <div className="flex justify-between items-center p-4">
+        <p className="flex-grow text-gray-500 font-medium text-xl">
+          Canaux
+        </p>
+        <button className="px-1 pb-1 leading-none transition-all text-gray-400 hover:text-gray-500 hover:bg-gray-100 text-xl border border-gray-300 rounded-md">+</button>
+      </div>
+      <ul>
+        {channels.map((channel) => (
+          <li className="p-2 hover:bg-gray-100 cursor-pointer text-xl flex items-center" key={channel}>
+            <p className="flex-grow">
+              <span className="text-gray-400">#</span> {channel}
+            </p>
+            <FaCog className="transition hover:text-gray-700" />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

src/components/Members/LeftPanel/SectionLink.tsx

@@ -0,0 +1,7 @@
+import type { ComponentChild } from "preact";
+
+export default function SectionLink({ children, className = "" }: { children: ComponentChild, className?: string }) {
+  return (
+    <p className={"text-xl hover:bg-gray-100 cursor-pointer px-4 py-2" + className}>{children}</p>
+  )
+}

src/components/Members/LeftPanel/SiteManagement.tsx

@@ -0,0 +1,12 @@
+import SectionLink from "./SectionLink";
+
+export default function SiteManagement() {
+  return (
+    <div className="flex flex-col">
+      <p className="text-xl text-gray-500 mb-1 p-4">Gestion du site</p>
+      <SectionLink>Membres</SectionLink>
+      <SectionLink>Pages</SectionLink>
+      <SectionLink>Galeries</SectionLink>
+    </div>
+  )
+}

src/components/Members/LeftPanel/User.tsx

@@ -0,0 +1,8 @@
+export default function User() {
+  return (
+    <div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
+      <img src="https://placekitten.com/200/200" alt="Profile" className="rounded-full border-2 border-gray-200 h-full" />
+      <p className="ml-2 text-center flex-grow">John Doe</p>
+    </div>
+  )
+}

src/components/Members/LeftPanel/UserPersonnalLinks.tsx

@@ -0,0 +1,9 @@
+import SectionLink from "./SectionLink";
+
+export default function UserPersonnalLinks() {
+  return (
+    <div className="flex flex-col border-b-2 border-b-gray-200 h-fit">
+      <SectionLink>Galerie personelle</SectionLink>
+    </div>
+  )
+}

src/components/Members/LeftPanel/index.tsx

@@ -0,0 +1,15 @@
+import Channels from "./Channels";
+import SiteManagement from "./SiteManagement";
+import User from "./User";
+import UserPersonnalLinks from "./UserPersonnalLinks";
+
+export default function LeftPanel() {
+  return (
+    <div className="w-1/5 border-r-2 border-gray-200 flex flex-col">
+      <User />
+      <Channels />
+      <UserPersonnalLinks />
+      <SiteManagement />
+    </div>
+  )
+}

src/layouts/Layout.astro

@@ -22,7 +22,9 @@ const { title, footer = true } = Astro.props;
 	</head>
 	<body class="min-h-[100vh] flex flex-col">
 		<Header />
+		<div class="flex flex-col flex-grow">
 			<slot />
+		</div>
 		{footer && <Footer />}
 	</body>
 </html>