From 053f78ef277165f94b6011e293c026f22885c54a Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Sun, 10 Sep 2023 18:02:30 +0200
Subject: [PATCH] left panel link component

---
 src/components/Members/Home.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Members/Home.tsx b/src/components/Members/Home.tsx
index ccb1215..185b97d 100644
--- a/src/components/Members/Home.tsx
+++ b/src/components/Members/Home.tsx
@@ -1,3 +1,4 @@
+import type { ComponentChild } from "preact";
 import { FaCog } from "react-icons/fa";
 
 function User() {
@@ -18,7 +19,7 @@ function Channels() {
         <p className="flex-grow text-gray-500 font-medium text-xl">
           Canaux
         </p>
-        <button className="px-2 py-1 transition-all text-gray-400 hover:text-gray-500 hover:bg-gray-100 text-xl border border-gray-300 rounded-sm">+</button>
+        <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) => (
@@ -37,18 +38,24 @@ function Channels() {
 function UserPersonnalLinks() {
   return (
     <div className="flex flex-col border-b-2 border-b-gray-200 h-fit">
-      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Galerie personelle</p>
+      <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>
-      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Membres</p>
-      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Pages</p>
-      <p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Galeries</p>
+      <SectionLink>Membres</SectionLink>
+      <SectionLink>Pages</SectionLink>
+      <SectionLink>Galeries</SectionLink>
     </div>
   )
 }