diff --git a/app/(authenticated)/(app)/DesktopSidebar.tsx b/app/(authenticated)/(app)/DesktopSidebar.tsx index f5291ab..a5efc75 100644 --- a/app/(authenticated)/(app)/DesktopSidebar.tsx +++ b/app/(authenticated)/(app)/DesktopSidebar.tsx @@ -1,7 +1,14 @@ import { Logo } from "@/components/logo"; import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; -import { BarChart, Database, FileKey, Filter, FormInput, Home } from "lucide-react"; +import { + BarChart, + Database, + FileKey, + Filter, + FormInput, + Home, +} from "lucide-react"; import { ChannelLink } from "./channelLink"; import { TeamSwitcher } from "./TeamSwitcher"; import Link from "next/link"; @@ -29,38 +36,64 @@ export const DesktopSidebar: React.FC<Props> = ({ navigation, channels }) => { </Link> <div className="space-y-4"> <div className="px-6 py-2"> - <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight">{/* Events */}</h2> + <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight"> + {/* Events */} + </h2> <div className="space-y-1"> <Link href="/overview"> - <Button variant="ghost" size="sm" className="justify-start w-full"> + <Button + variant="ghost" + size="sm" + className="justify-start w-full" + > <Home className="w-4 h-4 mr-2" /> Overview </Button> </Link> <Link href="/keys"> - <Button variant="ghost" size="sm" className="justify-start w-full"> + <Button + variant="ghost" + size="sm" + className="justify-start w-full" + > <FileKey className="w-4 h-4 mr-2" /> API Keys </Button> </Link> <Link href="/channels"> - <Button variant="ghost" size="sm" className="justify-start w-full"> + <Button + variant="ghost" + size="sm" + className="justify-start w-full" + > <Database className="w-4 h-4 mr-2" /> Channels </Button> </Link> - <Button variant="ghost" disabled size="sm" className="justify-start w-full"> + <Button + variant="ghost" + disabled + size="sm" + className="justify-start w-full" + > <Filter className="w-4 h-4 mr-2" /> Filter </Button> - <Button variant="ghost" disabled size="sm" className="justify-start w-full"> + <Button + variant="ghost" + disabled + size="sm" + className="justify-start w-full" + > <BarChart className="w-4 h-4 mr-2" /> Analytics </Button> </div> </div> <div className="py-2"> - <h2 className="relative px-8 text-lg font-semibold tracking-tight">Channels</h2> + <h2 className="relative px-8 text-lg font-semibold tracking-tight"> + Channels + </h2> <ScrollArea className="h-[230px] px-4"> <div className="p-2 space-y-1"> {channels diff --git a/app/(authenticated)/(app)/MobileSidebar.tsx b/app/(authenticated)/(app)/MobileSidebar.tsx index 980fa5d..1bb565a 100644 --- a/app/(authenticated)/(app)/MobileSidebar.tsx +++ b/app/(authenticated)/(app)/MobileSidebar.tsx @@ -49,38 +49,64 @@ export const MobileSidebar: React.FC<Props> = ({ channels }) => { </SheetHeader> <div className="space-y-4"> <div className="px-6 py-2"> - <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight">{/* Events */}</h2> + <h2 className="px-2 mb-2 text-lg font-semibold tracking-tight"> + {/* Events */} + </h2> <div className="space-y-1"> <Link href="/overview"> - <Button variant="ghost" size="sm" className="justify-start w-full"> + <Button + variant="ghost" + size="sm" + className="justify-start w-full" + > <Home className="w-4 h-4 mr-2" /> Overview </Button> </Link> <Link href="/keys"> - <Button variant="ghost" size="sm" className="justify-start w-full"> + <Button + variant="ghost" + size="sm" + className="justify-start w-full" + > <FileKey className="w-4 h-4 mr-2" /> API Keys </Button> </Link> <Link href="/channels"> - <Button variant="ghost" size="sm" className="justify-start w-full"> + <Button + variant="ghost" + size="sm" + className="justify-start w-full" + > <Database className="w-4 h-4 mr-2" /> Channels </Button> </Link> - <Button variant="ghost" disabled size="sm" className="justify-start w-full"> + <Button + variant="ghost" + disabled + size="sm" + className="justify-start w-full" + > <Filter className="w-4 h-4 mr-2" /> Filter </Button> - <Button variant="ghost" disabled size="sm" className="justify-start w-full"> + <Button + variant="ghost" + disabled + size="sm" + className="justify-start w-full" + > <BarChart className="w-4 h-4 mr-2" /> Analytics </Button> </div> </div> <div className="py-2"> - <h2 className="relative px-8 text-lg font-semibold tracking-tight">Events</h2> + <h2 className="relative px-8 text-lg font-semibold tracking-tight"> + Events + </h2> <ScrollArea className="h-[230px] px-4"> <div className="p-2 space-y-1"> {channels.map((channel) => ( diff --git a/app/(authenticated)/(app)/TeamSwitcher.tsx b/app/(authenticated)/(app)/TeamSwitcher.tsx index d37641c..e53c749 100644 --- a/app/(authenticated)/(app)/TeamSwitcher.tsx +++ b/app/(authenticated)/(app)/TeamSwitcher.tsx @@ -12,7 +12,12 @@ import { useRouter } from "next/navigation"; import { useState } from "react"; import { Loading } from "@/components/loading"; -import { useAuth, useOrganization, useOrganizationList, useUser } from "@clerk/clerk-react"; +import { + useAuth, + useOrganization, + useOrganizationList, + useUser, +} from "@clerk/clerk-react"; import { Avatar, AvatarImage } from "@/components/ui/avatar"; import { AvatarFallback } from "@radix-ui/react-avatar"; @@ -51,10 +56,15 @@ export const TeamSwitcher: React.FC<Props> = (): JSX.Element => { <div className="flex items-center justify-start w-full gap-4 "> <Avatar> {user?.profileImageUrl ? ( - <AvatarImage src={user.profileImageUrl} alt={user.username ?? "Profile picture"} /> + <AvatarImage + src={user.profileImageUrl} + alt={user.username ?? "Profile picture"} + /> ) : null} <AvatarFallback className="flex items-center justify-center w-8 h-8 overflow-hidden border rounded-md bg-zinc-100 border-zinc-500 text-zinc-700"> - {(currentOrg?.slug ?? user?.username ?? "").slice(0, 2).toUpperCase() ?? "P"} + {(currentOrg?.slug ?? user?.username ?? "") + .slice(0, 2) + .toUpperCase() ?? "P"} </AvatarFallback> </Avatar> <span>{currentOrg?.name ?? "Personal"}</span> diff --git a/app/(authenticated)/(app)/overview/page.tsx b/app/(authenticated)/(app)/overview/page.tsx index 483f394..3e6674b 100644 --- a/app/(authenticated)/(app)/overview/page.tsx +++ b/app/(authenticated)/(app)/overview/page.tsx @@ -1,20 +1,17 @@ - import { cn } from "@/lib/utils"; -export default async function Page(_props: { - params: { tenantSlug: string }; -}) { +export default async function Page(_props: { params: { tenantSlug: string } }) { const stats: { label: string; value: string; }[] = [ { label: "Total Channels", - value: '0', + value: "0", }, { label: "Total Events (7 days)", - value: '0', + value: "0", }, ]; return ( @@ -47,7 +44,7 @@ export default async function Page(_props: { "lg:grid-cols-2": stats.length === 2, "lg:grid-cols-3": stats.length === 3, "lg:grid-cols-4": stats.length >= 4, - }, + } )} > {" "} @@ -55,11 +52,17 @@ export default async function Page(_props: { <div key={stat.label} className={cn( - statIdx % 2 === 1 ? "sm:border-l" : statIdx === 2 ? "lg:border-l" : "", - "flex items-baseline flex-wrap justify-between gap-y-2 gap-x-4 border-t border-zinc-100/5 px-4 py-10 sm:px-6 lg:border-t-0 xl:px-8", + statIdx % 2 === 1 + ? "sm:border-l" + : statIdx === 2 + ? "lg:border-l" + : "", + "flex items-baseline flex-wrap justify-between gap-y-2 gap-x-4 border-t border-zinc-100/5 px-4 py-10 sm:px-6 lg:border-t-0 xl:px-8" )} > - <dt className="text-sm font-medium leading-6 text-zinc-500">{stat.label}</dt> + <dt className="text-sm font-medium leading-6 text-zinc-500"> + {stat.label} + </dt> {/* <dd className={cn( stat.changeType === 'negative' ? 'text-rose-600' : 'text-zinc-700', @@ -96,9 +99,7 @@ export default async function Page(_props: { <th>More details</th> </tr> </thead> - <tbody> - - </tbody> + <tbody></tbody> </table> </div> </div> diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx index d972fce..e6eed60 100644 --- a/app/(authenticated)/layout.tsx +++ b/app/(authenticated)/layout.tsx @@ -1,11 +1,12 @@ import { Particles } from "@/components/landing/particles"; -import { ClerkProvider, SignIn, SignedIn, SignedOut } from "@clerk/nextjs/app-beta"; +import { + ClerkProvider, + SignIn, + SignedIn, + SignedOut, +} from "@clerk/nextjs/app-beta"; -export default function AppLayout({ - children, -}: { - children: React.ReactNode; -}) { +export default function AppLayout({ children }: { children: React.ReactNode }) { return ( <ClerkProvider> <SignedIn>{children}</SignedIn> diff --git a/app/(landing)/layout.tsx b/app/(landing)/layout.tsx index b681a8a..614158d 100644 --- a/app/(landing)/layout.tsx +++ b/app/(landing)/layout.tsx @@ -42,7 +42,11 @@ export default function DefaultLayout({ className="text-gray-500 hover:text-gray-400" > <span className="sr-only">Github</span> - <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"> + <svg + className="w-6 h-6" + fill="currentColor" + viewBox="0 0 24 24" + > <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" diff --git a/app/layout.tsx b/app/layout.tsx index 4f018e2..ea03a49 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,4 @@ -import { Inter } from 'next/font/google'; +import { Inter } from "next/font/google"; import LocalFont from "next/font/local"; import { ThemeProvider } from "@/components/theme-provider"; @@ -13,7 +13,7 @@ export const metadata: Metadata = { template: "%s | Omnidash", }, description: "Open Source Multi-client Ticket Dashboard", - metadataBase: new URL('https://omnidash.io'), + metadataBase: new URL("https://omnidash.io"), openGraph: { title: "Omnidash", description: "Open Source Multi-client Ticket Dashboard", diff --git a/components/icons.tsx b/components/icons.tsx index b9dfbb2..a28a128 100644 --- a/components/icons.tsx +++ b/components/icons.tsx @@ -78,7 +78,10 @@ export const Icons = { ), radix: (props: LucideProps) => ( <svg viewBox="0 0 25 25" fill="none" {...props}> - <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z" fill="currentcolor" /> + <path + d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z" + fill="currentcolor" + /> <path d="M12 0H4V8H12V0Z" fill="currentcolor" /> <path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z" diff --git a/components/landing/cta.tsx b/components/landing/cta.tsx index a3614e7..c23b34f 100644 --- a/components/landing/cta.tsx +++ b/components/landing/cta.tsx @@ -29,7 +29,9 @@ export const Cta: React.FC = () => { <h2 className="pb-4 text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-200/60 via-zinc-200 to-zinc-200/60"> Simplify your workflows </h2> - <p className="mb-8 text-lg text-zinc-400">A consolidated ticket dashboard within 60 seconds.</p> + <p className="mb-8 text-lg text-zinc-400"> + A consolidated ticket dashboard within 60 seconds. + </p> <div> <Link className=" justify-center flex sm:inline-flex items-center whitespace-nowrap transition duration-150 ease-in-out font-medium rounded px-4 py-1.5 text-zinc-900 bg-gradient-to-r from-white/80 via-white to-white/80 hover:bg-white group" diff --git a/components/landing/features.tsx b/components/landing/features.tsx index 85d94a3..3c06cc3 100644 --- a/components/landing/features.tsx +++ b/components/landing/features.tsx @@ -7,22 +7,26 @@ export const Features: React.FC = () => { { icon: Unplug, name: "Effortless Consolidation", - description: "Consolidate all tickets from multiple platforms and clients effortlessly", + description: + "Consolidate all tickets from multiple platforms and clients effortlessly", }, { icon: Eye, name: "Unparalleled Visibility", - description: "Gain complete control and visibility over your ticketing operations", + description: + "Gain complete control and visibility over your ticketing operations", }, { icon: Compass, name: "Intuitive Navigation", - description: "Seamlessly navigate and find tickets with smart filters and advanced search", + description: + "Seamlessly navigate and find tickets with smart filters and advanced search", }, { icon: Zap, name: "Enhanced Efficiency", - description: "Maximize productivity and resource allocation in ticket management", + description: + "Maximize productivity and resource allocation in ticket management", }, ]; return ( @@ -62,7 +66,9 @@ export const Features: React.FC = () => { Reduce Context Switching </h3> <p className="mb-8 text-lg text-zinc-400"> - Empower your operations teams with by consolidating all ticket information in one place. Seamlessly filter, sort, and customize ticket views to meet their unique needs. + Empower your operations teams with by consolidating all ticket + information in one place. Seamlessly filter, sort, and + customize ticket views to meet their unique needs. </p> <dl className="max-w-xl grid grid-cols-1 gap-4 lg:max-w-none"> {features.map((feature) => ( diff --git a/components/landing/hero.tsx b/components/landing/hero.tsx index ac14a37..622ef58 100644 --- a/components/landing/hero.tsx +++ b/components/landing/hero.tsx @@ -32,9 +32,15 @@ export const Hero: React.FC = () => { className="pb-4 font-extrabold tracking-tight text-transparent text-6xl lg:text-8xl bg-clip-text bg-gradient-to-r from-zinc-200/60 via-zinc-200 to-zinc-200/60" data-aos="fade-down" > - <ReactWrapBalancer>One Dashboard, Countless Solutions</ReactWrapBalancer> + <ReactWrapBalancer> + One Dashboard, Countless Solutions + </ReactWrapBalancer> </h1> - <p className="mb-8 text-lg text-zinc-300" data-aos="fade-down" data-aos-delay="200"> + <p + className="mb-8 text-lg text-zinc-300" + data-aos="fade-down" + data-aos-delay="200" + > Tame ticket overload and keep your operation teams sane </p> <div diff --git a/components/landing/particles.tsx b/components/landing/particles.tsx index c18c3a6..9dbb50e 100644 --- a/components/landing/particles.tsx +++ b/components/landing/particles.tsx @@ -126,7 +126,18 @@ export const Particles: React.FC<ParticlesProps> = ({ const dx = (Math.random() - 0.5) * 0.2; const dy = (Math.random() - 0.5) * 0.2; const magnetism = 0.1 + Math.random() * 4; - return { x, y, translateX, translateY, size, alpha, targetAlpha, dx, dy, magnetism }; + return { + x, + y, + translateX, + translateY, + size, + alpha, + targetAlpha, + dx, + dy, + magnetism, + }; }; const rgb = hexToRgb(color); @@ -149,7 +160,12 @@ export const Particles: React.FC<ParticlesProps> = ({ const clearContext = () => { if (context.current) { - context.current.clearRect(0, 0, canvasSize.current.w, canvasSize.current.h); + context.current.clearRect( + 0, + 0, + canvasSize.current.w, + canvasSize.current.h + ); } }; @@ -167,9 +183,10 @@ export const Particles: React.FC<ParticlesProps> = ({ start1: number, end1: number, start2: number, - end2: number, + end2: number ): number => { - const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2; + const remapped = + ((value - start1) * (end2 - start2)) / (end1 - start1) + start2; return remapped > 0 ? remapped : 0; }; @@ -184,7 +201,9 @@ export const Particles: React.FC<ParticlesProps> = ({ canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge ]; const closestEdge = edge.reduce((a, b) => Math.min(a, b)); - const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2)); + const remapClosestEdge = parseFloat( + remapValue(closestEdge, 0, 20, 0, 1).toFixed(2) + ); if (remapClosestEdge > 1) { circle.alpha += 0.02; if (circle.alpha > circle.targetAlpha) { @@ -196,9 +215,11 @@ export const Particles: React.FC<ParticlesProps> = ({ circle.x += circle.dx + vx; circle.y += circle.dy + vy; circle.translateX += - (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) / ease; + (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) / + ease; circle.translateY += - (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) / ease; + (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) / + ease; // circle gets out of the canvas if ( circle.x < -circle.size || @@ -222,7 +243,7 @@ export const Particles: React.FC<ParticlesProps> = ({ translateY: circle.translateY, alpha: circle.alpha, }, - true, + true ); } }); diff --git a/components/landing/utils/mouse-position.tsx b/components/landing/utils/mouse-position.tsx index 0d54fc7..b3f827d 100644 --- a/components/landing/utils/mouse-position.tsx +++ b/components/landing/utils/mouse-position.tsx @@ -6,7 +6,10 @@ interface MousePosition { } export default function useMousePosition(): MousePosition { - const [mousePosition, setMousePosition] = useState<MousePosition>({ x: 0, y: 0 }); + const [mousePosition, setMousePosition] = useState<MousePosition>({ + x: 0, + y: 0, + }); useEffect(() => { const handleMouseMove = (event: MouseEvent) => { diff --git a/components/loading.tsx b/components/loading.tsx index 7e592a8..d86f385 100644 --- a/components/loading.tsx +++ b/components/loading.tsx @@ -14,13 +14,30 @@ export function Loading({ xmlns="http://www.w3.org/2000/svg" > <circle cx="4" cy="12" r="3"> - <animate id="a" begin="0;b.end-0.25s" attributeName="r" dur={dur} values="3;.2;3" /> + <animate + id="a" + begin="0;b.end-0.25s" + attributeName="r" + dur={dur} + values="3;.2;3" + /> </circle> <circle cx="12" cy="12" r="3"> - <animate begin="a.end-0.6s" attributeName="r" dur={dur} values="3;.2;3" /> + <animate + begin="a.end-0.6s" + attributeName="r" + dur={dur} + values="3;.2;3" + /> </circle> <circle cx="20" cy="12" r="3"> - <animate id="b" begin="a.end-0.45s" attributeName="r" dur={dur} values="3;.2;3" /> + <animate + id="b" + begin="a.end-0.45s" + attributeName="r" + dur={dur} + values="3;.2;3" + /> </circle> </svg> ); diff --git a/components/logo.tsx b/components/logo.tsx index 03b5d24..92162ee 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -13,13 +13,12 @@ export const Logo: React.FC<Props> = ({ className }) => { stroke="current" strokeWidth="2" strokeLinecap="round" - strokeLinejoin="round"> - <rect width="7" height="9" x="3" y="3" rx="1"/> - <rect width="7" height="5" x="14" y="3" rx="1"/> - <rect width="7" height="9" x="14" y="12" rx="1"/> - <rect width="7" height="5" x="3" y="16" rx="1"/> + strokeLinejoin="round" + > + <rect width="7" height="9" x="3" y="3" rx="1" /> + <rect width="7" height="5" x="14" y="3" rx="1" /> + <rect width="7" height="9" x="14" y="12" rx="1" /> + <rect width="7" height="5" x="3" y="16" rx="1" /> </svg> ); }; - - diff --git a/components/mobile-nav.tsx b/components/mobile-nav.tsx index 0883aaa..8000e78 100644 --- a/components/mobile-nav.tsx +++ b/components/mobile-nav.tsx @@ -26,7 +26,8 @@ export function MobileNav() { variant="ghost" className="-ml-4 text-base hover:bg-transparent focus:ring-0 focus:ring-offset-0 md:hidden" > - <Icons.logo className="w-4 h-4 mr-2" /> <span className="font-bold">Menu</span> + <Icons.logo className="w-4 h-4 mr-2" />{" "} + <span className="font-bold">Menu</span> </Button> </DropdownMenuTrigger> <DropdownMenuContent diff --git a/components/page-header.tsx b/components/page-header.tsx index 00859ac..1997a71 100644 --- a/components/page-header.tsx +++ b/components/page-header.tsx @@ -4,12 +4,18 @@ type Props = { actions?: React.ReactNode[]; }; -export const PageHeader: React.FC<Props> = ({ title, description, actions }) => { +export const PageHeader: React.FC<Props> = ({ + title, + description, + actions, +}) => { return ( <div className="flex items-center justify-between"> <div className="space-y-1"> <h2 className="text-2xl font-semibold tracking-tight">{title}</h2> - <p className="text-sm text-zinc-500 dark:text-zinc-400">{description}</p> + <p className="text-sm text-zinc-500 dark:text-zinc-400"> + {description} + </p> </div> <ul className="flex items-center justify-between gap-4"> {(actions ?? []).map((action, i) => ( diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx index 1d9ba9d..f5eba05 100644 --- a/components/ui/avatar.tsx +++ b/components/ui/avatar.tsx @@ -11,7 +11,10 @@ const Avatar = React.forwardRef< >(({ className, ...props }, ref) => ( <AvatarPrimitive.Root ref={ref} - className={cn("relative flex h-8 w-8 shrink-0 overflow-hidden rounded-md ", className)} + className={cn( + "relative flex h-8 w-8 shrink-0 overflow-hidden rounded-md ", + className + )} {...props} /> )); @@ -37,7 +40,7 @@ const AvatarFallback = React.forwardRef< ref={ref} className={cn( "flex h-full w-full items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-700", - className, + className )} {...props} /> diff --git a/components/ui/button.tsx b/components/ui/button.tsx index ba96182..aa257ef 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -8,11 +8,14 @@ const buttonVariants = cva( { variants: { variant: { - default: "bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900", - destructive: "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", + default: + "bg-zinc-900 text-white hover:bg-zinc-700 dark:bg-zinc-50 dark:text-zinc-900", + destructive: + "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600", outline: "bg-transparent border border-zinc-200 hover:bg-zinc-100 dark:border-zinc-700 dark:text-zinc-100", - subtle: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100", + subtle: + "bg-zinc-100 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-100", ghost: "bg-transparent hover:bg-zinc-100 dark:hover:bg-zinc-800 dark:text-zinc-100 dark:hover:text-zinc-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent", link: "bg-transparent dark:bg-transparent underline-offset-4 hover:underline text-zinc-900 dark:text-zinc-100 hover:bg-transparent dark:hover:bg-transparent", @@ -28,7 +31,7 @@ const buttonVariants = cva( variant: "default", size: "default", }, - }, + } ); export interface ButtonProps @@ -38,9 +41,13 @@ export interface ButtonProps const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({ className, variant, size, ...props }, ref) => { return ( - <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} /> + <button + className={cn(buttonVariants({ variant, size, className }))} + ref={ref} + {...props} + /> ); - }, + } ); Button.displayName = "Button"; diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx index 9622df7..a64c8a4 100644 --- a/components/ui/dropdown-menu.tsx +++ b/components/ui/dropdown-menu.tsx @@ -29,7 +29,7 @@ const DropdownMenuSubTrigger = React.forwardRef< className={cn( "flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-zinc-100 data-[state=open]:bg-zinc-100 dark:focus:bg-zinc-700 dark:data-[state=open]:bg-zinc-800", inset && "pl-8", - className, + className )} {...props} > @@ -37,7 +37,8 @@ const DropdownMenuSubTrigger = React.forwardRef< <ChevronRight className="w-4 h-4 ml-auto" /> </DropdownMenuPrimitive.SubTrigger> )); -DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName; const DropdownMenuSubContent = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, @@ -47,12 +48,13 @@ const DropdownMenuSubContent = React.forwardRef< ref={ref} className={cn( "animate-in slide-in-from-left-1 z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-100 bg-white p-1 text-zinc-700 shadow-md dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400", - className, + className )} {...props} /> )); -DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName; +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName; const DropdownMenuContent = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.Content>, @@ -64,7 +66,7 @@ const DropdownMenuContent = React.forwardRef< sideOffset={sideOffset} className={cn( "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-100 bg-white p-1 text-zinc-700 shadow-md dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400", - className, + className )} {...props} /> @@ -83,7 +85,7 @@ const DropdownMenuItem = React.forwardRef< className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm font-medium outline-none focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-700", inset && "pl-8", - className, + className )} {...props} /> @@ -98,7 +100,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-700", - className, + className )} checked={checked} {...props} @@ -111,7 +113,8 @@ const DropdownMenuCheckboxItem = React.forwardRef< {children} </DropdownMenuPrimitive.CheckboxItem> )); -DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName; +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName; const DropdownMenuRadioItem = React.forwardRef< React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, @@ -121,7 +124,7 @@ const DropdownMenuRadioItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm font-medium outline-none focus:bg-zinc-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-zinc-700", - className, + className )} {...props} > @@ -146,7 +149,7 @@ const DropdownMenuLabel = React.forwardRef< className={cn( "px-2 py-1.5 text-sm font-semibold text-zinc-900 dark:text-zinc-300", inset && "pl-8", - className, + className )} {...props} /> @@ -165,9 +168,15 @@ const DropdownMenuSeparator = React.forwardRef< )); DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; -const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => { +const DropdownMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes<HTMLSpanElement>) => { return ( - <span className={cn("ml-auto text-xs tracking-widest text-zinc-500", className)} {...props} /> + <span + className={cn("ml-auto text-xs tracking-widest text-zinc-500", className)} + {...props} + /> ); }; DropdownMenuShortcut.displayName = "DropdownMenuShortcut"; diff --git a/components/ui/input.tsx b/components/ui/input.tsx index 6b5a12b..dd70a79 100644 --- a/components/ui/input.tsx +++ b/components/ui/input.tsx @@ -4,18 +4,20 @@ import { cn } from "@/lib/utils"; export type InputProps = React.InputHTMLAttributes<HTMLInputElement>; -const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => { - return ( - <input - className={cn( - "flex h-10 w-full rounded-md border border-zinc-300 bg-transparent py-2 px-3 text-sm placeholder:text-zinc-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:text-zinc-50 focus:ring-zinc-200 dark:focus:ring-zinc-50/50", - className, - )} - ref={ref} - {...props} - /> - ); -}); +const Input = React.forwardRef<HTMLInputElement, InputProps>( + ({ className, ...props }, ref) => { + return ( + <input + className={cn( + "flex h-10 w-full rounded-md border border-zinc-300 bg-transparent py-2 px-3 text-sm placeholder:text-zinc-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:text-zinc-50 focus:ring-zinc-200 dark:focus:ring-zinc-50/50", + className + )} + ref={ref} + {...props} + /> + ); + } +); Input.displayName = "Input"; export { Input }; diff --git a/components/ui/label.tsx b/components/ui/label.tsx index d154952..c39d044 100644 --- a/components/ui/label.tsx +++ b/components/ui/label.tsx @@ -13,7 +13,7 @@ const Label = React.forwardRef< ref={ref} className={cn( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", - className, + className )} {...props} /> diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx index 135d2a6..524d139 100644 --- a/components/ui/scroll-area.tsx +++ b/components/ui/scroll-area.tsx @@ -32,9 +32,11 @@ const ScrollBar = React.forwardRef< orientation={orientation} className={cn( "flex touch-none select-none transition-colors", - orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", - orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]", - className, + orientation === "vertical" && + "h-full w-2.5 border-l border-l-transparent p-[1px]", + orientation === "horizontal" && + "h-2.5 border-t border-t-transparent p-[1px]", + className )} {...props} > diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx index 84fd0aa..791073b 100644 --- a/components/ui/sheet.tsx +++ b/components/ui/sheet.tsx @@ -27,7 +27,12 @@ interface SheetPortalProps extends SheetPrimitive.DialogPortalProps, VariantProps<typeof portalVariants> {} -const SheetPortal = ({ position, className, children, ...props }: SheetPortalProps) => ( +const SheetPortal = ({ + position, + className, + children, + ...props +}: SheetPortalProps) => ( <SheetPrimitive.Portal className={cn(className)} {...props}> <div className={portalVariants({ position })}>{children}</div> </SheetPrimitive.Portal> @@ -41,7 +46,7 @@ const SheetOverlay = React.forwardRef< <SheetPrimitive.Overlay className={cn( "data-[state=closed]:animate-out data-[state=open]:fade-in data-[state=closed]:fade-out fixed inset-0 z-50 bg-black/50 backdrop-blur-sm transition-all duration-100", - className, + className )} {...props} ref={ref} @@ -49,90 +54,93 @@ const SheetOverlay = React.forwardRef< )); SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; -const sheetVariants = cva("fixed z-50 scale-100 gap-4 bg-white p-6 opacity-100 dark:bg-zinc-900", { - variants: { - position: { - top: "animate-in slide-in-from-top w-full duration-300", - bottom: "animate-in slide-in-from-bottom w-full duration-300", - left: "animate-in slide-in-from-left h-full duration-300", - right: "animate-in slide-in-from-right h-full duration-300", +const sheetVariants = cva( + "fixed z-50 scale-100 gap-4 bg-white p-6 opacity-100 dark:bg-zinc-900", + { + variants: { + position: { + top: "animate-in slide-in-from-top w-full duration-300", + bottom: "animate-in slide-in-from-bottom w-full duration-300", + left: "animate-in slide-in-from-left h-full duration-300", + right: "animate-in slide-in-from-right h-full duration-300", + }, + size: { + content: "", + default: "", + sm: "", + lg: "", + xl: "", + full: "", + }, }, - size: { - content: "", - default: "", - sm: "", - lg: "", - xl: "", - full: "", - }, - }, - compoundVariants: [ - { - position: ["top", "bottom"], - size: "content", - class: "max-h-screen", - }, - { - position: ["top", "bottom"], + compoundVariants: [ + { + position: ["top", "bottom"], + size: "content", + class: "max-h-screen", + }, + { + position: ["top", "bottom"], + size: "default", + class: "h-1/3", + }, + { + position: ["top", "bottom"], + size: "sm", + class: "h-1/4", + }, + { + position: ["top", "bottom"], + size: "lg", + class: "h-1/2", + }, + { + position: ["top", "bottom"], + size: "xl", + class: "h-5/6", + }, + { + position: ["top", "bottom"], + size: "full", + class: "h-screen", + }, + { + position: ["right", "left"], + size: "content", + class: "max-w-screen", + }, + { + position: ["right", "left"], + size: "default", + class: "w-1/3", + }, + { + position: ["right", "left"], + size: "sm", + class: "w-1/4", + }, + { + position: ["right", "left"], + size: "lg", + class: "w-1/2", + }, + { + position: ["right", "left"], + size: "xl", + class: "w-5/6", + }, + { + position: ["right", "left"], + size: "full", + class: "w-screen", + }, + ], + defaultVariants: { + position: "right", size: "default", - class: "h-1/3", }, - { - position: ["top", "bottom"], - size: "sm", - class: "h-1/4", - }, - { - position: ["top", "bottom"], - size: "lg", - class: "h-1/2", - }, - { - position: ["top", "bottom"], - size: "xl", - class: "h-5/6", - }, - { - position: ["top", "bottom"], - size: "full", - class: "h-screen", - }, - { - position: ["right", "left"], - size: "content", - class: "max-w-screen", - }, - { - position: ["right", "left"], - size: "default", - class: "w-1/3", - }, - { - position: ["right", "left"], - size: "sm", - class: "w-1/4", - }, - { - position: ["right", "left"], - size: "lg", - class: "w-1/2", - }, - { - position: ["right", "left"], - size: "xl", - class: "w-5/6", - }, - { - position: ["right", "left"], - size: "full", - class: "w-screen", - }, - ], - defaultVariants: { - position: "right", - size: "default", - }, -}); + } +); export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, @@ -159,14 +167,29 @@ const SheetContent = React.forwardRef< )); SheetContent.displayName = SheetPrimitive.Content.displayName; -const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( - <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} /> +const SheetHeader = ({ + className, + ...props +}: React.HTMLAttributes<HTMLDivElement>) => ( + <div + className={cn( + "flex flex-col space-y-2 text-center sm:text-left", + className + )} + {...props} + /> ); SheetHeader.displayName = "SheetHeader"; -const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => ( +const SheetFooter = ({ + className, + ...props +}: React.HTMLAttributes<HTMLDivElement>) => ( <div - className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} + className={cn( + "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", + className + )} {...props} /> ); @@ -178,7 +201,11 @@ const SheetTitle = React.forwardRef< >(({ className, ...props }, ref) => ( <SheetPrimitive.Title ref={ref} - className={cn("text-lg font-semibold text-zinc-900", "dark:text-zinc-50", className)} + className={cn( + "text-lg font-semibold text-zinc-900", + "dark:text-zinc-50", + className + )} {...props} /> )); diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx index da16371..7c65514 100644 --- a/components/ui/toast.tsx +++ b/components/ui/toast.tsx @@ -15,7 +15,7 @@ const ToastViewport = React.forwardRef< ref={ref} className={cn( "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:bottom-0 sm:right-0 sm:flex-col md:max-w-[420px]", - className, + className )} {...props} /> @@ -27,19 +27,22 @@ const toastVariants = cva( { variants: { variant: { - default: "bg-white border-zinc-200 dark:bg-zinc-800 dark:border-zinc-700", - destructive: "group destructive bg-red-600 text-white border-red-600 dark:border-red-600", + default: + "bg-white border-zinc-200 dark:bg-zinc-800 dark:border-zinc-700", + destructive: + "group destructive bg-red-600 text-white border-red-600 dark:border-red-600", }, }, defaultVariants: { variant: "default", }, - }, + } ); const Toast = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Root>, - React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants> + React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & + VariantProps<typeof toastVariants> >(({ className, variant, ...props }, ref) => { return ( <ToastPrimitives.Root @@ -59,7 +62,7 @@ const ToastAction = React.forwardRef< ref={ref} className={cn( "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-zinc-200 bg-transparent px-3 text-sm font-medium transition-colors hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-100 group-[.destructive]:hover:border-zinc-50 group-[.destructive]:hover:bg-red-100 group-[.destructive]:hover:text-red-600 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:border-zinc-700 dark:text-zinc-100 dark:hover:bg-zinc-700 dark:hover:text-zinc-100 dark:focus:ring-zinc-400 dark:focus:ring-offset-zinc-900 dark:data-[state=open]:bg-zinc-800", - className, + className )} {...props} /> @@ -74,7 +77,7 @@ const ToastClose = React.forwardRef< ref={ref} className={cn( "absolute top-2 right-2 rounded-md p-1 text-zinc-500 opacity-0 transition-opacity hover:text-zinc-900 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:hover:text-zinc-50", - className, + className )} toast-close="" {...props} @@ -88,7 +91,11 @@ const ToastTitle = React.forwardRef< React.ElementRef<typeof ToastPrimitives.Title>, React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> >(({ className, ...props }, ref) => ( - <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} /> + <ToastPrimitives.Title + ref={ref} + className={cn("text-sm font-semibold", className)} + {...props} + /> )); ToastTitle.displayName = ToastPrimitives.Title.displayName; diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx index 4fa8b3b..370461c 100644 --- a/components/ui/toaster.tsx +++ b/components/ui/toaster.tsx @@ -21,7 +21,9 @@ export function Toaster() { <Toast key={id} {...props}> <div className="grid gap-1"> {title && <ToastTitle>{title}</ToastTitle>} - {description && <ToastDescription>{description}</ToastDescription>} + {description && ( + <ToastDescription>{description}</ToastDescription> + )} </div> {action} <ToastClose /> diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts index f57c910..3d69b48 100644 --- a/hooks/use-toast.ts +++ b/hooks/use-toast.ts @@ -80,7 +80,9 @@ export const reducer = (state: State, action: Action): State => { case "UPDATE_TOAST": return { ...state, - toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), + toasts: state.toasts.map((t) => + t.id === action.toast.id ? { ...t, ...action.toast } : t + ), }; case "DISMISS_TOAST": @@ -104,7 +106,7 @@ export const reducer = (state: State, action: Action): State => { ...t, open: false, } - : t, + : t ), }; case "REMOVE_TOAST":