mirror of
https://github.com/ahmadk953/tasko.git
synced 2025-04-30 18:59:37 +00:00
Formated Files
This commit is contained in:
Ahmad
parent
d5631b309a
commit
e768d9181f
138 changed files with 1829 additions and 1851 deletions
|
|
@ -1,8 +1,8 @@
|
|||
import { format } from "date-fns";
|
||||
import { AuditLog } from "@prisma/client";
|
||||
import { format } from 'date-fns';
|
||||
import { AuditLog } from '@prisma/client';
|
||||
|
||||
import { generateLogMessage } from "@/lib/generate-log-message";
|
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar";
|
||||
import { generateLogMessage } from '@/lib/generate-log-message';
|
||||
import { Avatar, AvatarImage } from '@/components/ui/avatar';
|
||||
|
||||
interface ActivityItemProps {
|
||||
data: AuditLog;
|
||||
|
|
@ -10,18 +10,18 @@ interface ActivityItemProps {
|
|||
|
||||
export const ActivityItem = ({ data }: ActivityItemProps) => {
|
||||
return (
|
||||
<li className="flex items-center gap-x-2">
|
||||
<Avatar className="h-8 w-8">
|
||||
<li className='flex items-center gap-x-2'>
|
||||
<Avatar className='h-8 w-8'>
|
||||
<AvatarImage src={data.userImage} />
|
||||
</Avatar>
|
||||
<div className="flex flex-col space-y-0.5">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<span className="font-semibold lowercase text-neutral-700">
|
||||
<div className='flex flex-col space-y-0.5'>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
<span className='font-semibold lowercase text-neutral-700'>
|
||||
{data.userName}
|
||||
</span>{" "}
|
||||
</span>{' '}
|
||||
{generateLogMessage(data)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
<p className='text-xs text-muted-foreground'>
|
||||
{format(new Date(data.createdAt), "MMM d, yyyy 'at' h:mm a")}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { XCircle } from "lucide-react";
|
||||
import { XCircle } from 'lucide-react';
|
||||
|
||||
interface FormErrorsProps {
|
||||
id: string;
|
||||
|
|
@ -11,15 +11,15 @@ export const FormErrors = ({ id, errors }: FormErrorsProps) => {
|
|||
return (
|
||||
<div
|
||||
id={`${id}-error`}
|
||||
aria-live="polite"
|
||||
className="mt-2 text-xs text-rose-500"
|
||||
aria-live='polite'
|
||||
className='mt-2 text-xs text-rose-500'
|
||||
>
|
||||
{errors?.[id]?.map((error: string) => (
|
||||
<div
|
||||
key={error}
|
||||
className="flex items-center font-medium p-2 border border-rose-500 bg-rose-500/10 rounded-sm"
|
||||
className='flex items-center rounded-sm border border-rose-500 bg-rose-500/10 p-2 font-medium'
|
||||
>
|
||||
<XCircle className="h-4 w-4 mr-2" />
|
||||
<XCircle className='mr-2 h-4 w-4' />
|
||||
{error}
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { forwardRef } from "react";
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { forwardRef } from 'react';
|
||||
import { useFormStatus } from 'react-dom';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { FormErrors } from "./form-errors";
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { FormErrors } from './form-errors';
|
||||
|
||||
interface FormInputProps {
|
||||
id: string;
|
||||
|
|
@ -32,7 +32,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
disabled,
|
||||
errors,
|
||||
className,
|
||||
defaultValue = "",
|
||||
defaultValue = '',
|
||||
onBlur,
|
||||
},
|
||||
ref
|
||||
|
|
@ -40,12 +40,12 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1">
|
||||
<div className='space-y-2'>
|
||||
<div className='space-y-1'>
|
||||
{label ? (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className="text-xs font-semibold text-neutral-700"
|
||||
className='text-xs font-semibold text-neutral-700'
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
|
|
@ -60,7 +60,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
placeholder={placeholder}
|
||||
type={type}
|
||||
disabled={pending ?? disabled}
|
||||
className={cn("text-sm px-2 py-1 h-7", className)}
|
||||
className={cn('h-7 px-2 py-1 text-sm', className)}
|
||||
aria-describedby={`${id}-error`}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -70,4 +70,4 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||
}
|
||||
);
|
||||
|
||||
FormInput.displayName = "FormInput";
|
||||
FormInput.displayName = 'FormInput';
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { Check, Loader2 } from "lucide-react";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useFormStatus } from 'react-dom';
|
||||
import { Check, Loader2 } from 'lucide-react';
|
||||
|
||||
import { unsplash } from "@/lib/unsplash";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { defaultImages } from "@/constants/images";
|
||||
import { FormErrors } from "./form-errors";
|
||||
import { unsplash } from '@/lib/unsplash';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { defaultImages } from '@/constants/images';
|
||||
import { FormErrors } from './form-errors';
|
||||
|
||||
interface FormPickerProps {
|
||||
id: string;
|
||||
|
|
@ -29,7 +29,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
const fetchImages = async () => {
|
||||
try {
|
||||
const result = await unsplash.photos.getRandom({
|
||||
collectionIds: ["317099"],
|
||||
collectionIds: ['317099'],
|
||||
count: 9,
|
||||
});
|
||||
|
||||
|
|
@ -37,7 +37,7 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
const newImages = result.response as Array<Record<string, any>>;
|
||||
setImages(newImages);
|
||||
} else {
|
||||
console.error("Failed to get images.");
|
||||
console.error('Failed to get images.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
|
@ -52,21 +52,21 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-6 flex items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 text-sky-700 animate-spin" />
|
||||
<div className='flex items-center justify-center p-6'>
|
||||
<Loader2 className='h-6 w-6 animate-spin text-sky-700' />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="grid grid-cols-3 gap-2 mb-2">
|
||||
<div className='relative'>
|
||||
<div className='mb-2 grid grid-cols-3 gap-2'>
|
||||
{images.map((image) => (
|
||||
<div
|
||||
key={image.id}
|
||||
className={cn(
|
||||
"cursor-pointer relative aspect-video group hover:opacity-75 transition bg-muted",
|
||||
pending && "opacity-50 hover:opacity-50 cursor-auto"
|
||||
'group relative aspect-video cursor-pointer bg-muted transition hover:opacity-75',
|
||||
pending && 'cursor-auto opacity-50 hover:opacity-50'
|
||||
)}
|
||||
onClick={() => {
|
||||
if (pending) return;
|
||||
|
|
@ -74,36 +74,36 @@ export const FormPicker = ({ id, errors }: FormPickerProps) => {
|
|||
}}
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
type='radio'
|
||||
id={id}
|
||||
name={id}
|
||||
className="hidden"
|
||||
className='hidden'
|
||||
checked={selectedImageId === image.id}
|
||||
disabled={pending}
|
||||
value={`${image.id}|${image.urls.thumb}|${image.urls.full}|${image.links.html}|${image.user.name}`}
|
||||
/>
|
||||
<Image
|
||||
src={image.urls.thumb}
|
||||
alt="Unsplash image"
|
||||
className="object-cover rounded-sm"
|
||||
alt='Unsplash image'
|
||||
className='rounded-sm object-cover'
|
||||
fill
|
||||
/>
|
||||
{selectedImageId === image.id && (
|
||||
<div className="absolute inset-y-0 h-full w-full bg-black/30 flex items-center justify-center">
|
||||
<Check className="h-4 w-4 text-white" />
|
||||
<div className='absolute inset-y-0 flex h-full w-full items-center justify-center bg-black/30'>
|
||||
<Check className='h-4 w-4 text-white' />
|
||||
</div>
|
||||
)}
|
||||
<Link
|
||||
href={image.links.html}
|
||||
target="_blank"
|
||||
className="opacity-0 group-hover:opacity-100 absolute bottom-0 w-full text-[10px] truncate text-white hover:underline p-1 bg-black/50"
|
||||
target='_blank'
|
||||
className='absolute bottom-0 w-full truncate bg-black/50 p-1 text-[10px] text-white opacity-0 hover:underline group-hover:opacity-100'
|
||||
>
|
||||
{image.user.name}
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<FormErrors id="image" errors={errors} />
|
||||
<FormErrors id='image' errors={errors} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { ElementRef, useRef } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { ElementRef, useRef } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
import {
|
||||
Popover,
|
||||
PopoverClose,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { createBoard } from "@/actions/create-board";
|
||||
import { Button } from "@/components//ui/button";
|
||||
import { useProModal } from "@/hooks/use-pro-modal";
|
||||
} from '@/components/ui/popover';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { createBoard } from '@/actions/create-board';
|
||||
import { Button } from '@/components//ui/button';
|
||||
import { useProModal } from '@/hooks/use-pro-modal';
|
||||
|
||||
import { FormInput } from "./form-input";
|
||||
import { FormSubmit } from "./form-submit";
|
||||
import { FormPicker } from "./form-picker";
|
||||
import { FormInput } from './form-input';
|
||||
import { FormSubmit } from './form-submit';
|
||||
import { FormPicker } from './form-picker';
|
||||
|
||||
interface FormPopoverProps {
|
||||
children: React.ReactNode;
|
||||
side?: "left" | "right" | "top" | "bottom";
|
||||
align?: "center" | "start" | "end";
|
||||
side?: 'left' | 'right' | 'top' | 'bottom';
|
||||
align?: 'center' | 'start' | 'end';
|
||||
sideOffset?: number;
|
||||
}
|
||||
|
||||
export const FormPopover = ({
|
||||
children,
|
||||
side = "bottom",
|
||||
side = 'bottom',
|
||||
align,
|
||||
sideOffset = 0,
|
||||
}: FormPopoverProps) => {
|
||||
const proModal = useProModal();
|
||||
const router = useRouter();
|
||||
const closeRef = useRef<ElementRef<"button">>(null);
|
||||
const closeRef = useRef<ElementRef<'button'>>(null);
|
||||
|
||||
const { execute, fieldErrors } = useAction(createBoard, {
|
||||
onSuccess: (data) => {
|
||||
toast.success("Board created");
|
||||
toast.success('Board created');
|
||||
closeRef.current?.click();
|
||||
router.push(`/board/${data.id}`);
|
||||
},
|
||||
|
|
@ -50,8 +50,8 @@ export const FormPopover = ({
|
|||
});
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const image = formData.get("image") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const image = formData.get('image') as string;
|
||||
|
||||
execute({ title, image });
|
||||
};
|
||||
|
|
@ -61,32 +61,32 @@ export const FormPopover = ({
|
|||
<PopoverTrigger asChild>{children}</PopoverTrigger>
|
||||
<PopoverContent
|
||||
align={align}
|
||||
className="w-80 pt-3"
|
||||
className='w-80 pt-3'
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<div className="text-sm font-medium text-center text-neutral-600 pb-4">
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600'>
|
||||
Create board
|
||||
</div>
|
||||
<PopoverClose ref={closeRef} asChild>
|
||||
<Button
|
||||
className="h-auto w-auto p-2 absolute top-2 right-2 text-neutral-600"
|
||||
variant="ghost"
|
||||
className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
|
||||
variant='ghost'
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
<X className='h-4 w-4' />
|
||||
</Button>
|
||||
</PopoverClose>
|
||||
<form action={onSubmit} className="space-y-4">
|
||||
<div className="space-y-4">
|
||||
<FormPicker id="image" errors={fieldErrors} />
|
||||
<form action={onSubmit} className='space-y-4'>
|
||||
<div className='space-y-4'>
|
||||
<FormPicker id='image' errors={fieldErrors} />
|
||||
<FormInput
|
||||
id="title"
|
||||
label="Board Title"
|
||||
type="text"
|
||||
id='title'
|
||||
label='Board Title'
|
||||
type='text'
|
||||
errors={fieldErrors}
|
||||
/>
|
||||
</div>
|
||||
<FormSubmit className="w-full">Create</FormSubmit>
|
||||
<FormSubmit className='w-full'>Create</FormSubmit>
|
||||
</form>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
"Use client";
|
||||
'Use client';
|
||||
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { useFormStatus } from 'react-dom';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
interface FormSubmitProps {
|
||||
children: React.ReactNode;
|
||||
disabled?: boolean;
|
||||
className?: string;
|
||||
variant?:
|
||||
| "default"
|
||||
| "destructive"
|
||||
| "outline"
|
||||
| "secondary"
|
||||
| "ghost"
|
||||
| "link"
|
||||
| "primary";
|
||||
| 'default'
|
||||
| 'destructive'
|
||||
| 'outline'
|
||||
| 'secondary'
|
||||
| 'ghost'
|
||||
| 'link'
|
||||
| 'primary';
|
||||
}
|
||||
|
||||
export const FormSubmit = ({
|
||||
children,
|
||||
disabled,
|
||||
className,
|
||||
variant = "primary",
|
||||
variant = 'primary',
|
||||
}: FormSubmitProps) => {
|
||||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<Button
|
||||
disabled={pending || disabled}
|
||||
type="submit"
|
||||
type='submit'
|
||||
variant={variant}
|
||||
size="sm"
|
||||
size='sm'
|
||||
className={cn(className)}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useFormStatus } from "react-dom";
|
||||
import { KeyboardEventHandler, forwardRef } from "react";
|
||||
import { useFormStatus } from 'react-dom';
|
||||
import { KeyboardEventHandler, forwardRef } from 'react';
|
||||
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
import { FormErrors } from "./form-errors";
|
||||
import { FormErrors } from './form-errors';
|
||||
|
||||
interface FormTextareaProps {
|
||||
id: string;
|
||||
|
|
@ -43,12 +43,12 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
|
|||
const { pending } = useFormStatus();
|
||||
|
||||
return (
|
||||
<div className="space-y-2 w-full">
|
||||
<div className="space-y-1 w-full">
|
||||
<div className='w-full space-y-2'>
|
||||
<div className='w-full space-y-1'>
|
||||
{label ? (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className="text-xs font-semibold text-neutral-700"
|
||||
className='text-xs font-semibold text-neutral-700'
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
|
|
@ -64,7 +64,7 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
|
|||
id={id}
|
||||
disabled={pending || disabled}
|
||||
className={cn(
|
||||
"resize-none focus-visible:ring-0 focus-visible:ring-offset-0 ring-0 focus:ring-0 outline-none shadow-sm",
|
||||
'resize-none shadow-sm outline-none ring-0 focus:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0',
|
||||
className
|
||||
)}
|
||||
aria-describedby={`${id}-error`}
|
||||
|
|
@ -77,4 +77,4 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
|
|||
}
|
||||
);
|
||||
|
||||
FormTextarea.displayName = "FormTextarea";
|
||||
FormTextarea.displayName = 'FormTextarea';
|
||||
|
|
|
|||
|
|
@ -3,19 +3,19 @@ import {
|
|||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
} from '@/components/ui/tooltip';
|
||||
|
||||
interface HintProps {
|
||||
children: React.ReactNode;
|
||||
description: string;
|
||||
side?: "left" | "right" | "top" | "bottom";
|
||||
side?: 'left' | 'right' | 'top' | 'bottom';
|
||||
sideOffset?: number;
|
||||
}
|
||||
|
||||
export const Hint = ({
|
||||
children,
|
||||
description,
|
||||
side = "bottom",
|
||||
side = 'bottom',
|
||||
sideOffset = 0,
|
||||
}: HintProps) => {
|
||||
return (
|
||||
|
|
@ -25,7 +25,7 @@ export const Hint = ({
|
|||
<TooltipContent
|
||||
sideOffset={sideOffset}
|
||||
side={side}
|
||||
className="text-xs max-w-[220px] break-words"
|
||||
className='max-w-[220px] break-words text-xs'
|
||||
>
|
||||
{description}
|
||||
</TooltipContent>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
|
||||
export const Logo = () => {
|
||||
return (
|
||||
<Link href="/">
|
||||
<div className="hover:opacity-75 transition items-center gap-x-2 hidden md:flex">
|
||||
<Image src="/logo-transparent.svg" alt="logo" height={100} width={100} />
|
||||
<Link href='/'>
|
||||
<div className='hidden items-center gap-x-2 transition hover:opacity-75 md:flex'>
|
||||
<Image
|
||||
src='/logo-transparent.svg'
|
||||
alt='logo'
|
||||
height={100}
|
||||
width={100}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { Copy, Trash } from "lucide-react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { toast } from "sonner";
|
||||
import { Copy, Trash } from 'lucide-react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { deleteCard } from "@/actions/delete-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { copyCard } from "@/actions/copy-card";
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { deleteCard } from '@/actions/delete-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { copyCard } from '@/actions/copy-card';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { useCardModal } from "@/hooks/use-card-modal";
|
||||
import { CardWithList } from '@/types';
|
||||
import { useCardModal } from '@/hooks/use-card-modal';
|
||||
|
||||
interface ActionsProps {
|
||||
data: CardWithList;
|
||||
|
|
@ -66,26 +66,26 @@ export const Actions = ({ data }: ActionsProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2 mt-2">
|
||||
<p className="text-xs font-semibold">Actions</p>
|
||||
<div className='mt-2 space-y-2'>
|
||||
<p className='text-xs font-semibold'>Actions</p>
|
||||
<Button
|
||||
onClick={onCopy}
|
||||
disabled={isLoadingCopy}
|
||||
variant="gray"
|
||||
className="w-full justify-start"
|
||||
size="inline"
|
||||
variant='gray'
|
||||
className='w-full justify-start'
|
||||
size='inline'
|
||||
>
|
||||
<Copy className="h-4 w-4 mr-2" />
|
||||
<Copy className='mr-2 h-4 w-4' />
|
||||
Copy
|
||||
</Button>
|
||||
<Button
|
||||
onClick={onDelete}
|
||||
disabled={isLoadingDelete}
|
||||
variant="gray"
|
||||
className="w-full justify-start text-destructive"
|
||||
size="inline"
|
||||
variant='gray'
|
||||
className='w-full justify-start text-destructive'
|
||||
size='inline'
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
<Trash className='mr-2 h-4 w-4' />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -94,10 +94,10 @@ export const Actions = ({ data }: ActionsProps) => {
|
|||
|
||||
Actions.Skeleton = function ActionsSkeleton() {
|
||||
return (
|
||||
<div className="space-y-2 mt-2">
|
||||
<Skeleton className="w-20 h-4 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-8 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-8 bg-neutral-200" />
|
||||
<div className='mt-2 space-y-2'>
|
||||
<Skeleton className='h-4 w-20 bg-neutral-200' />
|
||||
<Skeleton className='h-8 w-full bg-neutral-200' />
|
||||
<Skeleton className='h-8 w-full bg-neutral-200' />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { AuditLog } from "@prisma/client";
|
||||
import { ActivityIcon } from "lucide-react";
|
||||
import { AuditLog } from '@prisma/client';
|
||||
import { ActivityIcon } from 'lucide-react';
|
||||
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { ActivityItem } from "@/components/activity-item";
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ActivityItem } from '@/components/activity-item';
|
||||
|
||||
interface ActivityProps {
|
||||
items: AuditLog[];
|
||||
|
|
@ -12,11 +12,11 @@ interface ActivityProps {
|
|||
|
||||
export const Activity = ({ items }: ActivityProps) => {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<ActivityIcon className="h-5 w-5 mt-0.5 text-neutral-700" />
|
||||
<div className="w-full">
|
||||
<p className="font-semibold text-neutral-700 mb-2">Activity</p>
|
||||
<ol className="mt-2 space-y-4">
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<ActivityIcon className='mt-0.5 h-5 w-5 text-neutral-700' />
|
||||
<div className='w-full'>
|
||||
<p className='mb-2 font-semibold text-neutral-700'>Activity</p>
|
||||
<ol className='mt-2 space-y-4'>
|
||||
{items.map((item) => (
|
||||
<ActivityItem key={item.id} data={item} />
|
||||
))}
|
||||
|
|
@ -28,11 +28,11 @@ export const Activity = ({ items }: ActivityProps) => {
|
|||
|
||||
Activity.Skeleton = function ActivitySkeleton() {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<Skeleton className="h-6 w-6 bg-neutral-200" />
|
||||
<div className="w-full">
|
||||
<Skeleton className="w-24 h-6 mb-2 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-10 bg-neutral-200" />
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<Skeleton className='h-6 w-6 bg-neutral-200' />
|
||||
<div className='w-full'>
|
||||
<Skeleton className='mb-2 h-6 w-24 bg-neutral-200' />
|
||||
<Skeleton className='h-10 w-full bg-neutral-200' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEventListener, useOnClickOutside } from "usehooks-ts";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useState, ElementRef, useRef } from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import { AlignLeft } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useEventListener, useOnClickOutside } from 'usehooks-ts';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useState, ElementRef, useRef } from 'react';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { AlignLeft } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { FormTextarea } from "@/components/form/form-textarea";
|
||||
import { FormSubmit } from "@/components/form/form-submit";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { updateCard } from "@/actions/update-card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { FormTextarea } from '@/components/form/form-textarea';
|
||||
import { FormSubmit } from '@/components/form/form-submit';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { updateCard } from '@/actions/update-card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { CardWithList } from '@/types';
|
||||
|
||||
interface DescriptionProps {
|
||||
data: CardWithList;
|
||||
|
|
@ -26,8 +26,8 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const textareaRef = useRef<ElementRef<"textarea">>(null);
|
||||
const formRef = useRef<ElementRef<"form">>(null);
|
||||
const textareaRef = useRef<ElementRef<'textarea'>>(null);
|
||||
const formRef = useRef<ElementRef<'form'>>(null);
|
||||
|
||||
const enaleEditing = () => {
|
||||
setIsEditing(true);
|
||||
|
|
@ -41,18 +41,18 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
};
|
||||
|
||||
const onKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") {
|
||||
if (e.key === 'Escape') {
|
||||
disableEditing();
|
||||
}
|
||||
};
|
||||
|
||||
useEventListener("keydown", onKeyDown);
|
||||
useEventListener('keydown', onKeyDown);
|
||||
useOnClickOutside(formRef, disableEditing);
|
||||
|
||||
const { execute, fieldErrors } = useAction(updateCard, {
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ["card", data.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["card-logs", data.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ['card', data.id] });
|
||||
queryClient.invalidateQueries({ queryKey: ['card-logs', data.id] });
|
||||
toast.success(`Card "${data.title}" updated`);
|
||||
disableEditing();
|
||||
},
|
||||
|
|
@ -62,7 +62,7 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
});
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const description = formData.get("description") as string;
|
||||
const description = formData.get('description') as string;
|
||||
const boardId = params.boardId as string;
|
||||
|
||||
execute({
|
||||
|
|
@ -73,27 +73,27 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<AlignLeft className="w-5 h-5 mt-0.5 text-neutral-700" />
|
||||
<div className="w-full">
|
||||
<p className="font-semibold text-neutral-700 mb-2">Description</p>
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<AlignLeft className='mt-0.5 h-5 w-5 text-neutral-700' />
|
||||
<div className='w-full'>
|
||||
<p className='mb-2 font-semibold text-neutral-700'>Description</p>
|
||||
{isEditing ? (
|
||||
<form ref={formRef} className="space-y-2" action={onSubmit}>
|
||||
<form ref={formRef} className='space-y-2' action={onSubmit}>
|
||||
<FormTextarea
|
||||
id="description"
|
||||
id='description'
|
||||
ref={textareaRef}
|
||||
className="w-full mt-2"
|
||||
placeholder="Add a more detailed description..."
|
||||
className='mt-2 w-full'
|
||||
placeholder='Add a more detailed description...'
|
||||
defaultValue={data.description ?? undefined}
|
||||
errors={fieldErrors}
|
||||
/>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div className='flex items-center gap-x-2'>
|
||||
<FormSubmit>Save</FormSubmit>
|
||||
<Button
|
||||
type="button"
|
||||
type='button'
|
||||
onClick={disableEditing}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
size='sm'
|
||||
variant='ghost'
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
|
@ -102,10 +102,10 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
) : (
|
||||
<div
|
||||
onClick={enaleEditing}
|
||||
role="button"
|
||||
className="min-h-[78px] bg-neutral-200 text-sm font-medium py-3 px-3.5 rounded-md"
|
||||
role='button'
|
||||
className='min-h-[78px] rounded-md bg-neutral-200 px-3.5 py-3 text-sm font-medium'
|
||||
>
|
||||
{data.description ?? "Add a more detailed description..."}
|
||||
{data.description ?? 'Add a more detailed description...'}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -115,11 +115,11 @@ export const Description = ({ data }: DescriptionProps) => {
|
|||
|
||||
Description.Skeleton = function DescriptionSkeleton() {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 w-full">
|
||||
<Skeleton className="h-6 w-6 bg-neutral-200" />
|
||||
<div className="w-full">
|
||||
<Skeleton className="h-6 w-24 mb-2 bg-neutral-200" />
|
||||
<Skeleton className="w-full h-[78px] bg-neutral-200" />
|
||||
<div className='flex w-full items-start gap-x-3'>
|
||||
<Skeleton className='h-6 w-6 bg-neutral-200' />
|
||||
<div className='w-full'>
|
||||
<Skeleton className='mb-2 h-6 w-24 bg-neutral-200' />
|
||||
<Skeleton className='h-[78px] w-full bg-neutral-200' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useRef, ElementRef, useState } from "react";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Layout } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useRef, ElementRef, useState } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { Layout } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { updateCard } from "@/actions/update-card";
|
||||
import { FormInput } from "@/components/form/form-input";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { CardWithList } from '@/types';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { updateCard } from '@/actions/update-card';
|
||||
import { FormInput } from '@/components/form/form-input';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
|
||||
interface HeaderProps {
|
||||
data: CardWithList;
|
||||
|
|
@ -23,11 +23,11 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
const { execute } = useAction(updateCard, {
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["card", data.id],
|
||||
queryKey: ['card', data.id],
|
||||
});
|
||||
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["card-logs", data.id],
|
||||
queryKey: ['card-logs', data.id],
|
||||
});
|
||||
|
||||
toast.success(`Card renamed to "${data.title}"`);
|
||||
|
|
@ -38,7 +38,7 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
},
|
||||
});
|
||||
|
||||
const inputRef = useRef<ElementRef<"input">>(null);
|
||||
const inputRef = useRef<ElementRef<'input'>>(null);
|
||||
|
||||
const [title, setTitle] = useState(data.title);
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
};
|
||||
|
||||
const onSubmit = (formData: FormData) => {
|
||||
const title = formData.get("title") as string;
|
||||
const title = formData.get('title') as string;
|
||||
const boardId = params.boardId as string;
|
||||
|
||||
if (title === data.title) return;
|
||||
|
|
@ -60,20 +60,20 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 mb-6 w-full">
|
||||
<Layout className="h-5 w-5 mt-1 text-neutral-700" />
|
||||
<div className="w-full">
|
||||
<div className='mb-6 flex w-full items-start gap-x-3'>
|
||||
<Layout className='mt-1 h-5 w-5 text-neutral-700' />
|
||||
<div className='w-full'>
|
||||
<form action={onSubmit}>
|
||||
<FormInput
|
||||
id="title"
|
||||
id='title'
|
||||
ref={inputRef}
|
||||
onBlur={onBlur}
|
||||
defaultValue={title}
|
||||
className="font-semi-bold text-xl px-1 text-neutral-700 bg-transparent border-transparent relative -left-1 w-[95%] focus-visible:bg-white focus-visible:border-input mb-0.5 truncate"
|
||||
className='font-semi-bold relative -left-1 mb-0.5 w-[95%] truncate border-transparent bg-transparent px-1 text-xl text-neutral-700 focus-visible:border-input focus-visible:bg-white'
|
||||
/>
|
||||
</form>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
in list <span className="underline">{data.list.title}</span>
|
||||
<p className='text-sm text-muted-foreground'>
|
||||
in list <span className='underline'>{data.list.title}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,11 +82,11 @@ export const Header = ({ data }: HeaderProps) => {
|
|||
|
||||
Header.Skeleton = function HeaderSkelton() {
|
||||
return (
|
||||
<div className="flex items-start gap-x-3 mb-6">
|
||||
<Skeleton className="h-6 w-6 mt-1 bg-neutral-200" />
|
||||
<div className='mb-6 flex items-start gap-x-3'>
|
||||
<Skeleton className='mt-1 h-6 w-6 bg-neutral-200' />
|
||||
<div>
|
||||
<Skeleton className="w-24 h-6 mb-1 bg-neutral-200" />
|
||||
<Skeleton className="w-12 h-4 bg-neutral-200" />
|
||||
<Skeleton className='mb-1 h-6 w-24 bg-neutral-200' />
|
||||
<Skeleton className='h-4 w-12 bg-neutral-200' />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { CardWithList } from "@/types";
|
||||
import { fetcher } from "@/lib/fetcher";
|
||||
import { AuditLog } from "@prisma/client";
|
||||
import { useCardModal } from "@/hooks/use-card-modal";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import { CardWithList } from '@/types';
|
||||
import { fetcher } from '@/lib/fetcher';
|
||||
import { AuditLog } from '@prisma/client';
|
||||
import { useCardModal } from '@/hooks/use-card-modal';
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
|
||||
import { Header } from "./header";
|
||||
import { Description } from "./description";
|
||||
import { Actions } from "./actions";
|
||||
import { Activity } from "./activity";
|
||||
import { Header } from './header';
|
||||
import { Description } from './description';
|
||||
import { Actions } from './actions';
|
||||
import { Activity } from './activity';
|
||||
|
||||
export const CardModal = () => {
|
||||
const id = useCardModal((state) => state.id);
|
||||
|
|
@ -19,12 +19,12 @@ export const CardModal = () => {
|
|||
const onClose = useCardModal((state) => state.onClose);
|
||||
|
||||
const { data: cardData } = useQuery<CardWithList>({
|
||||
queryKey: ["card", id],
|
||||
queryKey: ['card', id],
|
||||
queryFn: () => fetcher(`/api/cards/${id}`),
|
||||
});
|
||||
|
||||
const { data: auditLogsData } = useQuery<AuditLog[]>({
|
||||
queryKey: ["card-logs", id],
|
||||
queryKey: ['card-logs', id],
|
||||
queryFn: () => fetcher(`/api/cards/${id}/logs`),
|
||||
});
|
||||
|
||||
|
|
@ -32,9 +32,9 @@ export const CardModal = () => {
|
|||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent>
|
||||
{!cardData ? <Header.Skeleton /> : <Header data={cardData} />}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 md:gap-4">
|
||||
<div className="col-span-3">
|
||||
<div className="w-full space-y-6">
|
||||
<div className='grid grid-cols-1 md:grid-cols-4 md:gap-4'>
|
||||
<div className='col-span-3'>
|
||||
<div className='w-full space-y-6'>
|
||||
{!cardData ? (
|
||||
<Description.Skeleton />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import Image from "next/image";
|
||||
import { toast } from "sonner";
|
||||
import Image from 'next/image';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import { useProModal } from "@/hooks/use-pro-modal";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useAction } from "@/hooks/use-action";
|
||||
import { stripeRedirect } from "@/actions/stripe-redirect";
|
||||
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
||||
import { useProModal } from '@/hooks/use-pro-modal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useAction } from '@/hooks/use-action';
|
||||
import { stripeRedirect } from '@/actions/stripe-redirect';
|
||||
|
||||
export const ProModal = () => {
|
||||
const proModal = useProModal();
|
||||
|
|
@ -27,30 +27,30 @@ export const ProModal = () => {
|
|||
|
||||
return (
|
||||
<Dialog open={proModal.isOpen} onOpenChange={proModal.onClose}>
|
||||
<DialogContent className="max-w-md p-0 overflow-hidden">
|
||||
<div className="aspect-video relative flex items-center justify-center">
|
||||
<Image src="/hero.svg" alt="hero" className="object-cover" fill />
|
||||
<DialogContent className='max-w-md overflow-hidden p-0'>
|
||||
<div className='relative flex aspect-video items-center justify-center'>
|
||||
<Image src='/hero.svg' alt='hero' className='object-cover' fill />
|
||||
</div>
|
||||
<div className="text-neutral-700 mx-auto space-y-6 p-6">
|
||||
<h1 className="font-semibold text-xl">Upgrade to Tasko Pro Today!</h1>
|
||||
<p className="text-xs font-semibold text-neutral-600">
|
||||
<div className='mx-auto space-y-6 p-6 text-neutral-700'>
|
||||
<h1 className='text-xl font-semibold'>Upgrade to Tasko Pro Today!</h1>
|
||||
<p className='text-xs font-semibold text-neutral-600'>
|
||||
Explore the best of Tasko
|
||||
</p>
|
||||
<div className="pl-3">
|
||||
<ul className="text-sm list-disc">
|
||||
<div className='pl-3'>
|
||||
<ul className='list-disc text-sm'>
|
||||
<li>Unlimited boards</li>
|
||||
<li className="italic">Advanced Checklists (Coming Soon)</li>
|
||||
<li className="italic">
|
||||
<li className='italic'>Advanced Checklists (Coming Soon)</li>
|
||||
<li className='italic'>
|
||||
Admin and Security Features (Coming Soon)
|
||||
</li>
|
||||
<li className="italic">And More to Come Soon!</li>
|
||||
<li className='italic'>And More to Come Soon!</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Button
|
||||
disabled={isLoading}
|
||||
onClick={onClick}
|
||||
className="w-full"
|
||||
variant="primary"
|
||||
className='w-full'
|
||||
variant='primary'
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { CardModal } from "@/components/modals/card-modal";
|
||||
import { ProModal } from "@/components/modals/pro-modal";
|
||||
import { CardModal } from '@/components/modals/card-modal';
|
||||
import { ProModal } from '@/components/modals/pro-modal';
|
||||
|
||||
export const ModalProvider = () => {
|
||||
const [isMounted, setIsMounted] = useState(false);
|
||||
|
|
@ -19,5 +19,5 @@ export const ModalProvider = () => {
|
|||
<CardModal />
|
||||
<ProModal />
|
||||
</>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,18 +1,12 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { useState } from 'react';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
|
||||
export const QueryProvider = ({
|
||||
children
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) => {
|
||||
export const QueryProvider = ({ children }: { children: React.ReactNode }) => {
|
||||
const [queryClient] = useState(() => new QueryClient());
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
</QueryClientProvider>
|
||||
)
|
||||
}
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import * as AccordionPrimitive from "@radix-ui/react-accordion"
|
||||
import { ChevronDown } from "lucide-react"
|
||||
import * as React from 'react';
|
||||
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Accordion = AccordionPrimitive.Root
|
||||
const Accordion = AccordionPrimitive.Root;
|
||||
|
||||
const AccordionItem = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Item>,
|
||||
|
|
@ -14,31 +14,31 @@ const AccordionItem = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<AccordionPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn("border-b", className)}
|
||||
className={cn('border-b', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AccordionItem.displayName = "AccordionItem"
|
||||
));
|
||||
AccordionItem.displayName = 'AccordionItem';
|
||||
|
||||
const AccordionTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Header className='flex'>
|
||||
<AccordionPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
||||
'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
|
||||
<ChevronDown className='h-4 w-4 shrink-0 transition-transform duration-200' />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
))
|
||||
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
|
||||
));
|
||||
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
||||
|
||||
const AccordionContent = React.forwardRef<
|
||||
React.ElementRef<typeof AccordionPrimitive.Content>,
|
||||
|
|
@ -46,13 +46,13 @@ const AccordionContent = React.forwardRef<
|
|||
>(({ className, children, ...props }, ref) => (
|
||||
<AccordionPrimitive.Content
|
||||
ref={ref}
|
||||
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
className='overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pb-4 pt-0", className)}>{children}</div>
|
||||
<div className={cn('pb-4 pt-0', className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
))
|
||||
));
|
||||
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName
|
||||
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import * as AvatarPrimitive from "@radix-ui/react-avatar"
|
||||
import * as React from 'react';
|
||||
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Avatar = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Root>,
|
||||
|
|
@ -12,13 +12,13 @@ const Avatar = React.forwardRef<
|
|||
<AvatarPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
|
||||
'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Avatar.displayName = AvatarPrimitive.Root.displayName
|
||||
));
|
||||
Avatar.displayName = AvatarPrimitive.Root.displayName;
|
||||
|
||||
const AvatarImage = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Image>,
|
||||
|
|
@ -26,11 +26,11 @@ const AvatarImage = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<AvatarPrimitive.Image
|
||||
ref={ref}
|
||||
className={cn("aspect-square h-full w-full", className)}
|
||||
className={cn('aspect-square h-full w-full', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AvatarImage.displayName = AvatarPrimitive.Image.displayName
|
||||
));
|
||||
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
|
||||
|
||||
const AvatarFallback = React.forwardRef<
|
||||
React.ElementRef<typeof AvatarPrimitive.Fallback>,
|
||||
|
|
@ -39,12 +39,12 @@ const AvatarFallback = React.forwardRef<
|
|||
<AvatarPrimitive.Fallback
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-full w-full items-center justify-center rounded-full bg-muted",
|
||||
'flex h-full w-full items-center justify-center rounded-full bg-muted',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
|
||||
));
|
||||
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
|
||||
|
||||
export { Avatar, AvatarImage, AvatarFallback }
|
||||
export { Avatar, AvatarImage, AvatarFallback };
|
||||
|
|
|
|||
|
|
@ -1,38 +1,38 @@
|
|||
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",
|
||||
primary: "bg-sky-700 text-primary-foreground hover:bg-sky-700/90",
|
||||
transparent: "bg-transparent text-white hover:bg-white/20",
|
||||
gray: "bg-neutral-200 text-secondary-foreground hover:bg-neutral-300",
|
||||
'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',
|
||||
primary: 'bg-sky-700 text-primary-foreground hover:bg-sky-700/90',
|
||||
transparent: 'bg-transparent text-white hover:bg-white/20',
|
||||
gray: 'bg-neutral-200 text-secondary-foreground hover:bg-neutral-300',
|
||||
},
|
||||
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",
|
||||
inline: "h-auto px-2 py-1.5 text-sm",
|
||||
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',
|
||||
inline: 'h-auto px-2 py-1.5 text-sm',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
variant: 'default',
|
||||
size: 'default',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
@ -45,7 +45,7 @@ export interface ButtonProps
|
|||
|
||||
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 }))}
|
||||
|
|
@ -55,6 +55,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
Button.displayName = 'Button';
|
||||
|
||||
export { Button, buttonVariants };
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
"use client";
|
||||
'use client';
|
||||
|
||||
import * as React from "react";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { X } from "lucide-react";
|
||||
import * as React from 'react';
|
||||
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Dialog = DialogPrimitive.Root;
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ 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",
|
||||
'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}
|
||||
|
|
@ -38,15 +38,15 @@ const DialogContent = React.forwardRef<
|
|||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-3xl 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",
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-3xl 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 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>
|
||||
<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>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
|
|
@ -59,13 +59,13 @@ const DialogHeader = ({
|
|||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||
'flex flex-col space-y-1.5 text-center sm:text-left',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
DialogHeader.displayName = "DialogHeader";
|
||||
DialogHeader.displayName = 'DialogHeader';
|
||||
|
||||
const DialogFooter = ({
|
||||
className,
|
||||
|
|
@ -73,13 +73,13 @@ const DialogFooter = ({
|
|||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
'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>,
|
||||
|
|
@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef<
|
|||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"text-lg font-semibold leading-none tracking-tight",
|
||||
'text-lg font-semibold leading-none tracking-tight',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
|
@ -102,7 +102,7 @@ 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}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react"
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface InputProps
|
||||
extends React.InputHTMLAttributes<HTMLInputElement> {}
|
||||
|
|
@ -11,15 +11,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
|||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"flex h-10 w-full rounded-sm 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-0 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
'flex h-10 w-full rounded-sm 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-0 disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
)
|
||||
Input.displayName = "Input"
|
||||
);
|
||||
Input.displayName = 'Input';
|
||||
|
||||
export { Input }
|
||||
export { Input };
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
"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>,
|
||||
|
|
@ -20,7 +20,7 @@ const Label = React.forwardRef<
|
|||
className={cn(labelVariants(), className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
Label.displayName = LabelPrimitive.Root.displayName
|
||||
));
|
||||
Label.displayName = LabelPrimitive.Root.displayName;
|
||||
|
||||
export { Label }
|
||||
export { Label };
|
||||
|
|
|
|||
|
|
@ -1,33 +1,33 @@
|
|||
"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 PopoverClose = PopoverPrimitive.Close
|
||||
const PopoverClose = PopoverPrimitive.Close;
|
||||
|
||||
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",
|
||||
'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, PopoverClose }
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverClose };
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
import * as React from 'react';
|
||||
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Separator = React.forwardRef<
|
||||
React.ElementRef<typeof SeparatorPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
|
||||
>(
|
||||
(
|
||||
{ className, orientation = "horizontal", decorative = true, ...props },
|
||||
{ className, orientation = 'horizontal', decorative = true, ...props },
|
||||
ref
|
||||
) => (
|
||||
<SeparatorPrimitive.Root
|
||||
|
|
@ -18,14 +18,14 @@ const Separator = React.forwardRef<
|
|||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"shrink-0 bg-border",
|
||||
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
||||
'shrink-0 bg-border',
|
||||
orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
)
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName
|
||||
);
|
||||
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
||||
|
||||
export { Separator }
|
||||
export { Separator };
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import * as SheetPrimitive from "@radix-ui/react-dialog"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
import { X } from "lucide-react"
|
||||
import * as React from 'react';
|
||||
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { X } from 'lucide-react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const Sheet = SheetPrimitive.Root
|
||||
const Sheet = SheetPrimitive.Root;
|
||||
|
||||
const SheetTrigger = SheetPrimitive.Trigger
|
||||
const SheetTrigger = SheetPrimitive.Trigger;
|
||||
|
||||
const SheetClose = SheetPrimitive.Close
|
||||
const SheetClose = SheetPrimitive.Close;
|
||||
|
||||
const SheetPortal = SheetPrimitive.Portal
|
||||
const SheetPortal = SheetPrimitive.Portal;
|
||||
|
||||
const SheetOverlay = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Overlay>,
|
||||
|
|
@ -21,33 +21,33 @@ const SheetOverlay = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Overlay
|
||||
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",
|
||||
'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}
|
||||
ref={ref}
|
||||
/>
|
||||
))
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
|
||||
));
|
||||
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
||||
|
||||
const sheetVariants = cva(
|
||||
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
|
||||
{
|
||||
variants: {
|
||||
side: {
|
||||
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
||||
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
|
||||
bottom:
|
||||
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
||||
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
||||
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
|
||||
left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
|
||||
right:
|
||||
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
||||
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
side: "right",
|
||||
side: 'right',
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
interface SheetContentProps
|
||||
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
|
||||
|
|
@ -56,7 +56,7 @@ interface SheetContentProps
|
|||
const SheetContent = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Content>,
|
||||
SheetContentProps
|
||||
>(({ side = "right", className, children, ...props }, ref) => (
|
||||
>(({ side = 'right', className, children, ...props }, ref) => (
|
||||
<SheetPortal>
|
||||
<SheetOverlay />
|
||||
<SheetPrimitive.Content
|
||||
|
|
@ -65,14 +65,14 @@ const SheetContent = React.forwardRef<
|
|||
{...props}
|
||||
>
|
||||
{children}
|
||||
<SheetPrimitive.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-secondary">
|
||||
<X className="h-4 w-4" />
|
||||
<span className="sr-only">Close</span>
|
||||
<SheetPrimitive.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-secondary'>
|
||||
<X className='h-4 w-4' />
|
||||
<span className='sr-only'>Close</span>
|
||||
</SheetPrimitive.Close>
|
||||
</SheetPrimitive.Content>
|
||||
</SheetPortal>
|
||||
))
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName
|
||||
));
|
||||
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
||||
|
||||
const SheetHeader = ({
|
||||
className,
|
||||
|
|
@ -80,13 +80,13 @@ const SheetHeader = ({
|
|||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col space-y-2 text-center sm:text-left",
|
||||
'flex flex-col space-y-2 text-center sm:text-left',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetHeader.displayName = "SheetHeader"
|
||||
);
|
||||
SheetHeader.displayName = 'SheetHeader';
|
||||
|
||||
const SheetFooter = ({
|
||||
className,
|
||||
|
|
@ -94,13 +94,13 @@ const SheetFooter = ({
|
|||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
SheetFooter.displayName = "SheetFooter"
|
||||
);
|
||||
SheetFooter.displayName = 'SheetFooter';
|
||||
|
||||
const SheetTitle = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Title>,
|
||||
|
|
@ -108,11 +108,11 @@ const SheetTitle = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn("text-lg font-semibold text-foreground", className)}
|
||||
className={cn('text-lg font-semibold text-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName
|
||||
));
|
||||
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
||||
|
||||
const SheetDescription = React.forwardRef<
|
||||
React.ElementRef<typeof SheetPrimitive.Description>,
|
||||
|
|
@ -120,11 +120,11 @@ const SheetDescription = React.forwardRef<
|
|||
>(({ className, ...props }, ref) => (
|
||||
<SheetPrimitive.Description
|
||||
ref={ref}
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
className={cn('text-sm text-muted-foreground', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName
|
||||
));
|
||||
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
||||
|
||||
export {
|
||||
Sheet,
|
||||
|
|
@ -137,4 +137,4 @@ export {
|
|||
SheetFooter,
|
||||
SheetTitle,
|
||||
SheetDescription,
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Skeleton({
|
||||
className,
|
||||
|
|
@ -6,10 +6,10 @@ function Skeleton({
|
|||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div
|
||||
className={cn("animate-pulse rounded-md bg-muted", className)}
|
||||
className={cn('animate-pulse rounded-md bg-muted', className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export { Skeleton }
|
||||
export { Skeleton };
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from "react"
|
||||
import * as React from 'react';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export interface TextareaProps
|
||||
extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
||||
|
|
@ -10,15 +10,15 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|||
return (
|
||||
<textarea
|
||||
className={cn(
|
||||
"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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",
|
||||
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background 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}
|
||||
/>
|
||||
)
|
||||
);
|
||||
}
|
||||
)
|
||||
Textarea.displayName = "Textarea"
|
||||
);
|
||||
Textarea.displayName = 'Textarea';
|
||||
|
||||
export { Textarea }
|
||||
export { Textarea };
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
"use client"
|
||||
'use client';
|
||||
|
||||
import * as React from "react"
|
||||
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||
import * as React from 'react';
|
||||
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const TooltipProvider = TooltipPrimitive.Provider
|
||||
const TooltipProvider = TooltipPrimitive.Provider;
|
||||
|
||||
const Tooltip = TooltipPrimitive.Root
|
||||
const Tooltip = TooltipPrimitive.Root;
|
||||
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||
const TooltipTrigger = TooltipPrimitive.Trigger;
|
||||
|
||||
const TooltipContent = React.forwardRef<
|
||||
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||
|
|
@ -19,12 +19,12 @@ 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",
|
||||
'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
|
||||
));
|
||||
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
||||
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue