implement ui for left panel in dashboard
This commit is contained in:
parent
77d3ac47ee
commit
4d0cfdbaea
|
|
@ -1,7 +1,81 @@
|
||||||
export default function Home() {
|
import { FaCog } from "react-icons/fa";
|
||||||
|
|
||||||
|
function User() {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="flex items-center p-4 border-b-2 border-gray-200 max-h-[6rem]">
|
||||||
<h1 className="text-2xl font-bold leading-9 tracking-tight text-gray-900">Bienvenue sur votre espace membre</h1>
|
<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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,17 @@
|
||||||
---
|
---
|
||||||
import Header from '../components/Header.astro';
|
import Header from '../components/Header.astro';
|
||||||
import Footer from '../components/Footer.astro';
|
import Footer from '../components/Footer.astro';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
|
footer?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title } = Astro.props;
|
const { title, footer = true } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="description" content="Astro description" />
|
<meta name="description" content="Astro description" />
|
||||||
|
|
@ -18,9 +20,9 @@ const { title } = Astro.props;
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="min-h-[100vh] flex flex-col">
|
||||||
<Header />
|
<Header />
|
||||||
<slot />
|
<slot />
|
||||||
<Footer />
|
{footer && <Footer />}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
---
|
---
|
||||||
import Layout from '../layouts/Layout.astro';
|
import Layout from '../layouts/Layout.astro';
|
||||||
// import Login from '../components/Login.tsx'
|
|
||||||
import EspaceMembres from '../components/EspaceMembres.tsx';
|
import EspaceMembres from '../components/EspaceMembres.tsx';
|
||||||
---
|
---
|
||||||
<Layout title="Espace membres">
|
<Layout title="Espace membres" footer={false}>
|
||||||
<!-- <Login client:only="preact"/> -->
|
|
||||||
<EspaceMembres client:only="preact"/>
|
<EspaceMembres client:only="preact"/>
|
||||||
|
<style>
|
||||||
|
footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue