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

implement ui for left panel in dashboard

This commit is contained in:
Guillaume Dorce 2023-09-10 15:41:02 +02:00
parent 77d3ac47ee
commit 4d0cfdbaea
3 changed files with 90 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,81 @@
export default function Home() {
import { FaCog } from "react-icons/fa";
function User() {
return (
<>
<h1 className="text-2xl font-bold leading-9 tracking-tight text-gray-900">Bienvenue sur votre espace membre</h1>
</>
<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-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>
</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">
<p className="text-xl hover:bg-gray-100 cursor-pointer px-4 py-2">Galerie personelle</p>
</div>
)
}
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>
</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 (
<div className="w-full">
</div>
)
}
export default function Home() {
return (
<div className="flex min-h-full flex-grow">
<LeftPanel />
<Chat />
</div>
)
}

10
src/layouts/Layout.astro
View File

@ -1,15 +1,17 @@
---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
interface Props {
title: string;
footer?: boolean;
}
const { title } = Astro.props;
const { title, footer = true } = Astro.props;
---
<!doctype html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="description" content="Astro description" />
@ -18,9 +20,9 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body>
<body class="min-h-[100vh] flex flex-col">
<Header />
<slot />
<Footer />
{footer && <Footer />}
</body>
</html>

9
src/pages/espace-membres.astro
View File

@ -1,9 +1,12 @@
---
import Layout from '../layouts/Layout.astro';
// import Login from '../components/Login.tsx'
import EspaceMembres from '../components/EspaceMembres.tsx';
---
<Layout title="Espace membres">
<!-- <Login client:only="preact"/> -->
<Layout title="Espace membres" footer={false}>
<EspaceMembres client:only="preact"/>
<style>
footer {
display: none;
}
</style>
</Layout>