gib/Tech_Tracker_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make everything pretty & try to fix authentik

Browse Source
This commit is contained in:
Gabriel Brown
2025-01-15 20:07:04 -06:00
parent 7d637b7401
commit ed4d51400c
61 changed files with 3110 additions and 3375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/auth/client/Sign_Out.tsx
View File

@ -1,6 +1,6 @@
import { signOut } from "next-auth/react";
import { useSession } from "next-auth/react";
import Image from "next/image";
import { signOut } from 'next-auth/react';
import { useSession } from 'next-auth/react';
import Image from 'next/image';
import {
DropdownMenu,
DropdownMenuContent,
@ -8,33 +8,35 @@ import {
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "~/components/ui/shadcn/dropdown-menu";
} from '~/components/ui/shadcn/dropdown-menu';
export default function Sign_Out() {
const { data: session } = useSession();
if (!session) {
return <div/>;
return <div />;
} else {
const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
const name = session?.user?.name ? session.user.name : "Profile";
const pfp = session?.user?.image
? session.user.image
: '/images/default_user_pfp.png';
const name = session?.user?.name ? session.user.name : 'Profile';
return (
<div className="m-auto mt-1">
<div className='m-auto mt-1'>
<DropdownMenu>
<DropdownMenuTrigger>
<Image src={pfp} alt="" width={35} height={35}
className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
max-w-[25px] md:max-w-[35px]"
<Image
src={pfp}
alt=''
width={35}
height={35}
className='rounded-full border-2 border-white m-auto mr-1 md:mr-2
max-w-[25px] md:max-w-[35px]'
/>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>
{name}
</DropdownMenuLabel>
<DropdownMenuLabel>{name}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>
<button onClick={() => signOut()}
className="w-full"
>
<button onClick={() => signOut()} className='w-full'>
Sign Out
</button>
</DropdownMenuItem>
@ -43,4 +45,4 @@ export default function Sign_Out() {
</div>
);
}
};
}

12
src/components/auth/client/authentik/Sign_In.tsx
View File

@ -1,15 +1,15 @@
import { signIn } from "next-auth/react";
import { Button } from "~/components/ui/shadcn/button";
import { signIn } from 'next-auth/react';
import { Button } from '~/components/ui/shadcn/button';
export default function Sign_In_Authentik() {
return (
<Button
onClick={() => signIn('authentik')}
className="bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl
className='bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl
px-4 py-2 md:py-2.5 font-semibold text-white hover:bg-gradient-to-tr
hover:from-[#35363F] hover:to-[#23242F]"
hover:from-[#35363F] hover:to-[#23242F]'
>
<h1 className="md:text-2xl my-auto font-semibold">Sign In</h1>
<h1 className='md:text-2xl my-auto font-semibold'>Sign In</h1>
</Button>
);
};
}

12
src/components/auth/client/microsoft/Sign_In.tsx
View File

@ -1,15 +1,15 @@
import { signIn } from "next-auth/react";
import { Button } from "~/components/ui/shadcn/button";
import { signIn } from 'next-auth/react';
import { Button } from '~/components/ui/shadcn/button';
export default function Sign_In_Microsoft() {
return (
<Button
onClick={() => signIn('microsoft-entra-id')}
className="bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl
className='bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl
px-4 py-2 md:py-2.5 font-semibold text-white hover:bg-gradient-to-tr
hover:from-[#35363F] hover:to-[#23242F]"
hover:from-[#35363F] hover:to-[#23242F]'
>
<h1 className="md:text-2xl my-auto font-semibold">Sign In</h1>
<h1 className='md:text-2xl my-auto font-semibold'>Sign In</h1>
</Button>
);
};
}

42
src/components/auth/server/Sign_Out.tsx
View File

@ -1,31 +1,41 @@
import Image from "next/image";
import { auth } from "~/auth"
import { signOut } from "~/auth"
import Image from 'next/image';
import { auth } from '~/auth';
import { signOut } from '~/auth';
export default async function Sign_Out() {
const session = await auth();
if (!session) {
return (<div/>);
return <div />;
} else {
// Add User profile picture next to Sign Out button
const pfp = session?.user?.image ? session.user.image : "/images/default_user_pfp.png";
const pfp = session?.user?.image
? session.user.image
: '/images/default_user_pfp.png';
return (
<form className="flex flex-row"
<form
className='flex flex-row'
action={async () => {
"use server"
await signOut()
}}>
<Image src={pfp} alt="" width={35} height={35}
className="rounded-full border-2 border-white m-auto mr-1 md:mr-2
max-w-[25px] md:max-w-[35px]"
'use server';
await signOut();
}}
>
<Image
src={pfp}
alt=''
width={35}
height={35}
className='rounded-full border-2 border-white m-auto mr-1 md:mr-2
max-w-[25px] md:max-w-[35px]'
/>
<button type="submit" className="w-full p-2 rounded-xl text-sm md:text-lg
<button
type='submit'
className='w-full p-2 rounded-xl text-sm md:text-lg
bg-gradient-to-tl from-[#35363F] to=[#24191A]
hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]"
hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]'
>
Sign Out
</button>
</form>
);
}
};
}

38
src/components/auth/server/authentik/Sign_In.tsx
View File

@ -1,21 +1,33 @@
import Image from "next/image";
import { signIn } from "~/auth";
import Image from 'next/image';
import { signIn } from '~/auth';
export default async function Sign_In_Authentik() {
const Sign_In_Authentik = () => {
return (
<form className="items-center justify-center mx-auto"
<form
className='items-center justify-center mx-auto'
action={async () => {
"use server";
await signIn("authentik");
}}>
<button type="submit" className="flex flex-row mx-auto
'use server';
await signIn('authentik');
}}
>
<button
type='submit'
className='flex flex-row mx-auto
bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl px-4 py-2 md:py-2.5
font-semibold text-white hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]">
<Image src="/images/microsoft_logo.png" alt="Microsoft" width={35} height={35}
className="mr-2"
font-semibold text-white hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]'
>
<Image
src='/images/microsoft_logo.png'
alt='Microsoft'
width={35}
height={35}
className='mr-2'
/>
<h1 className="md:text-2xl my-auto font-semibold">Sign In with Authentik</h1>
<h1 className='md:text-2xl my-auto font-semibold'>
Sign In with Authentik
</h1>
</button>
</form>
);
}
};
export default Sign_In_Authentik;

31
src/components/auth/server/microsoft/Sign_In.tsx
View File

@ -1,20 +1,29 @@
import Image from "next/image";
import { signIn } from "~/auth";
import Image from 'next/image';
import { signIn } from '~/auth';
export default async function Sign_In_Microsoft() {
return (
<form className="items-center justify-center mx-auto"
<form
className='items-center justify-center mx-auto'
action={async () => {
"use server";
await signIn("microsoft-entra-id");
}}>
<button type="submit" className="flex flex-row mx-auto
'use server';
await signIn('microsoft-entra-id');
}}
>
<button
type='submit'
className='flex flex-row mx-auto
bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl px-4 py-2 md:py-2.5
font-semibold text-white hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]">
<Image src="/images/microsoft_logo.png" alt="Microsoft" width={35} height={35}
className="mr-2"
font-semibold text-white hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]'
>
<Image
src='/images/microsoft_logo.png'
alt='Microsoft'
width={35}
height={35}
className='mr-2'
/>
<h1 className="md:text-2xl my-auto font-semibold">Sign In</h1>
<h1 className='md:text-2xl my-auto font-semibold'>Sign In</h1>
</button>
</form>
);

4
src/components/context/TVModeContext.tsx
View File

@ -1,4 +1,4 @@
"use client";
'use client';
import React, { createContext, useContext, useState } from 'react';
import type { ReactNode } from 'react';
@ -11,7 +11,7 @@ const TVModeContext = createContext<TVModeContextProps | undefined>(undefined);
export const TVModeProvider = ({ children }: { children: ReactNode }) => {
const [tvMode, setTVMode] = useState(false);
const toggleTVMode = () => {
setTVMode((prev) => !prev);
};

49
src/components/ui/Header.tsx
View File

@ -1,41 +1,48 @@
"use client";
import Image from "next/image";
import Sign_Out from "~/components/auth/client/Sign_Out";
import TV_Toggle from "~/components/ui/TV_Toggle";
import { useTVMode } from "~/components/context/TVModeContext";
'use client';
import Image from 'next/image';
import Sign_Out from '~/components/auth/client/Sign_Out';
import TV_Toggle from '~/components/ui/TV_Toggle';
import { useTVMode } from '~/components/context/TVModeContext';
export default function Header() {
const { tvMode } = useTVMode();
if (tvMode) {
return (
<div className="absolute top-4 right-2">
<div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4">
< TV_Toggle />
<div className='absolute top-4 right-2'>
<div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4'>
<TV_Toggle />
</div>
</div>
);
} else {
return (
<header className="w-full py-2 pt-6 md:py-5">
<div className="absolute top-4 right-6">
<div className="flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8">
< TV_Toggle />
< Sign_Out />
<header className='w-full py-2 pt-6 md:py-5'>
<div className='absolute top-4 right-6'>
<div className='flex flex-row my-auto items-center pt-2 pr-0 md:pt-4 md:pr-8'>
<TV_Toggle />
<Sign_Out />
</div>
</div>
<div className="flex flex-row items-center text-center
sm:justify-center ml-4 sm:ml-0 p-4">
<Image src="/images/tech_tracker_logo.png"
alt="Tech Tracker Logo" width={100} height={100}
className="max-w-[40px] md:max-w-[120px]"
<div
className='flex flex-row items-center text-center
sm:justify-center ml-4 sm:ml-0 p-4'
>
<Image
src='/images/tech_tracker_logo.png'
alt='Tech Tracker Logo'
width={100}
height={100}
className='max-w-[40px] md:max-w-[120px]'
/>
<h1 className="title-text text-sm md:text-4xl lg:text-8xl
<h1
className='title-text text-sm md:text-4xl lg:text-8xl
bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7]
font-bold pl-2 md:pl-12 text-transparent bg-clip-text">
font-bold pl-2 md:pl-12 text-transparent bg-clip-text'
>
Tech Tracker
</h1>
</div>
</header>
);
}
};
}

106
src/components/ui/History_Drawer.tsx
View File

@ -1,13 +1,13 @@
import React, { useState, useEffect } from "react";
import Image from "next/image";
import { ScrollArea } from "~/components/ui/shadcn/scroll-area";
import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import { ScrollArea } from '~/components/ui/shadcn/scroll-area';
import {
DrawerClose,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerTitle,
} from "~/components/ui/shadcn/drawer";
} from '~/components/ui/shadcn/drawer';
import {
Table,
TableBody,
@ -15,7 +15,7 @@ import {
TableHead,
TableHeader,
TableRow,
} from "~/components/ui/shadcn/table";
} from '~/components/ui/shadcn/table';
import {
Pagination,
PaginationContent,
@ -23,7 +23,7 @@ import {
PaginationItem,
PaginationNext,
PaginationPrevious,
} from "~/components/ui/shadcn/pagination";
} from '~/components/ui/shadcn/pagination';
// Type definitions for Paginated History API
type HistoryEntry = {
@ -38,7 +38,7 @@ type PaginatedHistory = {
per_page: number;
total_pages: number;
total_count: number;
}
};
};
type History_Drawer_Props = {
user_id: number;
@ -52,9 +52,12 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
const fetchHistory = async (currentPage: number, user_id: number) => {
try {
const response = await fetch(`/api/get_paginated_history?user_id=${user_id}&page=${currentPage}&per_page=${perPage}`);
const response = await fetch(
`/api/get_paginated_history?user_id=${user_id}&page=${currentPage}&per_page=${perPage}`,
);
if (!response.ok) throw new Error('Failed to fetch history');
const data: PaginatedHistory = await response.json() as PaginatedHistory;
const data: PaginatedHistory =
(await response.json()) as PaginatedHistory;
setHistory(data.data);
setTotalPages(data.meta.total_pages);
} catch (error) {
@ -76,29 +79,47 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
<DrawerContent>
<DrawerHeader>
<DrawerTitle>
<div className="flex flex-row items-center text-center sm:justify-center sm:ml-0 py-4">
<Image src="/images/tech_tracker_logo.png" alt="Tech Tracker Logo" width={60} height={60} className="max-w-[40px] md:max-w-[120px]" />
<h1 className="title-text text-sm md:text-2xl lg:text-6xl bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7] font-bold pl-2 md:pl-4 text-transparent bg-clip-text">
<div className='flex flex-row items-center text-center sm:justify-center sm:ml-0 py-4'>
<Image
src='/images/tech_tracker_logo.png'
alt='Tech Tracker Logo'
width={60}
height={60}
className='max-w-[40px] md:max-w-[120px]'
/>
<h1 className='title-text text-sm md:text-2xl lg:text-6xl bg-gradient-to-r from-[#bec8e6] via-[#F0EEE4] to-[#FFF8E7] font-bold pl-2 md:pl-4 text-transparent bg-clip-text'>
History
</h1>
</div>
</DrawerTitle>
</DrawerHeader>
<ScrollArea className="w-full sm:w-5/6 lg:w-5/12 m-auto h-80">
<Table className="w-full m-auto">
<ScrollArea className='w-full sm:w-5/6 lg:w-5/12 m-auto h-80'>
<Table className='w-full m-auto'>
<TableHeader>
<TableRow>
<TableHead className="font-semibold lg:max-w-[100px]">Name</TableHead>
<TableHead className="font-semibold lg:max-w-[100px]">Status</TableHead>
<TableHead className="font-semibold lg:max-w-[100px] justify-end items-end text-right">Updated At</TableHead>
<TableHead className='font-semibold lg:max-w-[100px]'>
Name
</TableHead>
<TableHead className='font-semibold lg:max-w-[100px]'>
Status
</TableHead>
<TableHead className='font-semibold lg:max-w-[100px] justify-end items-end text-right'>
Updated At
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{history.map((entry, index) => (
<TableRow key={index}>
<TableCell className="font-medium lg:max-w-[100px]">{entry.name}</TableCell>
<TableCell className="font-medium lg:max-w-[100px] wrapword">{entry.status}</TableCell>
<TableCell className="font-medium lg:max-w-[100px] justify-end items-end text-right">{new Date(entry.updatedAt).toLocaleString()}</TableCell>
<TableCell className='font-medium lg:max-w-[100px]'>
{entry.name}
</TableCell>
<TableCell className='font-medium lg:max-w-[100px] wrapword'>
{entry.status}
</TableCell>
<TableCell className='font-medium lg:max-w-[100px] justify-end items-end text-right'>
{new Date(entry.updatedAt).toLocaleString()}
</TableCell>
</TableRow>
))}
</TableBody>
@ -110,7 +131,7 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
{page > 1 && (
<PaginationItem>
<PaginationPrevious
href="#"
href='#'
onClick={(e) => {
e.preventDefault();
handlePageChange(page - 1);
@ -119,33 +140,31 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
</PaginationItem>
)}
{totalPages > 10 && (
<h3 className="text-center flex flex-row">
Page
<h3 className="font-bold mx-1">
{page}
</h3>
<h3 className='text-center flex flex-row'>
Page
<h3 className='font-bold mx-1'>{page}</h3>
of
<h3 className="font-semibold ml-1">
{totalPages}
</h3>
<h3 className='font-semibold ml-1'>{totalPages}</h3>
</h3>
)}
{totalPages <= 10 && Array.from({ length: totalPages }).map((_, idx) => (
<PaginationItem key={idx}>
<PaginationLink
href="#"
onClick={(e) => {
e.preventDefault();
handlePageChange(idx + 1);
}}
>{idx + 1}
</PaginationLink>
</PaginationItem>
))}
{totalPages <= 10 &&
Array.from({ length: totalPages }).map((_, idx) => (
<PaginationItem key={idx}>
<PaginationLink
href='#'
onClick={(e) => {
e.preventDefault();
handlePageChange(idx + 1);
}}
>
{idx + 1}
</PaginationLink>
</PaginationItem>
))}
{page < totalPages && (
<PaginationItem>
<PaginationNext
href="#"
href='#'
onClick={(e) => {
e.preventDefault();
handlePageChange(page + 1);
@ -155,8 +174,7 @@ const History_Drawer: React.FC<History_Drawer_Props> = ({ user_id }) => {
)}
</PaginationContent>
</Pagination>
<DrawerClose>
</DrawerClose>
<DrawerClose></DrawerClose>
</DrawerFooter>
</DrawerContent>
);

47
src/components/ui/Loading.tsx
View File

@ -1,30 +1,29 @@
"use client"
import * as React from "react"
import { Progress } from "~/components/ui/shadcn/progress"
'use client';
import * as React from 'react';
import { Progress } from '~/components/ui/shadcn/progress';
interface Loading_Props {
interval_amount: number
interval_amount: number;
}
const Loading: React.FC<Loading_Props> = ({interval_amount}) => {
const Loading: React.FC<Loading_Props> = ({ interval_amount }) => {
const [progress, setProgress] = React.useState(13);
React.useEffect(() => {
const interval = setInterval(() => {
setProgress((prev) => {
if (prev >= 100) {
clearInterval(interval);
return 0;
}
return prev + interval_amount;
});
}, 50);
return () => clearInterval(interval);
})
return (
<div className="items-center justify-center w-1/3 m-auto pt-20">
<Progress value={progress} />
</div>
);
}
React.useEffect(() => {
const interval = setInterval(() => {
setProgress((prev) => {
if (prev >= 100) {
clearInterval(interval);
return 0;
}
return prev + interval_amount;
});
}, 50);
return () => clearInterval(interval);
});
return (
<div className='items-center justify-center w-1/3 m-auto pt-20'>
<Progress value={progress} />
</div>
);
};
export default Loading;

55
src/components/ui/No_Session.tsx
View File

@ -1,35 +1,42 @@
import Link from "next/link";
import Image from "next/image";
import Sign_In_Microsoft from "~/components/auth/server/microsoft/Sign_In";
import Sign_In_Authentik from "~/components/auth/server/authentik/Sign_In";
import Header from "~/components/ui/Header";
import Link from 'next/link';
import Image from 'next/image';
import Sign_In_Microsoft from '~/components/auth/server/microsoft/Sign_In';
import Sign_In_Authentik from '~/components/auth/server/authentik/Sign_In';
import Header from '~/components/ui/Header';
export default function No_Session() {
return (
<main className="w-full min-h-screen mx-auto text-center pt-2 md:pt-10
bg-gradient-to-b from-[#111111] to-[#212325]">
<div className="md:w-2/3 pt-4 pb-2 md:pt-10 md:pb-4 m-auto">
< Header />
<main
className='w-full min-h-screen mx-auto text-center pt-2 md:pt-10
bg-gradient-to-b from-[#111111] to-[#212325]'
>
<div className='md:w-2/3 pt-4 pb-2 md:pt-10 md:pb-4 m-auto'>
<Header />
</div>
<div className="mx-auto flex flex-col">
<div className="py-4">
< Sign_In_Microsoft />
<div className='mx-auto flex flex-col'>
<div className='py-4'>
<Sign_In_Microsoft />
</div>
<div className="py-4">
< Sign_In_Authentik />
<div className='py-4'>
<Sign_In_Authentik />
</div>
<Link href="https://git.gibbyb.com/gib/Tech_Tracker_Web"
className="text-center text-[16px] md:text-lg px-4 py-2 md:py-2.5 font-semibold
<Link
href='https://git.gibbyb.com/gib/Tech_Tracker_Web'
className='text-center text-[16px] md:text-lg px-4 py-2 md:py-2.5 font-semibold
bg-gradient-to-tl from-[#35363F] to=[#24191A] rounded-xl hover:text-sky-200
hover:bg-gradient-to-tr hover:from-[#35363F] hover:to-[#23242F]
mx-auto flex flex-row"
mx-auto flex flex-row'
>
<Image src="/images/gitea_logo.svg" alt="Gitea" width={35} height={35}
className="mr-2"
/>
<h3 className="my-auto">Source Code</h3>
</Link>
</div>
<Image
src='/images/gitea_logo.svg'
alt='Gitea'
width={35}
height={35}
className='mr-2'
/>
<h3 className='my-auto'>Source Code</h3>
</Link>
</div>
</main>
);
};
}

26
src/components/ui/TV_Toggle.tsx
View File

@ -1,21 +1,27 @@
"use client";
import Image from "next/image";
import { useTVMode } from "~/components/context/TVModeContext";
import { useSession } from "next-auth/react";
'use client';
import Image from 'next/image';
import { useTVMode } from '~/components/context/TVModeContext';
import { useSession } from 'next-auth/react';
export default function TV_Toggle() {
const { tvMode, toggleTVMode } = useTVMode();
const { data: session } = useSession();
if (!session) return <div/>;
if (!session) return <div />;
return (
<button onClick={toggleTVMode} className="mr-4 mt-1">
<button onClick={toggleTVMode} className='mr-4 mt-1'>
{tvMode ? (
<Image src="/images/exit_fullscreen.svg" alt="Exit TV Mode"
width={25} height={25}
<Image
src='/images/exit_fullscreen.svg'
alt='Exit TV Mode'
width={25}
height={25}
/>
) : (
<Image src="/images/fullscreen.svg" alt="Enter TV Mode"
width={25} height={25}
<Image
src='/images/fullscreen.svg'
alt='Enter TV Mode'
width={25}
height={25}
/>
)}
</button>

155
src/components/ui/Tech_Table.tsx
View File

@ -1,19 +1,19 @@
"use client";
'use client';
import { useState, useEffect, useCallback } from 'react';
import { useSession } from "next-auth/react";
import Loading from "~/components/ui/Loading";
import { useTVMode } from "~/components/context/TVModeContext";
import { Drawer, DrawerTrigger } from "~/components/ui/shadcn/drawer";
import { ScrollArea } from "~/components/ui/shadcn/scroll-area";
import { useSession } from 'next-auth/react';
import Loading from '~/components/ui/Loading';
import { useTVMode } from '~/components/context/TVModeContext';
import { Drawer, DrawerTrigger } from '~/components/ui/shadcn/drawer';
import { ScrollArea } from '~/components/ui/shadcn/scroll-area';
import History_Drawer from "~/components/ui/History_Drawer";
import History_Drawer from '~/components/ui/History_Drawer';
type Employee = {
id: number;
name: string;
status: string;
updatedAt: Date;
}
};
export default function Tech_Table({ employees }: { employees: Employee[] }) {
const { data: session, status } = useSession();
@ -29,32 +29,34 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
const res = await fetch('/api/get_technicians', {
method: 'GET',
headers: {
'Authorization': `Bearer ${process.env.API_KEY}`
}
Authorization: `Bearer ${process.env.API_KEY}`,
},
});
return res.json() as Promise<Employee[]>;
}, []);
const update_status = async () => {
if (!session) {
alert("You must be signed in to update status.");
alert('You must be signed in to update status.');
return;
} else if (selectedIds.length === 0 && employeeStatus.trim() !== '') {
const users_name = session.user?.name ?? "";
const users_name = session.user?.name ?? '';
const name_arr = users_name.split(' ');
const lname = name_arr[name_arr.length - 1] ?? "";
const cur_user = employees.find(employee => employee.name.includes(lname));
const lname = name_arr[name_arr.length - 1] ?? '';
const cur_user = employees.find((employee) =>
employee.name.includes(lname),
);
if (cur_user) {
await fetch('/api/update_status_by_id', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
Authorization: `Bearer ${process.env.API_KEY}`,
},
body: JSON.stringify(
{ employeeIds: [cur_user.id],
newStatus: employeeStatus }
),
body: JSON.stringify({
employeeIds: [cur_user.id],
newStatus: employeeStatus,
}),
});
}
} else if (employeeStatus.trim() !== '') {
@ -62,15 +64,15 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.API_KEY}`
Authorization: `Bearer ${process.env.API_KEY}`,
},
body: JSON.stringify(
{ employeeIds: selectedIds,
newStatus: employeeStatus }
),
body: JSON.stringify({
employeeIds: selectedIds,
newStatus: employeeStatus,
}),
});
}
const updatedEmployees = await fetch_employees();
setEmployeeData(updatedEmployees);
setSelectedIds([]);
@ -81,7 +83,7 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
setSelectedIds((prevSelected) =>
prevSelected.includes(id)
? prevSelected.filter((prevId) => prevId !== id)
: [...prevSelected, id]
: [...prevSelected, id],
);
};
@ -121,7 +123,7 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
};
useEffect(() => {
if (status !== "loading") {
if (status !== 'loading') {
setLoading(false);
}
}, [status]);
@ -135,7 +137,7 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
const updatedEmployees = await fetch_employees();
setEmployeeData(updatedEmployees);
};
fetchAndUpdateEmployees().catch((error) => {
console.error('Error fetching employees:', error);
});
@ -147,7 +149,7 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
console.error('Error fetching employees:', error);
});
}, 10000);
return () => clearInterval(intervalId);
}, [fetch_employees]);
@ -163,70 +165,77 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
else {
return (
<div className={`${tvMode ? 'content-fullscreen' : ''}`}>
{tvMode && <div className="w-full tablefill"></div>}
<table className={`techtable m-auto text-center text-[42px]
${tvMode ? 'techtable-fullscreen' : 'w-5/6'}`}>
<thead className="tabletitles border border-[#3e4446] bg-gradient-to-b
from-[#282828] to-[#383838] text-[48px]">
{tvMode && <div className='w-full tablefill'></div>}
<table
className={`techtable m-auto text-center text-[42px]
${tvMode ? 'techtable-fullscreen' : 'w-5/6'}`}
>
<thead
className='tabletitles border border-[#3e4446] bg-gradient-to-b
from-[#282828] to-[#383838] text-[48px]'
>
<tr>
{!tvMode && (
<th className="py-3 px-3 md:px-6 border border-[#3e4446]">
<th className='py-3 px-3 md:px-6 border border-[#3e4446]'>
<input
type="checkbox"
className="m-auto cursor-pointer md:scale-150"
type='checkbox'
className='m-auto cursor-pointer md:scale-150'
checked={selectAll}
onChange={handleSelectAllChange}
/>
</th>
)}
<th className="border border-[#3e4446] py-3">Name</th>
<th className="border border-[#3e4446] py-3">
<th className='border border-[#3e4446] py-3'>Name</th>
<th className='border border-[#3e4446] py-3'>
<Drawer>
<DrawerTrigger>
Status
</DrawerTrigger>
<History_Drawer user_id={-1}/>
<DrawerTrigger>Status</DrawerTrigger>
<History_Drawer user_id={-1} />
</Drawer>
</th>
<th className="border border-[#3e4446] py-3">Updated At</th>
<th className='border border-[#3e4446] py-3'>Updated At</th>
</tr>
</thead>
<tbody>
{employeeData.map((employee) => (
<tr
className="even:bg-gradient-to-br from-[#272727] to-[#313131]
odd:bg-gradient-to-bl odd:from-[#252525] odd:to-[#212125]"
className='even:bg-gradient-to-br from-[#272727] to-[#313131]
odd:bg-gradient-to-bl odd:from-[#252525] odd:to-[#212125]'
key={employee.id}
>
{!tvMode && (
<td className="p-1 border border-[#3e4446]">
<input
type="checkbox"
className="m-auto cursor-pointer md:scale-150"
checked={selectedIds.includes(employee.id)}
onChange={() => handleCheckboxChange(employee.id)}
/>
</td>
)}
<td className="n-column px-1 md:py-3 border border-[#3e4446]">
{!tvMode && (
<td className='p-1 border border-[#3e4446]'>
<input
type='checkbox'
className='m-auto cursor-pointer md:scale-150'
checked={selectedIds.includes(employee.id)}
onChange={() => handleCheckboxChange(employee.id)}
/>
</td>
)}
<td className='n-column px-1 md:py-3 border border-[#3e4446]'>
{employee.name}
</td>
<td className="s-column max-w-[700px] px-1 md:py-3 border
border-[#3e4446] wrapword max-h-0">
<ScrollArea className="w-full m-auto h-[60px]">
<td
className='s-column max-w-[700px] px-1 md:py-3 border
border-[#3e4446] wrapword max-h-0'
>
<ScrollArea className='w-full m-auto h-[60px]'>
<Drawer>
<DrawerTrigger>
<button onClick={() => handleStatusClick(employee.id)}>
{employee.status}
</button>
<button onClick={() => handleStatusClick(employee.id)}>
{employee.status}
</button>
</DrawerTrigger>
{selectedUserId !== -1 && (
<History_Drawer key={selectedUserId} user_id={selectedUserId} />
<History_Drawer
key={selectedUserId}
user_id={selectedUserId}
/>
)}
</Drawer>
</ScrollArea>
</td>
<td className="ua-column px-1 md:py-3 border border-[#3e4446]">
<td className='ua-column px-1 md:py-3 border border-[#3e4446]'>
{formatTime(employee.updatedAt)}
</td>
</tr>
@ -234,23 +243,23 @@ export default function Tech_Table({ employees }: { employees: Employee[] }) {
</tbody>
</table>
{!tvMode && (
<div className="m-auto flex flex-row items-center justify-center py-5">
<div className='m-auto flex flex-row items-center justify-center py-5'>
<input
autoFocus
type="text"
placeholder="New Status"
className="min-w-[120px] lg:min-w-[400px] bg-[#F9F6EE] py-2 px-3
border-none rounded-xl text-[#111111] lg:text-2xl"
type='text'
placeholder='New Status'
className='min-w-[120px] lg:min-w-[400px] bg-[#F9F6EE] py-2 px-3
border-none rounded-xl text-[#111111] lg:text-2xl'
value={employeeStatus}
onChange={handleStatusChange}
onKeyDown={handleKeyDown}
/>
<button
type="submit"
className="min-w-[100px] lg:min-w-[160px] m-2 p-2 border-none rounded-xl
type='submit'
className='min-w-[100px] lg:min-w-[160px] m-2 p-2 border-none rounded-xl
text-center font-semibold lg:text-2xl hover:text-slate-300
hover:bg-gradient-to-bl hover:from-[#484848] hover:to-[#333333]
bg-gradient-to-br from-[#595959] to-[#444444]"
bg-gradient-to-br from-[#595959] to-[#444444]'
onClick={update_status}
>
Update

38
src/components/ui/scroll-area.tsx
View File

@ -1,9 +1,9 @@
"use client"
'use client';
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import * as React from 'react';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@ -11,38 +11,38 @@ const ScrollArea = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
className={cn('relative overflow-hidden', className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
<ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
>(({ className, orientation = 'vertical', ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
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 flex-col border-t border-t-transparent p-[1px]",
className
'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 flex-col border-t border-t-transparent p-[1px]',
className,
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
<ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar }
export { ScrollArea, ScrollBar };

58
src/components/ui/shadcn/button.tsx
View File

@ -1,59 +1,59 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm " +
"font-medium ring-offset-background transition-colors focus-visible:outline-none " +
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
"disabled:pointer-events-none disabled:opacity-50",
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ' +
'font-medium ring-offset-background transition-colors focus-visible:outline-none ' +
'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
'disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: "h-10 px-4 py-2",
sm: "h-9 rounded-md px-3",
lg: "h-11 rounded-md px-8",
icon: "h-10 w-10",
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: "default",
size: "default",
variant: 'default',
size: 'default',
},
}
)
},
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
const Comp = asChild ? Slot : 'button';
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"
);
},
);
Button.displayName = 'Button';
export { Button, buttonVariants }
export { Button, buttonVariants };

91
src/components/ui/shadcn/calendar.tsx
View File

@ -1,11 +1,11 @@
"use client"
import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker } from "react-day-picker"
import { cn } from "~/lib/utils"
import { buttonVariants } from "~/components/ui/shadcn/button"
'use client';
import * as React from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { DayPicker } from 'react-day-picker';
import { cn } from '~/lib/utils';
import { buttonVariants } from '~/components/ui/shadcn/button';
export type CalendarProps = React.ComponentProps<typeof DayPicker>
export type CalendarProps = React.ComponentProps<typeof DayPicker>;
function Calendar({
className,
@ -16,59 +16,60 @@ function Calendar({
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
className={cn('p-3', className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
caption: "flex justify-center pt-1 relative items-center",
caption_label: "text-sm font-medium",
nav: "space-x-1 flex items-center",
months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
month: 'space-y-4',
caption: 'flex justify-center pt-1 relative items-center',
caption_label: 'text-sm font-medium',
nav: 'space-x-1 flex items-center',
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
buttonVariants({ variant: 'outline' }),
'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
),
nav_button_previous: "absolute left-1",
nav_button_next: "absolute right-1",
table: "w-full border-collapse space-y-1",
head_row: "flex",
nav_button_previous: 'absolute left-1',
nav_button_next: 'absolute right-1',
table: 'w-full border-collapse space-y-1',
head_row: 'flex',
head_cell:
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
cell: "h-9 w-9 text-center text-sm p-0 relative " +
"[&:has([aria-selected].day-range-end)]:rounded-r-md " +
"[&:has([aria-selected].day-outside)]:bg-accent/50 " +
"[&:has([aria-selected])]:bg-accent " +
"first:[&:has([aria-selected])]:rounded-l-md " +
"last:[&:has([aria-selected])]:rounded-r-md " +
"focus-within:relative focus-within:z-20",
'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
row: 'flex w-full mt-2',
cell:
'h-9 w-9 text-center text-sm p-0 relative ' +
'[&:has([aria-selected].day-range-end)]:rounded-r-md ' +
'[&:has([aria-selected].day-outside)]:bg-accent/50 ' +
'[&:has([aria-selected])]:bg-accent ' +
'first:[&:has([aria-selected])]:rounded-l-md ' +
'last:[&:has([aria-selected])]:rounded-r-md ' +
'focus-within:relative focus-within:z-20',
day: cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
buttonVariants({ variant: 'ghost' }),
'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
),
day_range_end: "day-range-end",
day_range_end: 'day-range-end',
day_selected:
"bg-primary text-primary-foreground hover:bg-primary " +
"hover:text-primary-foreground focus:bg-primary " +
"focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",
'bg-primary text-primary-foreground hover:bg-primary ' +
'hover:text-primary-foreground focus:bg-primary ' +
'focus:text-primary-foreground',
day_today: 'bg-accent text-accent-foreground',
day_outside:
"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 " +
"aria-selected:text-muted-foreground aria-selected:opacity-30",
day_disabled: "text-muted-foreground opacity-50",
'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 ' +
'aria-selected:text-muted-foreground aria-selected:opacity-30',
day_disabled: 'text-muted-foreground opacity-50',
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
'aria-selected:bg-accent aria-selected:text-accent-foreground',
day_hidden: 'invisible',
...classNames,
}}
components={{
// @ts-expect-error - I didn't even write this code man cmon
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
IconLeft: ({ ...props }) => <ChevronLeft className='h-4 w-4' />,
IconRight: ({ ...props }) => <ChevronRight className='h-4 w-4' />,
}}
{...props}
/>
)
);
}
Calendar.displayName = "Calendar"
Calendar.displayName = 'Calendar';
export { Calendar }
export { Calendar };

30
src/components/ui/shadcn/checkbox.tsx
View File

@ -1,8 +1,8 @@
"use client"
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "~/lib/utils"
'use client';
import * as React from 'react';
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check } from 'lucide-react';
import { cn } from '~/lib/utils';
const Checkbox = React.forwardRef<
React.ElementRef<typeof CheckboxPrimitive.Root>,
@ -11,21 +11,21 @@ const Checkbox = React.forwardRef<
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background " +
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
"focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 " +
"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background ' +
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ' +
'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
className={cn('flex items-center justify-center text-current')}
>
<Check className="h-4 w-4" />
<Check className='h-4 w-4' />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
));
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
export { Checkbox }
export { Checkbox };

39
src/components/ui/shadcn/combobox.tsx
View File

@ -1,8 +1,8 @@
"use client"
import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "~/lib/utils"
import { Button } from "~/components/ui/shadcn/button"
'use client';
import * as React from 'react';
import { Check, ChevronsUpDown } from 'lucide-react';
import { cn } from '~/lib/utils';
import { Button } from '~/components/ui/shadcn/button';
import {
Command,
CommandEmpty,
@ -10,12 +10,12 @@ import {
CommandInput,
CommandItem,
CommandList,
} from "~/components/ui/shadcn/command"
} from '~/components/ui/shadcn/command';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "~/components/ui/shadcn/popover"
} from '~/components/ui/shadcn/popover';
// Define the type correctly as an array of objects
type ListItem = {
@ -29,27 +29,28 @@ type ComboboxDemoProps = {
export function ComboboxDemo({ listItems }: ComboboxDemoProps) {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState("");
const [value, setValue] = React.useState('');
const selectedItem = listItems.find(
(item) => item.value === value)?.label ?? "Select listItem...";
const selectedItem =
listItems.find((item) => item.value === value)?.label ??
'Select listItem...';
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
variant='outline'
role='combobox'
aria-expanded={open}
className="w-[200px] justify-between"
className='w-[200px] justify-between'
>
{selectedItem}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
<ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<PopoverContent className='w-[200px] p-0'>
<Command>
<CommandInput placeholder="Search listItem..." />
<CommandInput placeholder='Search listItem...' />
<CommandEmpty>No Item found.</CommandEmpty>
<CommandList>
<CommandGroup>
@ -58,14 +59,14 @@ export function ComboboxDemo({ listItems }: ComboboxDemoProps) {
key={listItem.value}
value={listItem.value}
onSelect={(currentValue) => {
setValue(currentValue === value ? "" : currentValue);
setValue(currentValue === value ? '' : currentValue);
setOpen(false);
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === listItem.value ? "opacity-100" : "opacity-0"
'mr-2 h-4 w-4',
value === listItem.value ? 'opacity-100' : 'opacity-0',
)}
/>
{listItem.label}

110
src/components/ui/shadcn/command.tsx
View File

@ -1,10 +1,10 @@
"use client"
import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"
import { cn } from "~/lib/utils"
import { Dialog, DialogContent } from "~/components/ui/shadcn/dialog"
'use client';
import * as React from 'react';
import { type DialogProps } from '@radix-ui/react-dialog';
import { Command as CommandPrimitive } from 'cmdk';
import { Search } from 'lucide-react';
import { cn } from '~/lib/utils';
import { Dialog, DialogContent } from '~/components/ui/shadcn/dialog';
const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
@ -13,55 +13,57 @@ const Command = React.forwardRef<
<CommandPrimitive
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden " +
"rounded-md bg-popover text-popover-foreground",
className
'flex h-full w-full flex-col overflow-hidden ' +
'rounded-md bg-popover text-popover-foreground',
className,
)}
{...props}
/>
))
Command.displayName = CommandPrimitive.displayName
));
Command.displayName = CommandPrimitive.displayName;
interface CommandDialogProps extends DialogProps {}
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-group-heading]]:px-2
<DialogContent className='overflow-hidden p-0 shadow-lg'>
<Command
className='[&_[cmdk-group-heading]]:px-2
[&_[cmdk-group-heading]]:font-medium
[&_[cmdk-group-heading]]:text-muted-foreground
[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2
[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5
[&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3
[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
[&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'
>
{children}
</Command>
</DialogContent>
</Dialog>
)
}
);
};
const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
>(({ className, ...props }, ref) => (
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
<div className='flex items-center border-b px-3' cmdk-input-wrapper=''>
<Search className='mr-2 h-4 w-4 shrink-0 opacity-50' />
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm " +
"outline-none placeholder:text-muted-foreground " +
"disabled:cursor-not-allowed disabled:opacity-50",
className
'flex h-11 w-full rounded-md bg-transparent py-3 text-sm ' +
'outline-none placeholder:text-muted-foreground ' +
'disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
/>
</div>
))
));
CommandInput.displayName = CommandPrimitive.Input.displayName
CommandInput.displayName = CommandPrimitive.Input.displayName;
const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
@ -69,12 +71,12 @@ const CommandList = React.forwardRef<
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
{...props}
/>
))
));
CommandList.displayName = CommandPrimitive.List.displayName
CommandList.displayName = CommandPrimitive.List.displayName;
const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
@ -82,12 +84,12 @@ const CommandEmpty = React.forwardRef<
>((props, ref) => (
<CommandPrimitive.Empty
ref={ref}
className="py-6 text-center text-sm"
className='py-6 text-center text-sm'
{...props}
/>
))
));
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
@ -96,17 +98,17 @@ const CommandGroup = React.forwardRef<
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 " +
"[&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs " +
"[&_[cmdk-group-heading]]:font-medium " +
"[&_[cmdk-group-heading]]:text-muted-foreground",
className
'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 ' +
'[&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs ' +
'[&_[cmdk-group-heading]]:font-medium ' +
'[&_[cmdk-group-heading]]:text-muted-foreground',
className,
)}
{...props}
/>
))
));
CommandGroup.displayName = CommandPrimitive.Group.displayName
CommandGroup.displayName = CommandPrimitive.Group.displayName;
const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
@ -114,11 +116,11 @@ const CommandSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<CommandPrimitive.Separator
ref={ref}
className={cn("-mx-1 h-px bg-border", className)}
className={cn('-mx-1 h-px bg-border', className)}
{...props}
/>
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
));
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
@ -127,17 +129,17 @@ const CommandItem = React.forwardRef<
<CommandPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm " +
"px-2 py-1.5 text-sm outline-none aria-selected:bg-accent " +
"aria-selected:text-accent-foreground " +
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
'relative flex cursor-default select-none items-center rounded-sm ' +
'px-2 py-1.5 text-sm outline-none aria-selected:bg-accent ' +
'aria-selected:text-accent-foreground ' +
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
/>
))
));
CommandItem.displayName = CommandPrimitive.Item.displayName
CommandItem.displayName = CommandPrimitive.Item.displayName;
const CommandShortcut = ({
className,
@ -146,14 +148,14 @@ const CommandShortcut = ({
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
'ml-auto text-xs tracking-widest text-muted-foreground',
className,
)}
{...props}
/>
)
}
CommandShortcut.displayName = "CommandShortcut"
);
};
CommandShortcut.displayName = 'CommandShortcut';
export {
Command,
@ -165,4 +167,4 @@ export {
CommandItem,
CommandShortcut,
CommandSeparator,
}
};

34
src/components/ui/shadcn/date-picker.tsx
View File

@ -1,41 +1,41 @@
"use client"
import * as React from "react"
import { format } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"
import { cn } from "~/lib/utils"
import { Button } from "~/components/ui/shadcn/button"
import { Calendar } from "~/components/ui/shadcn/calendar"
'use client';
import * as React from 'react';
import { format } from 'date-fns';
import { Calendar as CalendarIcon } from 'lucide-react';
import { cn } from '~/lib/utils';
import { Button } from '~/components/ui/shadcn/button';
import { Calendar } from '~/components/ui/shadcn/calendar';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "~/components/ui/shadcn/popover"
} from '~/components/ui/shadcn/popover';
export function DatePickerDemo() {
const [date, setDate] = React.useState<Date>()
const [date, setDate] = React.useState<Date>();
return (
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
variant={'outline'}
className={cn(
"w-[280px] justify-start text-left font-normal",
!date && "text-muted-foreground"
'w-[280px] justify-start text-left font-normal',
!date && 'text-muted-foreground',
)}
>
<CalendarIcon className="mr-2 h-4 w-4" />
{date ? format(date, "PPP") : <span>Pick a date</span>}
<CalendarIcon className='mr-2 h-4 w-4' />
{date ? format(date, 'PPP') : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<PopoverContent className='w-auto p-0'>
<Calendar
mode="single"
mode='single'
selected={date}
onSelect={setDate}
//initialFocus // Causes an error idk if it's needed
/>
</PopoverContent>
</Popover>
)
);
}

96
src/components/ui/shadcn/dialog.tsx
View File

@ -1,13 +1,13 @@
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "~/lib/utils"
'use client';
import * as React from 'react';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { X } from 'lucide-react';
import { cn } from '~/lib/utils';
const Dialog = DialogPrimitive.Root
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogClose = DialogPrimitive.Close
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
@ -16,15 +16,15 @@ const DialogOverlay = React.forwardRef<
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in " +
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
"data-[state=open]:fade-in-0",
className
'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in ' +
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
'data-[state=open]:fade-in-0',
className,
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
@ -35,31 +35,33 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] " +
"translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 " +
"data-[state=open]:animate-in data-[state=closed]:animate-out " +
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 " +
"data-[state=closed]:slide-out-to-left-1/2 " +
"data-[state=closed]:slide-out-to-top-[48%] " +
"data-[state=open]:slide-in-from-left-1/2 " +
"data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] ' +
'translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 ' +
'data-[state=open]:animate-in data-[state=closed]:animate-out ' +
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' +
'data-[state=closed]:slide-out-to-left-1/2 ' +
'data-[state=closed]:slide-out-to-top-[48%] ' +
'data-[state=open]:slide-in-from-left-1/2 ' +
'data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
className,
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70
<DialogPrimitive.Close
className='absolute right-4 top-4 rounded-sm opacity-70
ring-offset-background transition-opacity hover:opacity-100 focus:outline-none
focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none
data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'
>
<X className='h-4 w-4' />
<span className='sr-only'>Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({
className,
@ -67,13 +69,13 @@ const DialogHeader = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
'flex flex-col space-y-1.5 text-center sm:text-left',
className,
)}
{...props}
/>
)
DialogHeader.displayName = "DialogHeader"
);
DialogHeader.displayName = 'DialogHeader';
const DialogFooter = ({
className,
@ -81,13 +83,13 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
className,
)}
{...props}
/>
)
DialogFooter.displayName = "DialogFooter"
);
DialogFooter.displayName = 'DialogFooter';
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
@ -96,13 +98,13 @@ const DialogTitle = React.forwardRef<
<DialogPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
'text-lg font-semibold leading-none tracking-tight',
className,
)}
{...props}
/>
))
DialogTitle.displayName = DialogPrimitive.Title.displayName
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
@ -110,11 +112,11 @@ const DialogDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
))
DialogDescription.displayName = DialogPrimitive.Description.displayName
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
@ -127,4 +129,4 @@ export {
DialogFooter,
DialogTitle,
DialogDescription,
}
};

62
src/components/ui/shadcn/drawer.tsx
View File

@ -1,9 +1,9 @@
"use client"
'use client';
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import * as React from 'react';
import { Drawer as DrawerPrimitive } from 'vaul';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const Drawer = ({
shouldScaleBackground = true,
@ -13,14 +13,14 @@ const Drawer = ({
shouldScaleBackground={shouldScaleBackground}
{...props}
/>
)
Drawer.displayName = "Drawer"
);
Drawer.displayName = 'Drawer';
const DrawerTrigger = DrawerPrimitive.Trigger
const DrawerTrigger = DrawerPrimitive.Trigger;
const DrawerPortal = DrawerPrimitive.Portal
const DrawerPortal = DrawerPrimitive.Portal;
const DrawerClose = DrawerPrimitive.Close
const DrawerClose = DrawerPrimitive.Close;
const DrawerOverlay = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Overlay>,
@ -28,11 +28,11 @@ const DrawerOverlay = React.forwardRef<
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Overlay
ref={ref}
className={cn("fixed inset-0 z-50 bg-black/80", className)}
className={cn('fixed inset-0 z-50 bg-black/80', className)}
{...props}
/>
))
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
));
DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
const DrawerContent = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Content>,
@ -43,39 +43,39 @@ const DrawerContent = React.forwardRef<
<DrawerPrimitive.Content
ref={ref}
className={cn(
"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
className
'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
className,
)}
{...props}
>
<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
<div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted' />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
))
DrawerContent.displayName = "DrawerContent"
));
DrawerContent.displayName = 'DrawerContent';
const DrawerHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
{...props}
/>
)
DrawerHeader.displayName = "DrawerHeader"
);
DrawerHeader.displayName = 'DrawerHeader';
const DrawerFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn("mt-auto flex flex-col gap-2 p-4", className)}
className={cn('mt-auto flex flex-col gap-2 p-4', className)}
{...props}
/>
)
DrawerFooter.displayName = "DrawerFooter"
);
DrawerFooter.displayName = 'DrawerFooter';
const DrawerTitle = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Title>,
@ -84,13 +84,13 @@ const DrawerTitle = React.forwardRef<
<DrawerPrimitive.Title
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
'text-lg font-semibold leading-none tracking-tight',
className,
)}
{...props}
/>
))
DrawerTitle.displayName = DrawerPrimitive.Title.displayName
));
DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
const DrawerDescription = React.forwardRef<
React.ElementRef<typeof DrawerPrimitive.Description>,
@ -98,11 +98,11 @@ const DrawerDescription = React.forwardRef<
>(({ className, ...props }, ref) => (
<DrawerPrimitive.Description
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
))
DrawerDescription.displayName = DrawerPrimitive.Description.displayName
));
DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
export {
Drawer,
@ -115,4 +115,4 @@ export {
DrawerFooter,
DrawerTitle,
DrawerDescription,
}
};

160
src/components/ui/shadcn/dropdown-menu.tsx
View File

@ -1,38 +1,38 @@
"use client"
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import { cn } from "~/lib/utils"
'use client';
import * as React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
import { Check, ChevronRight, Circle } from 'lucide-react';
import { cn } from '~/lib/utils';
const DropdownMenu = DropdownMenuPrimitive.Root
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
const DropdownMenuGroup = DropdownMenuPrimitive.Group
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
inset?: boolean;
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm " +
"px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
'flex cursor-default select-none items-center rounded-sm ' +
'px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
inset && 'pl-8',
className,
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
<ChevronRight className='ml-auto h-4 w-4' />
</DropdownMenuPrimitive.SubTrigger>
))
));
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@ -41,20 +41,20 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " +
"text-popover-foreground shadow-lg data-[state=open]:animate-in " +
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 " +
"data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 " +
"data-[side=left]:slide-in-from-right-2 " +
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 ' +
'text-popover-foreground shadow-lg data-[state=open]:animate-in ' +
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 ' +
'data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 ' +
'data-[side=left]:slide-in-from-right-2 ' +
'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
/>
))
));
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
DropdownMenuPrimitive.SubContent.displayName;
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@ -65,41 +65,41 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 " +
"text-popover-foreground shadow-md data-[state=open]:animate-in " +
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 " +
"data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 " +
"data-[side=left]:slide-in-from-right-2 " +
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 ' +
'text-popover-foreground shadow-md data-[state=open]:animate-in ' +
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 ' +
'data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 ' +
'data-[side=left]:slide-in-from-right-2 ' +
'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
inset?: boolean;
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm " +
"px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent " +
"focus:text-accent-foreground data-[disabled]:pointer-events-none " +
"data-[disabled]:opacity-50",
inset && "pl-8",
className
'relative flex cursor-default select-none items-center rounded-sm ' +
'px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent ' +
'focus:text-accent-foreground data-[disabled]:pointer-events-none ' +
'data-[disabled]:opacity-50',
inset && 'pl-8',
className,
)}
{...props}
/>
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@ -108,25 +108,25 @@ const DropdownMenuCheckboxItem = React.forwardRef<
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm " +
"py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent " +
"focus:text-accent-foreground data-[disabled]:pointer-events-none " +
"data-[disabled]:opacity-50",
className
'relative flex cursor-default select-none items-center rounded-sm ' +
'py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent ' +
'focus:text-accent-foreground data-[disabled]:pointer-events-none ' +
'data-[disabled]:opacity-50',
className,
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
<Check className='h-4 w-4' />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
));
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@ -135,41 +135,41 @@ const DropdownMenuRadioItem = React.forwardRef<
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm " +
"py-1.5 pl-8 pr-2 text-sm outline-none transition-colors " +
"focus:bg-accent focus:text-accent-foreground " +
"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className
'relative flex cursor-default select-none items-center rounded-sm ' +
'py-1.5 pl-8 pr-2 text-sm outline-none transition-colors ' +
'focus:bg-accent focus:text-accent-foreground ' +
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
<DropdownMenuPrimitive.ItemIndicator>
<Circle className="h-2 w-2 fill-current" />
<Circle className='h-2 w-2 fill-current' />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
inset?: boolean;
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
'px-2 py-1.5 text-sm font-semibold',
inset && 'pl-8',
className,
)}
{...props}
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@ -177,11 +177,11 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
className={cn('-mx-1 my-1 h-px bg-muted', className)}
{...props}
/>
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
const DropdownMenuShortcut = ({
className,
@ -189,12 +189,12 @@ const DropdownMenuShortcut = ({
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
{...props}
/>
)
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
);
};
DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
export {
DropdownMenu,
@ -212,4 +212,4 @@ export {
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}
};

121
src/components/ui/shadcn/form.tsx
View File

@ -1,36 +1,28 @@
"use client"
import * as React from "react"
import type * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import type {
ControllerProps,
FieldPath,
FieldValues,
} from "react-hook-form"
import {
Controller,
FormProvider,
useFormContext,
} from "react-hook-form"
import { cn } from "~/lib/utils"
import { Label } from "~/components/ui/shadcn/label"
'use client';
import * as React from 'react';
import type * as LabelPrimitive from '@radix-ui/react-label';
import { Slot } from '@radix-ui/react-slot';
import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
import { Controller, FormProvider, useFormContext } from 'react-hook-form';
import { cn } from '~/lib/utils';
import { Label } from '~/components/ui/shadcn/label';
const Form = FormProvider
const Form = FormProvider;
type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
> = {
name: TName
}
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue
)
{} as FormFieldContextValue,
);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
@ -38,21 +30,21 @@ const FormField = <
<FormFieldContext.Provider value={{ name: props.name }}>
<Controller {...props} />
</FormFieldContext.Provider>
)
}
);
};
const useFormField = () => {
const fieldContext = React.useContext(FormFieldContext)
const itemContext = React.useContext(FormItemContext)
const { getFieldState, formState } = useFormContext()
const fieldContext = React.useContext(FormFieldContext);
const itemContext = React.useContext(FormItemContext);
const { getFieldState, formState } = useFormContext();
const fieldState = getFieldState(fieldContext.name, formState)
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
throw new Error('useFormField should be used within <FormField>');
}
const { id } = itemContext
const { id } = itemContext;
return {
id,
@ -61,53 +53,54 @@ const useFormField = () => {
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}
};
};
type FormItemContextValue = {
id: string
}
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue
)
{} as FormItemContextValue,
);
const FormItem = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = React.useId()
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
<div ref={ref} className={cn('space-y-2', className)} {...props} />
</FormItemContext.Provider>
)
})
FormItem.displayName = "FormItem"
);
});
FormItem.displayName = 'FormItem';
const FormLabel = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField()
const { error, formItemId } = useFormField();
return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
className={cn(error && 'text-destructive', className)}
htmlFor={formItemId}
{...props}
/>
)
})
FormLabel.displayName = "FormLabel"
);
});
FormLabel.displayName = 'FormLabel';
const FormControl = React.forwardRef<
React.ElementRef<typeof Slot>,
React.ComponentPropsWithoutRef<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
return (
<Slot
@ -121,50 +114,50 @@ const FormControl = React.forwardRef<
aria-invalid={!!error}
{...props}
/>
)
})
FormControl.displayName = "FormControl"
);
});
FormControl.displayName = 'FormControl';
const FormDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField()
const { formDescriptionId } = useFormField();
return (
<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
)
})
FormDescription.displayName = "FormDescription"
);
});
FormDescription.displayName = 'FormDescription';
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
if (!body) {
return null
return null;
}
return (
<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive", className)}
className={cn('text-sm font-medium text-destructive', className)}
{...props}
>
{body}
</p>
)
})
FormMessage.displayName = "FormMessage"
);
});
FormMessage.displayName = 'FormMessage';
export {
useFormField,
@ -175,4 +168,4 @@ export {
FormDescription,
FormMessage,
FormField,
}
};

26
src/components/ui/shadcn/input.tsx
View File

@ -1,5 +1,5 @@
import * as React from "react"
import { cn } from "~/lib/utils"
import * as React from 'react';
import { cn } from '~/lib/utils';
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
@ -10,18 +10,18 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
"flex h-10 w-full rounded-md border border-input bg-background px-3 " +
"py-2 text-sm ring-offset-background file:border-0 file:bg-transparent " +
"file:text-sm file:font-medium placeholder:text-muted-foreground " +
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
"focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
'flex h-10 w-full rounded-md border border-input bg-background px-3 ' +
'py-2 text-sm ring-offset-background file:border-0 file:bg-transparent ' +
'file:text-sm file:font-medium placeholder:text-muted-foreground ' +
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
'focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }
);
},
);
Input.displayName = 'Input';
export { Input };

22
src/components/ui/shadcn/label.tsx
View File

@ -1,15 +1,15 @@
"use client"
'use client';
import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"
import * as React from 'react';
import * as LabelPrimitive from '@radix-ui/react-label';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const labelVariants = cva(
"text-sm font-medium leading-none " +
"peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)
'text-sm font-medium leading-none ' +
'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
);
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
@ -21,7 +21,7 @@ const Label = React.forwardRef<
className={cn(labelVariants(), className)}
{...props}
/>
))
Label.displayName = LabelPrimitive.Root.displayName
));
Label.displayName = LabelPrimitive.Root.displayName;
export { Label }
export { Label };

94
src/components/ui/shadcn/pagination.tsx
View File

@ -1,111 +1,111 @@
import * as React from "react"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
import * as React from 'react';
import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
import { cn } from "~/lib/utils"
import { buttonVariants } from "~/components/ui/shadcn/button"
import type { ButtonProps } from "~/components/ui/shadcn/button"
import { cn } from '~/lib/utils';
import { buttonVariants } from '~/components/ui/shadcn/button';
import type { ButtonProps } from '~/components/ui/shadcn/button';
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
<nav
role="navigation"
aria-label="pagination"
className={cn("mx-auto flex w-full justify-center", className)}
role='navigation'
aria-label='pagination'
className={cn('mx-auto flex w-full justify-center', className)}
{...props}
/>
)
Pagination.displayName = "Pagination"
);
Pagination.displayName = 'Pagination';
const PaginationContent = React.forwardRef<
HTMLUListElement,
React.ComponentProps<"ul">
React.ComponentProps<'ul'>
>(({ className, ...props }, ref) => (
<ul
ref={ref}
className={cn("flex flex-row items-center gap-1", className)}
className={cn('flex flex-row items-center gap-1', className)}
{...props}
/>
))
PaginationContent.displayName = "PaginationContent"
));
PaginationContent.displayName = 'PaginationContent';
const PaginationItem = React.forwardRef<
HTMLLIElement,
React.ComponentProps<"li">
React.ComponentProps<'li'>
>(({ className, ...props }, ref) => (
<li ref={ref} className={cn("", className)} {...props} />
))
PaginationItem.displayName = "PaginationItem"
<li ref={ref} className={cn('', className)} {...props} />
));
PaginationItem.displayName = 'PaginationItem';
type PaginationLinkProps = {
isActive?: boolean
} & Pick<ButtonProps, "size"> &
React.ComponentProps<"a">
isActive?: boolean;
} & Pick<ButtonProps, 'size'> &
React.ComponentProps<'a'>;
const PaginationLink = ({
className,
isActive,
size = "icon",
size = 'icon',
...props
}: PaginationLinkProps) => (
<a
aria-current={isActive ? "page" : undefined}
aria-current={isActive ? 'page' : undefined}
className={cn(
buttonVariants({
variant: isActive ? "outline" : "ghost",
variant: isActive ? 'outline' : 'ghost',
size,
}),
className
className,
)}
{...props}
/>
)
PaginationLink.displayName = "PaginationLink"
);
PaginationLink.displayName = 'PaginationLink';
const PaginationPrevious = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to previous page"
size="default"
className={cn("gap-1 pl-2.5", className)}
aria-label='Go to previous page'
size='default'
className={cn('gap-1 pl-2.5', className)}
{...props}
>
<ChevronLeft className="h-4 w-4" />
<ChevronLeft className='h-4 w-4' />
<span>Previous</span>
</PaginationLink>
)
PaginationPrevious.displayName = "PaginationPrevious"
);
PaginationPrevious.displayName = 'PaginationPrevious';
const PaginationNext = ({
className,
...props
}: React.ComponentProps<typeof PaginationLink>) => (
<PaginationLink
aria-label="Go to next page"
size="default"
className={cn("gap-1 pr-2.5", className)}
aria-label='Go to next page'
size='default'
className={cn('gap-1 pr-2.5', className)}
{...props}
>
<span>Next</span>
<ChevronRight className="h-4 w-4" />
<ChevronRight className='h-4 w-4' />
</PaginationLink>
)
PaginationNext.displayName = "PaginationNext"
);
PaginationNext.displayName = 'PaginationNext';
const PaginationEllipsis = ({
className,
...props
}: React.ComponentProps<"span">) => (
}: React.ComponentProps<'span'>) => (
<span
aria-hidden
className={cn("flex h-9 w-9 items-center justify-center", className)}
className={cn('flex h-9 w-9 items-center justify-center', className)}
{...props}
>
<MoreHorizontal className="h-4 w-4" />
<span className="sr-only">More pages</span>
<MoreHorizontal className='h-4 w-4' />
<span className='sr-only'>More pages</span>
</span>
)
PaginationEllipsis.displayName = "PaginationEllipsis"
);
PaginationEllipsis.displayName = 'PaginationEllipsis';
export {
Pagination,
@ -115,4 +115,4 @@ export {
PaginationLink,
PaginationNext,
PaginationPrevious,
}
};

34
src/components/ui/shadcn/popover.tsx
View File

@ -1,36 +1,36 @@
"use client"
'use client';
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import * as React from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const Popover = PopoverPrimitive.Root
const Popover = PopoverPrimitive.Root;
const PopoverTrigger = PopoverPrimitive.Trigger
const PopoverTrigger = PopoverPrimitive.Trigger;
const PopoverContent = React.forwardRef<
React.ElementRef<typeof PopoverPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md " +
"outline-none data-[state=open]:animate-in data-[state=closed]:animate-out " +
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 " +
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 " +
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md ' +
'outline-none data-[state=open]:animate-in data-[state=closed]:animate-out ' +
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ' +
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ' +
'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 ' +
'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
/>
</PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName
));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
export { Popover, PopoverTrigger, PopoverContent }
export { Popover, PopoverTrigger, PopoverContent };

20
src/components/ui/shadcn/progress.tsx
View File

@ -1,9 +1,9 @@
"use client"
'use client';
import * as React from "react"
import * as ProgressPrimitive from "@radix-ui/react-progress"
import * as React from 'react';
import * as ProgressPrimitive from '@radix-ui/react-progress';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>,
@ -12,17 +12,17 @@ const Progress = React.forwardRef<
<ProgressPrimitive.Root
ref={ref}
className={cn(
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
className
'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
className,
)}
{...props}
>
<ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-primary transition-all"
className='h-full w-full flex-1 bg-primary transition-all'
style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
/>
</ProgressPrimitive.Root>
))
Progress.displayName = ProgressPrimitive.Root.displayName
));
Progress.displayName = ProgressPrimitive.Root.displayName;
export { Progress }
export { Progress };

40
src/components/ui/shadcn/radio-group.tsx
View File

@ -1,8 +1,8 @@
"use client"
import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"
import { cn } from "~/lib/utils"
'use client';
import * as React from 'react';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import { Circle } from 'lucide-react';
import { cn } from '~/lib/utils';
const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>,
@ -10,13 +10,13 @@ const RadioGroup = React.forwardRef<
>(({ className, ...props }, ref) => {
return (
<RadioGroupPrimitive.Root
className={cn("grid gap-2", className)}
className={cn('grid gap-2', className)}
{...props}
ref={ref}
/>
)
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
);
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>,
@ -26,20 +26,20 @@ const RadioGroupItem = React.forwardRef<
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"aspect-square h-4 w-4 rounded-full border border-primary text-primary " +
"ring-offset-background focus:outline-none focus-visible:ring-2 " +
"focus-visible:ring-ring focus-visible:ring-offset-2 " +
"disabled:cursor-not-allowed disabled:opacity-50",
className
'aspect-square h-4 w-4 rounded-full border border-primary text-primary ' +
'ring-offset-background focus:outline-none focus-visible:ring-2 ' +
'focus-visible:ring-ring focus-visible:ring-offset-2 ' +
'disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
{...props}
>
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
<Circle className="h-2.5 w-2.5 fill-current text-current" />
<RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
<Circle className='h-2.5 w-2.5 fill-current text-current' />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
)
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
);
});
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
export { RadioGroup, RadioGroupItem }
export { RadioGroup, RadioGroupItem };

38
src/components/ui/shadcn/scroll-area.tsx
View File

@ -1,9 +1,9 @@
"use client"
'use client';
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
import * as React from 'react';
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@ -11,38 +11,38 @@ const ScrollArea = React.forwardRef<
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
className={cn('relative overflow-hidden', className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
<ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
));
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
>(({ className, orientation = 'vertical', ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
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 flex-col border-t border-t-transparent p-[1px]",
className
'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 flex-col border-t border-t-transparent p-[1px]',
className,
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
<ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
export { ScrollArea, ScrollBar }
export { ScrollArea, ScrollBar };

122
src/components/ui/shadcn/select.tsx
View File

@ -1,12 +1,12 @@
"use client"
import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"
import { cn } from "~/lib/utils"
'use client';
import * as React from 'react';
import * as SelectPrimitive from '@radix-ui/react-select';
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
import { cn } from '~/lib/utils';
const Select = SelectPrimitive.Root
const SelectGroup = SelectPrimitive.Group
const SelectValue = SelectPrimitive.Value
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
@ -15,22 +15,22 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border " +
"border-input bg-background px-3 py-2 text-sm ring-offset-background " +
"placeholder:text-muted-foreground focus:outline-none focus:ring-2 " +
"focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed " +
"disabled:opacity-50 [&>span]:line-clamp-1",
className
'flex h-10 w-full items-center justify-between rounded-md border ' +
'border-input bg-background px-3 py-2 text-sm ring-offset-background ' +
'placeholder:text-muted-foreground focus:outline-none focus:ring-2 ' +
'focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed ' +
'disabled:opacity-50 [&>span]:line-clamp-1',
className,
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
<ChevronDown className='h-4 w-4 opacity-50' />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectScrollUpButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@ -39,15 +39,15 @@ const SelectScrollUpButton = React.forwardRef<
<SelectPrimitive.ScrollUpButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
'flex cursor-default items-center justify-center py-1',
className,
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
<ChevronUp className='h-4 w-4' />
</SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
));
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
const SelectScrollDownButton = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@ -56,36 +56,36 @@ const SelectScrollDownButton = React.forwardRef<
<SelectPrimitive.ScrollDownButton
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
'flex cursor-default items-center justify-center py-1',
className,
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
<ChevronDown className='h-4 w-4' />
</SelectPrimitive.ScrollDownButton>
))
));
SelectScrollDownButton.displayName =
SelectPrimitive.ScrollDownButton.displayName
SelectPrimitive.ScrollDownButton.displayName;
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
>(({ className, children, position = 'popper', ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border " +
"bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in " +
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
"data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 " +
"data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 " +
"data-[side=left]:slide-in-from-right-2 " +
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 " +
"data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border ' +
'bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in ' +
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
'data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 ' +
'data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 ' +
'data-[side=left]:slide-in-from-right-2 ' +
'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 ' +
'data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className,
)}
position={position}
{...props}
@ -93,10 +93,10 @@ const SelectContent = React.forwardRef<
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full " +
"min-w-[var(--radix-select-trigger-width)]"
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full ' +
'min-w-[var(--radix-select-trigger-width)]',
)}
>
{children}
@ -104,8 +104,8 @@ const SelectContent = React.forwardRef<
<SelectScrollDownButton />
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName
));
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>,
@ -113,11 +113,11 @@ const SelectLabel = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Label
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
{...props}
/>
))
SelectLabel.displayName = SelectPrimitive.Label.displayName
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
@ -126,24 +126,24 @@ const SelectItem = React.forwardRef<
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm " +
"py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent " +
"focus:text-accent-foreground data-[disabled]:pointer-events-none " +
"data-[disabled]:opacity-50",
className
'relative flex w-full cursor-default select-none items-center rounded-sm ' +
'py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent ' +
'focus:text-accent-foreground data-[disabled]:pointer-events-none ' +
'data-[disabled]:opacity-50',
className,
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
<Check className='h-4 w-4' />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>,
@ -151,11 +151,11 @@ const SelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
className={cn('-mx-1 my-1 h-px bg-muted', className)}
{...props}
/>
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
export {
Select,
@ -168,4 +168,4 @@ export {
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}
};

34
src/components/ui/shadcn/switch.tsx
View File

@ -1,9 +1,9 @@
"use client"
'use client';
import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"
import * as React from 'react';
import * as SwitchPrimitives from '@radix-ui/react-switch';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
@ -11,26 +11,26 @@ const Switch = React.forwardRef<
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
className={cn(
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full " +
"border-2 border-transparent transition-colors focus-visible:outline-none " +
"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 " +
"focus-visible:ring-offset-background disabled:cursor-not-allowed " +
"disabled:opacity-50 data-[state=checked]:bg-primary " +
"data-[state=unchecked]:bg-input",
className
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full ' +
'border-2 border-transparent transition-colors focus-visible:outline-none ' +
'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ' +
'focus-visible:ring-offset-background disabled:cursor-not-allowed ' +
'disabled:opacity-50 data-[state=checked]:bg-primary ' +
'data-[state=unchecked]:bg-input',
className,
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg " +
"ring-0 transition-transform data-[state=checked]:translate-x-5 " +
"data-[state=unchecked]:translate-x-0"
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ' +
'ring-0 transition-transform data-[state=checked]:translate-x-5 ' +
'data-[state=unchecked]:translate-x-0',
)}
/>
</SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName
));
Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch }
export { Switch };

64
src/components/ui/shadcn/table.tsx
View File

@ -1,28 +1,28 @@
import * as React from "react"
import * as React from 'react';
import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils';
const Table = React.forwardRef<
HTMLTableElement,
React.HTMLAttributes<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<div className='relative w-full overflow-auto'>
<table
ref={ref}
className={cn("w-full caption-bottom text-sm", className)}
className={cn('w-full caption-bottom text-sm', className)}
{...props}
/>
</div>
))
Table.displayName = "Table"
));
Table.displayName = 'Table';
const TableHeader = React.forwardRef<
HTMLTableSectionElement,
React.HTMLAttributes<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
TableHeader.displayName = "TableHeader"
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
));
TableHeader.displayName = 'TableHeader';
const TableBody = React.forwardRef<
HTMLTableSectionElement,
@ -30,11 +30,11 @@ const TableBody = React.forwardRef<
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
className={cn('[&_tr:last-child]:border-0', className)}
{...props}
/>
))
TableBody.displayName = "TableBody"
));
TableBody.displayName = 'TableBody';
const TableFooter = React.forwardRef<
HTMLTableSectionElement,
@ -43,13 +43,13 @@ const TableFooter = React.forwardRef<
<tfoot
ref={ref}
className={cn(
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
className
'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
className,
)}
{...props}
/>
))
TableFooter.displayName = "TableFooter"
));
TableFooter.displayName = 'TableFooter';
const TableRow = React.forwardRef<
HTMLTableRowElement,
@ -58,13 +58,13 @@ const TableRow = React.forwardRef<
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className
'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
className,
)}
{...props}
/>
))
TableRow.displayName = "TableRow"
));
TableRow.displayName = 'TableRow';
const TableHead = React.forwardRef<
HTMLTableCellElement,
@ -73,14 +73,14 @@ const TableHead = React.forwardRef<
<th
ref={ref}
className={cn(
"h-12 px-4 text-left align-middle font-medium " +
"text-muted-foreground [&:has([role=checkbox])]:pr-0",
className
'h-12 px-4 text-left align-middle font-medium ' +
'text-muted-foreground [&:has([role=checkbox])]:pr-0',
className,
)}
{...props}
/>
))
TableHead.displayName = "TableHead"
));
TableHead.displayName = 'TableHead';
const TableCell = React.forwardRef<
HTMLTableCellElement,
@ -88,11 +88,11 @@ const TableCell = React.forwardRef<
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
{...props}
/>
))
TableCell.displayName = "TableCell"
));
TableCell.displayName = 'TableCell';
const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
@ -100,11 +100,11 @@ const TableCaption = React.forwardRef<
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn("mt-4 text-sm text-muted-foreground", className)}
className={cn('mt-4 text-sm text-muted-foreground', className)}
{...props}
/>
))
TableCaption.displayName = "TableCaption"
));
TableCaption.displayName = 'TableCaption';
export {
Table,
@ -115,4 +115,4 @@ export {
TableRow,
TableCell,
TableCaption,
}
};

32
src/components/ui/shadcn/toaster.tsx
View File

@ -1,31 +1,31 @@
"use client"
import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"
'use client';
import { useTheme } from 'next-themes';
import { Toaster as Sonner } from 'sonner';
type ToasterProps = React.ComponentProps<typeof Sonner>
type ToasterProps = React.ComponentProps<typeof Sonner>;
const Toaster = ({ ...props }: ToasterProps) => {
const { theme = "system" } = useTheme()
const { theme = 'system' } = useTheme();
return (
<Sonner
theme={theme as ToasterProps["theme"]}
className="toaster group"
theme={theme as ToasterProps['theme']}
className='toaster group'
toastOptions={{
classNames: {
toast:
"group toast group-[.toaster]:bg-background " +
"group-[.toaster]:text-foreground " +
"group-[.toaster]:border-border group-[.toaster]:shadow-lg",
description: "group-[.toast]:text-muted-foreground",
'group toast group-[.toaster]:bg-background ' +
'group-[.toaster]:text-foreground ' +
'group-[.toaster]:border-border group-[.toaster]:shadow-lg',
description: 'group-[.toast]:text-muted-foreground',
actionButton:
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
cancelButton:
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
},
}}
{...props}
/>
)
}
);
};
export { Toaster }
export { Toaster };

36
src/components/ui/shadcn/toggle-group.tsx
View File

@ -1,16 +1,16 @@
"use client"
import * as React from "react"
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
import { type VariantProps } from "class-variance-authority"
import { cn } from "~/lib/utils"
import { toggleVariants } from "~/components/ui/shadcn/toggle"
'use client';
import * as React from 'react';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { type VariantProps } from 'class-variance-authority';
import { cn } from '~/lib/utils';
import { toggleVariants } from '~/components/ui/shadcn/toggle';
const ToggleGroupContext = React.createContext<
VariantProps<typeof toggleVariants>
>({
size: "default",
variant: "default",
})
size: 'default',
variant: 'default',
});
const ToggleGroup = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@ -19,23 +19,23 @@ const ToggleGroup = React.forwardRef<
>(({ className, variant, size, children, ...props }, ref) => (
<ToggleGroupPrimitive.Root
ref={ref}
className={cn("flex items-center justify-center gap-1", className)}
className={cn('flex items-center justify-center gap-1', className)}
{...props}
>
<ToggleGroupContext.Provider value={{ variant, size }}>
{children}
</ToggleGroupContext.Provider>
</ToggleGroupPrimitive.Root>
))
));
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
const ToggleGroupItem = React.forwardRef<
React.ElementRef<typeof ToggleGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
VariantProps<typeof toggleVariants>
>(({ className, children, variant, size, ...props }, ref) => {
const context = React.useContext(ToggleGroupContext)
const context = React.useContext(ToggleGroupContext);
return (
<ToggleGroupPrimitive.Item
@ -45,15 +45,15 @@ const ToggleGroupItem = React.forwardRef<
variant: context.variant ?? variant,
size: context.size ?? size,
}),
className
className,
)}
{...props}
>
{children}
</ToggleGroupPrimitive.Item>
)
})
);
});
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
export { ToggleGroup, ToggleGroupItem }
export { ToggleGroup, ToggleGroupItem };

46
src/components/ui/shadcn/toggle.tsx
View File

@ -1,35 +1,35 @@
"use client"
import * as React from "react"
import * as TogglePrimitive from "@radix-ui/react-toggle"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "~/lib/utils"
'use client';
import * as React from 'react';
import * as TogglePrimitive from '@radix-ui/react-toggle';
import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '~/lib/utils';
const toggleVariants = cva(
"inline-flex items-center justify-center rounded-md text-sm font-medium " +
"ring-offset-background transition-colors hover:bg-muted " +
"hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 " +
"focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none " +
"disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
'inline-flex items-center justify-center rounded-md text-sm font-medium ' +
'ring-offset-background transition-colors hover:bg-muted ' +
'hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 ' +
'focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none ' +
'disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
{
variants: {
variant: {
default: "bg-transparent",
default: 'bg-transparent',
outline:
"border border-input bg-transparent hover:bg-accent " +
"hover:text-accent-foreground",
'border border-input bg-transparent hover:bg-accent ' +
'hover:text-accent-foreground',
},
size: {
default: "h-10 px-3",
sm: "h-9 px-2.5",
lg: "h-11 px-5",
default: 'h-10 px-3',
sm: 'h-9 px-2.5',
lg: 'h-11 px-5',
},
},
defaultVariants: {
variant: "default",
size: "default",
variant: 'default',
size: 'default',
},
}
)
},
);
const Toggle = React.forwardRef<
React.ElementRef<typeof TogglePrimitive.Root>,
@ -41,8 +41,8 @@ const Toggle = React.forwardRef<
className={cn(toggleVariants({ variant, size, className }))}
{...props}
/>
))
));
Toggle.displayName = TogglePrimitive.Root.displayName
Toggle.displayName = TogglePrimitive.Root.displayName;
export { Toggle, toggleVariants }
export { Toggle, toggleVariants };

34
src/components/ui/shadcn/tooltip.tsx
View File

@ -1,11 +1,11 @@
"use client"
import * as React from "react"
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
import { cn } from "~/lib/utils"
'use client';
import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
import { cn } from '~/lib/utils';
const TooltipProvider = TooltipPrimitive.Provider
const Tooltip = TooltipPrimitive.Root
const TooltipTrigger = TooltipPrimitive.Trigger
const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
@ -15,16 +15,16 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 " +
"text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 " +
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 " +
"data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 " +
"data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 " +
"data-[side=top]:slide-in-from-bottom-2",
className
'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 ' +
'text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 ' +
'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 ' +
'data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 ' +
'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 ' +
'data-[side=top]:slide-in-from-bottom-2',
className,
)}
{...props}
/>
))
TooltipContent.displayName = TooltipPrimitive.Content.displayName
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };