made the admin page
This commit is contained in:
Proxyy587
parent
2b34291279
commit
0a5ef396e2
7 changed files with 232 additions and 13 deletions
17
app/(auth)/_components/Card.tsx
Normal file
17
app/(auth)/_components/Card.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import { FC } from "react";
|
||||
|
||||
interface CardProps {
|
||||
title: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
const Card: FC<CardProps> = ({ title, content }) => {
|
||||
return (
|
||||
<div className="bg-white shadow-lg rounded-lg p-6">
|
||||
<h2 className="text-2xl font-bold mb-2">{title}</h2>
|
||||
<p className="">{content}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
56
app/(auth)/_components/Mobilenav.tsx
Normal file
56
app/(auth)/_components/Mobilenav.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
"use client";
|
||||
import React from "react";
|
||||
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { AdminLinks } from "@/constants";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Menu } from "lucide-react";
|
||||
|
||||
const MobileNav = () => {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<header className="header">
|
||||
<Link href="/" className="flex items-center gap-2 md:py-2">
|
||||
<Image src="/logo.svg" alt="" width={180} height={28} />
|
||||
</Link>
|
||||
|
||||
<nav className="flex gap-2">
|
||||
<Sheet>
|
||||
<SheetTrigger>
|
||||
<Menu className="w-5 h-5" />
|
||||
</SheetTrigger>
|
||||
<SheetContent className="sheet-content sm:w-64">
|
||||
<>
|
||||
<Image src="/logo.svg" alt="" width={152} height={23} />
|
||||
<ul className="header-nav_elements">
|
||||
{AdminLinks.slice(0, 6).map((link) => {
|
||||
const isActive = link.url === pathname;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={link.url}
|
||||
className={`${
|
||||
isActive && "gradient-text"
|
||||
} p-18 flex whitespace-nowrap text-dark-700`}
|
||||
>
|
||||
<Link
|
||||
className="sidebar-link cursor-pointer"
|
||||
href={link.url}
|
||||
>
|
||||
<link.icon />
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileNav;
|
||||
65
app/(auth)/_components/Sidebar.tsx
Normal file
65
app/(auth)/_components/Sidebar.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { AdminLinks } from "@/constants";
|
||||
|
||||
const Sidebar = () => {
|
||||
const pathname = usePathname();
|
||||
return (
|
||||
<>
|
||||
<aside className="sidebar">
|
||||
<div className="flex size-full flex-col gap-4">
|
||||
<Link href="/" className="sidebar-logo">
|
||||
<Image src="/logo.svg" alt="" width={180} height={28} />
|
||||
</Link>
|
||||
|
||||
<nav className="sidebar-nav">
|
||||
<ul className="sidebar-nav_elements">
|
||||
{AdminLinks.slice(0, 4).map((link) => {
|
||||
const isActive = link.url === pathname;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={link.url}
|
||||
className={`sidebar-nav_element group ${
|
||||
isActive ? "bg-white/5" : "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
<Link className="sidebar-link" href={link.url}>
|
||||
<link.icon />
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<ul className="sidebar-nav_elements">
|
||||
{AdminLinks.slice(4).map((link) => {
|
||||
const isActive = link.url === pathname;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={link.url}
|
||||
className={`sidebar-nav_element group ${
|
||||
isActive ? "bg-purple-gradient" : "text-gray-700"
|
||||
}`}
|
||||
>
|
||||
<Link className="sidebar-link" href={link.url}>
|
||||
<link.icon />
|
||||
{link.name}
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
|
|
@ -1,9 +1,8 @@
|
|||
import React from 'react'
|
||||
import React from "react";
|
||||
import Card from "../_components/Card";
|
||||
|
||||
const AdminPage = () => {
|
||||
return (
|
||||
<div>AdminPage</div>
|
||||
)
|
||||
}
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export default AdminPage
|
||||
export default AdminPage;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import MobileNav from "./_components/Mobilenav";
|
||||
import Sidebar from "./_components/Sidebar";
|
||||
|
||||
export default function PageLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<main className="flex flex-col min-h-screen">
|
||||
<div className="flex-grow flex-1">{children}</div>
|
||||
<main className="flex flex-col min-h-screen root">
|
||||
<Sidebar />
|
||||
<MobileNav />
|
||||
<div className="flex-grow flex-1 root-container">{children}</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,6 +99,54 @@ body {
|
|||
.flex-end {
|
||||
@apply flex justify-between items-end;
|
||||
}
|
||||
.root {
|
||||
@apply flex max-h-screen w-full flex-col lg:flex-row;
|
||||
}
|
||||
.root-container {
|
||||
@apply mt-16 flex-1 overflow-auto py-8 lg:mt-0 lg:max-h-screen lg:py-10;
|
||||
}
|
||||
|
||||
/* .gradient-text {
|
||||
@apply bg-purple-gradient bg-cover bg-clip-text text-transparent;
|
||||
} */
|
||||
.sheet-content button {
|
||||
@apply focus:ring-0 focus-visible:ring-transparent focus:ring-offset-0 focus-visible:ring-offset-0 focus-visible:outline-none focus-visible:border-none !important;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@apply hidden h-screen w-72 p-5 shadow-md shadow-purple-200/50 lg:flex;
|
||||
}
|
||||
.header {
|
||||
@apply flex-between fixed h-16 w-full border-b p-5 lg:hidden;
|
||||
}
|
||||
|
||||
.header-nav_elements {
|
||||
@apply mt-8 flex w-full flex-col items-start gap-5;
|
||||
}
|
||||
|
||||
/* Search Component */
|
||||
.search {
|
||||
@apply flex w-full rounded-[16px] border-2 border-purple-200/20 bg-white px-4 shadow-sm shadow-purple-200/15 md:max-w-96;
|
||||
}
|
||||
.sidebar-logo {
|
||||
@apply flex items-center gap-2 md:py-2;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
@apply h-full flex-col justify-between md:flex md:gap-4;
|
||||
}
|
||||
|
||||
.sidebar-nav_elements {
|
||||
@apply hidden w-full flex-col items-start gap-2 md:flex;
|
||||
}
|
||||
|
||||
.sidebar-nav_element {
|
||||
@apply flex-center p-medium-16 w-full whitespace-nowrap rounded-full bg-cover transition-all hover:bg-white/10 hover:shadow-inner;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
@apply flex p-medium-16 size-full gap-4 p-4;
|
||||
}
|
||||
|
||||
/* TYPOGRAPHY */
|
||||
/* 64 */
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { BadgeAlert, BarChart4, Cog, ShieldCheck } from "lucide-react";
|
||||
import { Download, Home, Settings, User } from "lucide-react";
|
||||
|
||||
export const NAVBAR = {
|
||||
centerLinks: [
|
||||
|
|
@ -145,6 +146,34 @@ export const FOOTERLINKS = {
|
|||
},
|
||||
};
|
||||
|
||||
export const AdminLinks = [
|
||||
{
|
||||
name: "Dashboard",
|
||||
url: "/admin",
|
||||
icon: Home,
|
||||
},
|
||||
{
|
||||
name: "Downloads",
|
||||
url: "/admin/downloads",
|
||||
icon: Download,
|
||||
},
|
||||
{
|
||||
name: "Mods",
|
||||
url: "/admin/mods",
|
||||
icon: User,
|
||||
},
|
||||
{
|
||||
name: "Logs",
|
||||
url: "/admin/changelogs",
|
||||
icon: Settings,
|
||||
},
|
||||
{
|
||||
name: "Back Home",
|
||||
url: "/",
|
||||
icon: Home,
|
||||
},
|
||||
];
|
||||
|
||||
export const TERMS_AND_CONDITIONS = `
|
||||
Last updated: 24.04.2024
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue