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 {

3
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"

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}

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

@ -42,14 +42,18 @@ export default function HamburgerMenu() {
<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" /> */}
<h4 className="rounded-md px-2 mt-2 text-sm font-semibold">
{group.group}
</h4>
<div className="flex flex-col gap-1 p-2" key={group.group}> <div className="flex flex-col gap-1 p-2" key={group.group}>
{group.items.map((link, idx) => { {group.items.map((link, idx) => {
return ( return (

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) => {

6
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,7 +33,9 @@ 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)
} }

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