polynux
/
pchl-astro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move member leftpanel components in separate files

This commit is contained in:
Guillaume Dorce 2023-09-10 19:05:14 +02:00
parent c67d72fba4
commit 3156d07d02
9 changed files with 81 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/favicon.ico → public/favicon.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

73
src/components/Members/Home.tsx
View File

@ -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 (

26
src/components/Members/LeftPanel/Channels.tsx Normal file
View File

@ -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>
)
}

7
src/components/Members/LeftPanel/SectionLink.tsx Normal file
View File

@ -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>
)
}

12
src/components/Members/LeftPanel/SiteManagement.tsx Normal file
View File

@ -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>
)
}

8
src/components/Members/LeftPanel/User.tsx Normal file
View File

@ -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>
)
}

9
src/components/Members/LeftPanel/UserPersonnalLinks.tsx Normal file
View File

@ -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>
)
}

15
src/components/Members/LeftPanel/index.tsx Normal file
View File

@ -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>
)
}

2
src/layouts/Layout.astro
View File

@ -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>