mehedi
/
skilld-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added some themes

This commit is contained in:
mehedi-hasan 2024-04-12 23:33:15 +06:00
parent ae26962fd4
commit 08c9073d28
10 changed files with 94 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -34,3 +34,5 @@ yarn-error.log*
# typescript # typescript
*.tsbuildinfo *.tsbuildinfo
next-env.d.ts next-env.d.ts
.vercel

34
src/app/globals.css
View File

@ -237,6 +237,40 @@
--ring: 244 52% 79%; --ring: 244 52% 79%;
} }
.bright-turquoise {
/* CSS: .bg-gradient { background: var(--gradient) } */
--gradient: #00dbde;
--background: 192 65% 3.52%;
--foreground: 192 10% 97.2%;
--muted: 192 50% 13.2%;
--muted-foreground: 192 10% 54.4%;
--popover: 192 45% 5.72%;
--popover-foreground: 192 10% 97.2%;
--card: 192 45% 5.72%;
--card-foreground: 192 10% 97.2%;
--border: 192 50% 13.2%;
--input: 192 50% 13.2%;
--primary: 192 100% 44%;
--primary-foreground: 192 10% 97.2%;
--secondary: 192 50% 13.2%;
--secondary-foreground: 192 10% 97.2%;
--accent: 192 50% 13.2%;
--accent-foreground: 192 10% 97.2%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 192 10% 97.2%;
--ring: 192 100% 44%;
}
} }
@layer base { @layer base {

5
src/app/layout.tsx
View File

@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider"; import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/toaster"; import { Toaster } from "@/components/ui/toaster";
import { cn } from "@/lib/utils";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -18,7 +19,7 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={cn(inter.className, "overflow-x-hidden")}>
<ThemeProvider <ThemeProvider
attribute="class" attribute="class"
defaultTheme="foo2" defaultTheme="foo2"
@ -26,7 +27,7 @@ export default function RootLayout({
disableTransitionOnChange disableTransitionOnChange
> >
{children} {children}
<Toaster/> <Toaster />
</ThemeProvider> </ThemeProvider>
</body> </body>
</html> </html>

9
src/components/dashboard.tsx
View File

@ -1,7 +1,6 @@
"use client"; "use client";
import * as React from "react"; import * as React from "react";
import { HelpCircle, Settings } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { import {
@ -9,13 +8,9 @@ import {
ResizablePanel, ResizablePanel,
ResizablePanelGroup, ResizablePanelGroup,
} from "@/components/ui/resizable"; } from "@/components/ui/resizable";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import { SidebarNav } from "./sidebar-nav"; import { SidebarNav } from "./sidebar-nav";
import { TopNav } from "./top-nav";
import { docsConfig, topNavItems } from "@/config";
import { DocsSidebarNav } from "./docs-sidebar-nav";
// import { AddButton } from "@/components/buttons/AddButton"; // import { AddButton } from "@/components/buttons/AddButton";
// import { AddAssetFlow } from "@/components/modals/add-asset-flow"; // import { AddAssetFlow } from "@/components/modals/add-asset-flow";
// import { WorkspaceSwitcher } from "@/app/(dashboard)/_components/workspace-switcher"; // import { WorkspaceSwitcher } from "@/app/(dashboard)/_components/workspace-switcher";
@ -79,7 +74,7 @@ export function Dashboard({
<SidebarNav isCollapsed={isCollapsed} /> <SidebarNav isCollapsed={isCollapsed} />
{/* <DocsSidebarNav items={docsConfig.sidebarNav} /> */} {/* <DocsSidebarNav items={docsConfig.sidebarNav} /> */}
</ResizablePanel> </ResizablePanel>
<ResizableHandle withHandle /> <ResizableHandle withHandle className="hidden lg:flex" />
<ResizablePanel defaultSize={defaultLayout[1]} minSize={30}> <ResizablePanel defaultSize={defaultLayout[1]} minSize={30}>
{/* <TopNav navItems={topNavItems}/> */} {/* <TopNav navItems={topNavItems}/> */}
{children} {children}

60
src/components/hamburger-menu.tsx
View File

@ -35,36 +35,40 @@ export default function HamburgerMenu() {
<AlignJustify /> <AlignJustify />
</SheetTrigger> </SheetTrigger>
<SheetContent side={"left"} className="p-0"> <SheetContent side={"left"} className="p-0">
<ScrollArea className="h-screen border p-4"> <ScrollArea className="h-screen border p-4">
<SheetHeader> <SheetHeader>
<SheetTitle className="flex items-center space-x-2"> <SheetTitle className="flex items-center space-x-2">
<Icons.logo /> <Icons.logo />
<span className="inline-block font-urban text-xl font-bold"> <span className="inline-block font-urban text-xl font-bold">
{siteConfig.name} {siteConfig.name}
</span> </span>
</SheetTitle>
</SheetHeader>
</SheetTitle>
<Separator className="mb-2 mt-2" />
</SheetHeader>
{sideNavItems.map((group, i) => { {sideNavItems.map((group, i) => {
return ( return (
<Fragment key={i}> <Fragment key={i}>
<Separator className="mb-2 mt-2" /> {/* <Separator className="mb-2 mt-2" /> */}
<div className="flex flex-col gap-1 p-2" key={group.group}> <h4 className="rounded-md px-2 mt-2 text-sm font-semibold">
{group.items.map((link, idx) => { {group.group}
return ( </h4>
<ExpandedItem <div className="flex flex-col gap-1 p-2" key={group.group}>
key={link.href + idx} {group.items.map((link, idx) => {
item={link} return (
currentPath={"/" + currentPath} <ExpandedItem
/> key={link.href + idx}
); item={link}
})} currentPath={"/" + currentPath}
</div> />
</Fragment> );
); })}
})} </div>
<ScrollBar orientation="vertical"/> </Fragment>
);
})}
<ScrollBar orientation="vertical" />
</ScrollArea> </ScrollArea>
</SheetContent> </SheetContent>
</Sheet> </Sheet>

7
src/components/theme-toggle.tsx
View File

@ -55,6 +55,13 @@ export function ThemeToggle() {
> >
Light Violet Light Violet
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem
onClick={() => {
document.documentElement.setAttribute("class", "bright-turquoise");
}}
>
Bright Turquoise
</DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => { onClick={() => {
document.documentElement.setAttribute("class", "violett"); document.documentElement.setAttribute("class", "violett");

2
src/components/top-nav.tsx
View File

@ -9,7 +9,7 @@ export const TopNav = () => {
<nav className="flex h-[52px] items-center justify-between py-4 px-6 border-b"> <nav className="flex h-[52px] items-center justify-between py-4 px-6 border-b">
<div> <div>
<HamburgerMenu /> <HamburgerMenu />
<h1 className="font-cal hidden text-xl font-semibold capitalize leading-none md:inline ml-4"> <h1 className="font-cal hidden text-xl font-semibold capitalize leading-none lg:inline ml-4">
{siteConfig.name} {siteConfig.name}
</h1> </h1>
{/* {props.breadcrumbItems && ( {/* {props.breadcrumbItems && (

2
src/components/users/users-table/data-table-pagination.tsx
View File

@ -30,7 +30,7 @@ import {
</div> </div>
<div className="flex items-center space-x-6 lg:space-x-8"> <div className="flex items-center space-x-6 lg:space-x-8">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<p className="text-sm font-medium">Rows per page</p> <p className="text-sm font-medium hidden md:block">Rows per page</p>
<Select <Select
value={`${table.getState().pagination.pageSize}`} value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => { onValueChange={(value) => {

10
src/components/users/users-table/data-table-toolbar.tsx
View File

@ -22,7 +22,7 @@ export function DataTableToolbar<TData>({
return ( return (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex flex-1 items-center space-x-2"> <div className="flex flex-1 items-center gap-2 flex-wrap">
<Input <Input
placeholder="Search email..." placeholder="Search email..."
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""} value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
@ -33,20 +33,22 @@ export function DataTableToolbar<TData>({
/> />
<Input <Input
placeholder="Search name..." placeholder="Search name..."
value={(table.getColumn("fullName")?.getFilterValue() as string) ?? ""} value={
(table.getColumn("fullName")?.getFilterValue() as string) ?? ""
}
onChange={(event: any) => onChange={(event: any) =>
table.getColumn("fullName")?.setFilterValue(event.target.value) table.getColumn("fullName")?.setFilterValue(event.target.value)
} }
className="h-8 w-[150px] lg:w-[250px]" className="h-8 w-[150px] lg:w-[250px]"
/> />
{table.getColumn("role") && ( {table.getColumn("role") && (
<DataTableFacetedFilter <DataTableFacetedFilter
column={table.getColumn("role")} column={table.getColumn("role")}
title="Role" title="Role"
options={userFilterLabels} options={userFilterLabels}
/> />
)} )}
{/* {/*
{table.getColumn("pricing_model") && ( {table.getColumn("pricing_model") && (
<DataTableFacetedFilter <DataTableFacetedFilter
column={table.getColumn("pricing_model")} column={table.getColumn("pricing_model")}

5
src/components/users/users-table/tools-table.tsx
View File

@ -17,7 +17,10 @@ const ToolsTable = ({ users }: { users: User[] }) => {
<Heading title={`Users (${users.length})`} description="Manage Users" /> <Heading title={`Users (${users.length})`} description="Manage Users" />
<Link <Link
href="#" href="#"
className={buttonVariants({ variant: "default" })} className={buttonVariants({
variant: "default",
// size: "sm",
})}
// className="text-xs md:text-sm" // className="text-xs md:text-sm"
// onClick={() => router.push(`/admin-dashboard/tools/add`)} // onClick={() => router.push(`/admin-dashboard/tools/add`)}
> >