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

2
.gitignore vendored
View File

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

View File

@ -237,6 +237,40 @@
--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 {

View File

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

View File

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

View File

@ -42,14 +42,18 @@ export default function HamburgerMenu() {
<span className="inline-block font-urban text-xl font-bold">
{siteConfig.name}
</span>
</SheetTitle>
</SheetHeader>
</SheetTitle>
<Separator className="mb-2 mt-2" />
</SheetHeader>
{sideNavItems.map((group, i) => {
return (
<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}>
{group.items.map((link, idx) => {
return (
@ -64,7 +68,7 @@ export default function HamburgerMenu() {
</Fragment>
);
})}
<ScrollBar orientation="vertical"/>
<ScrollBar orientation="vertical" />
</ScrollArea>
</SheetContent>
</Sheet>

View File

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

View File

@ -9,7 +9,7 @@ export const TopNav = () => {
<nav className="flex h-[52px] items-center justify-between py-4 px-6 border-b">
<div>
<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}
</h1>
{/* {props.breadcrumbItems && (

View File

@ -30,7 +30,7 @@ import {
</div>
<div className="flex items-center space-x-6 lg:space-x-8">
<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
value={`${table.getState().pagination.pageSize}`}
onValueChange={(value) => {

View File

@ -22,7 +22,7 @@ export function DataTableToolbar<TData>({
return (
<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
placeholder="Search email..."
value={(table.getColumn("email")?.getFilterValue() as string) ?? ""}
@ -33,7 +33,9 @@ export function DataTableToolbar<TData>({
/>
<Input
placeholder="Search name..."
value={(table.getColumn("fullName")?.getFilterValue() as string) ?? ""}
value={
(table.getColumn("fullName")?.getFilterValue() as string) ?? ""
}
onChange={(event: any) =>
table.getColumn("fullName")?.setFilterValue(event.target.value)
}

View File

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