From 3156d07d0293068b1998625aee346b1ac15d092e Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Sun, 10 Sep 2023 19:05:14 +0200
Subject: [PATCH] move member leftpanel components in separate files

---
 {src/assets => public}/favicon.ico            | Bin
 src/components/Members/Home.tsx               |  73 +-----------------
 src/components/Members/LeftPanel/Channels.tsx |  26 +++++++
 .../Members/LeftPanel/SectionLink.tsx         |   7 ++
 .../Members/LeftPanel/SiteManagement.tsx      |  12 +++
 src/components/Members/LeftPanel/User.tsx     |   8 ++
 .../Members/LeftPanel/UserPersonnalLinks.tsx  |   9 +++
 src/components/Members/LeftPanel/index.tsx    |  15 ++++
 src/layouts/Layout.astro                      |   4 +-
 9 files changed, 81 insertions(+), 73 deletions(-)
 rename {src/assets => public}/favicon.ico (100%)
 create mode 100644 src/components/Members/LeftPanel/Channels.tsx
 create mode 100644 src/components/Members/LeftPanel/SectionLink.tsx
 create mode 100644 src/components/Members/LeftPanel/SiteManagement.tsx
 create mode 100644 src/components/Members/LeftPanel/User.tsx
 create mode 100644 src/components/Members/LeftPanel/UserPersonnalLinks.tsx
 create mode 100644 src/components/Members/LeftPanel/index.tsx

diff --git a/src/assets/favicon.ico b/public/favicon.ico
similarity index 100%
rename from src/assets/favicon.ico
rename to public/favicon.ico
diff --git a/src/components/Members/Home.tsx b/src/components/Members/Home.tsx
index 185b97d..c48fba7 100644
--- a/src/components/Members/Home.tsx
+++ b/src/components/Members/Home.tsx
@@ -1,75 +1,4 @@
-import type { ComponentChild } from "preact";
-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>
-  )
-}
+import LeftPanel from "./LeftPanel"
 
 function Chat() {
   return (
diff --git a/src/components/Members/LeftPanel/Channels.tsx b/src/components/Members/LeftPanel/Channels.tsx
new file mode 100644
index 0000000..994b920
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Members/LeftPanel/SectionLink.tsx b/src/components/Members/LeftPanel/SectionLink.tsx
new file mode 100644
index 0000000..ac7c448
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Members/LeftPanel/SiteManagement.tsx b/src/components/Members/LeftPanel/SiteManagement.tsx
new file mode 100644
index 0000000..cd040fa
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Members/LeftPanel/User.tsx b/src/components/Members/LeftPanel/User.tsx
new file mode 100644
index 0000000..7309d11
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Members/LeftPanel/UserPersonnalLinks.tsx b/src/components/Members/LeftPanel/UserPersonnalLinks.tsx
new file mode 100644
index 0000000..362312e
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/components/Members/LeftPanel/index.tsx b/src/components/Members/LeftPanel/index.tsx
new file mode 100644
index 0000000..cf3841f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 918d6b9..187e0e3 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -22,7 +22,9 @@ const { title, footer = true } = Astro.props;
 	</head>
 	<body class="min-h-[100vh] flex flex-col">
 		<Header />
-		<slot />
+		<div class="flex flex-col flex-grow">
+			<slot />
+		</div>
 		{footer && <Footer />}
 	</body>
 </html>