feat(events): add event creation form components
This commit is contained in:
parent
1a332a9373
commit
51fe42374d
24 changed files with 1868 additions and 61 deletions
|
|
@ -1,16 +1,18 @@
|
|||
import { Button } from '../ui/button';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Link from 'next/link';
|
||||
|
||||
export function RedirectButton({
|
||||
redirectUrl,
|
||||
buttonText,
|
||||
className,
|
||||
}: {
|
||||
redirectUrl: string;
|
||||
buttonText: string;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<Link href={redirectUrl}>
|
||||
<Button>{buttonText}</Button>
|
||||
<Button className={className}>{buttonText}</Button>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Input } from '@/components/ui/input';
|
||||
import { Input, Textarea } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
export default function LabeledInput({
|
||||
|
|
@ -7,6 +7,7 @@ export default function LabeledInput({
|
|||
placeholder,
|
||||
value,
|
||||
name,
|
||||
variantSize = 'default',
|
||||
autocomplete,
|
||||
error,
|
||||
...rest
|
||||
|
|
@ -16,22 +17,37 @@ export default function LabeledInput({
|
|||
placeholder?: string;
|
||||
value?: string;
|
||||
name?: string;
|
||||
variantSize?: 'default' | 'big' | 'textarea';
|
||||
autocomplete?: string;
|
||||
error?: string;
|
||||
} & React.InputHTMLAttributes<HTMLInputElement>) {
|
||||
return (
|
||||
<div className='grid grid-cols-1 gap-1'>
|
||||
<Label htmlFor={name}>{label}</Label>
|
||||
|
||||
<Input
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
defaultValue={value}
|
||||
id={name}
|
||||
name={name}
|
||||
autoComplete={autocomplete}
|
||||
{...rest}
|
||||
/>
|
||||
{variantSize === 'textarea' ? (
|
||||
<Textarea
|
||||
placeholder={placeholder}
|
||||
defaultValue={value}
|
||||
id={name}
|
||||
name={name}
|
||||
rows={3}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
defaultValue={value}
|
||||
id={name}
|
||||
name={name}
|
||||
className={
|
||||
variantSize === 'big'
|
||||
? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl'
|
||||
: ''
|
||||
}
|
||||
autoComplete={autocomplete}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
{error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
28
src/components/custom-ui/participant-list-entry.tsx
Normal file
28
src/components/custom-ui/participant-list-entry.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import { user_default_dark } from '@/assets/usericon/default/defaultusericon-export';
|
||||
import { user_default_light } from '@/assets/usericon/default/defaultusericon-export';
|
||||
import { useTheme } from 'next-themes';
|
||||
|
||||
type ParticipantListEntryProps = {
|
||||
participant: string;
|
||||
imageSrc?: string | null;
|
||||
};
|
||||
|
||||
export default function ParticipantListEntry({
|
||||
participant,
|
||||
imageSrc,
|
||||
}: ParticipantListEntryProps) {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const defaultImage =
|
||||
resolvedTheme === 'dark' ? user_default_dark : user_default_light;
|
||||
|
||||
const finalImageSrc = imageSrc ?? defaultImage;
|
||||
|
||||
return (
|
||||
<div className='flex items-center gap-2 py-1 ml-5'>
|
||||
<Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
|
||||
<span>{participant}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
344
src/components/forms/event-form.tsx
Normal file
344
src/components/forms/event-form.tsx
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
'use client';
|
||||
import React from 'react';
|
||||
import LabeledInput from '@/components/custom-ui/labeled-input';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import Logo from '@/components/misc/logo';
|
||||
import TimePicker from '@/components/time-picker';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useGetApiUserMe } from '@/generated/api/user/user';
|
||||
import {
|
||||
usePostApiEvent,
|
||||
useGetApiEventEventID,
|
||||
usePatchApiEventEventID,
|
||||
} from '@/generated/api/event/event';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
import { ToastInner } from '@/components/misc/toast-inner';
|
||||
import { UserSearchInput } from '@/components/misc/user-search';
|
||||
import ParticipantListEntry from '../custom-ui/participant-list-entry';
|
||||
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface EventFormProps {
|
||||
type: 'create' | 'edit';
|
||||
eventId?: string;
|
||||
}
|
||||
|
||||
const EventForm: React.FC<EventFormProps> = (props) => {
|
||||
// Runtime validation
|
||||
if (props.type === 'edit' && !props.eventId) {
|
||||
throw new Error(
|
||||
'Error [event-form]: eventId must be provided when type is "edit".',
|
||||
);
|
||||
}
|
||||
|
||||
const searchParams = useSearchParams();
|
||||
const startFromUrl = searchParams.get('start');
|
||||
const endFromUrl = searchParams.get('end');
|
||||
|
||||
const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
|
||||
const { data, isLoading, error: fetchError } = useGetApiUserMe();
|
||||
const { data: eventData } = useGetApiEventEventID(props.eventId!, {
|
||||
query: { enabled: props.type === 'edit' },
|
||||
});
|
||||
const patchEvent = usePatchApiEventEventID();
|
||||
const router = useRouter();
|
||||
|
||||
// Extract event fields for form defaults
|
||||
const event = eventData?.data?.event;
|
||||
|
||||
// State for date and time fields
|
||||
const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
|
||||
const [startTime, setStartTime] = React.useState('');
|
||||
const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
|
||||
const [endTime, setEndTime] = React.useState('');
|
||||
|
||||
// State for participants
|
||||
const [selectedParticipants, setSelectedParticipants] = React.useState<
|
||||
User[]
|
||||
>([]);
|
||||
|
||||
// State for form fields
|
||||
const [title, setTitle] = React.useState('');
|
||||
const [location, setLocation] = React.useState('');
|
||||
const [description, setDescription] = React.useState('');
|
||||
|
||||
// Update state when event data loads
|
||||
React.useEffect(() => {
|
||||
if (props.type === 'edit' && event) {
|
||||
setTitle(event.title || '');
|
||||
// Parse start_time and end_time
|
||||
if (event.start_time) {
|
||||
const start = new Date(event.start_time);
|
||||
setStartDate(start);
|
||||
setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
|
||||
}
|
||||
if (event.end_time) {
|
||||
const end = new Date(event.end_time);
|
||||
setEndDate(end);
|
||||
setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
|
||||
}
|
||||
setLocation(event.location || '');
|
||||
setDescription(event.description || '');
|
||||
setSelectedParticipants(
|
||||
event.participants?.map((u) => ({
|
||||
id: u.user.id,
|
||||
name: u.user.name,
|
||||
})) || [],
|
||||
);
|
||||
} else if (props.type === 'create' && startFromUrl && endFromUrl) {
|
||||
// If creating a new event with URL params, set title and dates
|
||||
setTitle('');
|
||||
const start = new Date(startFromUrl);
|
||||
setStartDate(start);
|
||||
setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
|
||||
const end = new Date(endFromUrl);
|
||||
setEndDate(end);
|
||||
setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
|
||||
}
|
||||
}, [event, props.type, startFromUrl, endFromUrl]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
function combine(date?: Date, time?: string) {
|
||||
if (!date || !time) return undefined;
|
||||
const [hours, minutes] = time.split(':');
|
||||
const d = new Date(date);
|
||||
d.setHours(Number(hours), Number(minutes), 0, 0);
|
||||
return d;
|
||||
}
|
||||
|
||||
const start = combine(startDate, startTime);
|
||||
const end = combine(endDate, endTime);
|
||||
|
||||
//validate form data
|
||||
if (!formData.get('eventName')) {
|
||||
alert('Event name is required.');
|
||||
return;
|
||||
}
|
||||
if (!start || !end) {
|
||||
alert('Please provide both start and end date/time.');
|
||||
return;
|
||||
} else if (start >= end) {
|
||||
alert('End time must be after start time.');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
title: formData.get('eventName') as string,
|
||||
description: formData.get('eventDescription') as string,
|
||||
start_time: start.toISOString(),
|
||||
end_time: end.toISOString(),
|
||||
location: formData.get('eventLocation') as string,
|
||||
created_at: formData.get('createdAt') as string,
|
||||
updated_at: formData.get('updatedAt') as string,
|
||||
organiser: formData.get('organiser') as string,
|
||||
participants: selectedParticipants.map((u) => u.id),
|
||||
};
|
||||
|
||||
if (props.type === 'edit' && props.eventId) {
|
||||
await patchEvent.mutateAsync({
|
||||
eventID: props.eventId,
|
||||
data: {
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
start_time: data.start_time,
|
||||
end_time: data.end_time,
|
||||
location: data.location,
|
||||
participants: data.participants,
|
||||
},
|
||||
});
|
||||
console.log('Updating event');
|
||||
} else {
|
||||
console.log('Creating event');
|
||||
createEvent({ data });
|
||||
}
|
||||
|
||||
toast.custom((t) => (
|
||||
<ToastInner
|
||||
toastId={t}
|
||||
title='Event saved'
|
||||
description={event?.title}
|
||||
onAction={() => router.push(`/events/${event?.id}`)}
|
||||
variant='success'
|
||||
buttonText='show'
|
||||
/>
|
||||
));
|
||||
|
||||
router.back();
|
||||
}
|
||||
|
||||
// Calculate values for organiser, created, and updated
|
||||
const organiserValue = isLoading
|
||||
? 'Loading...'
|
||||
: data?.data.user?.name || 'Unknown User';
|
||||
|
||||
// Use DB values for created_at/updated_at in edit mode
|
||||
const createdAtValue =
|
||||
props.type === 'edit' && event?.created_at
|
||||
? event.created_at
|
||||
: new Date().toISOString();
|
||||
const updatedAtValue =
|
||||
props.type === 'edit' && event?.updated_at
|
||||
? event.updated_at
|
||||
: new Date().toISOString();
|
||||
|
||||
// Format date for display
|
||||
const createdAtDisplay = new Date(createdAtValue).toLocaleDateString();
|
||||
const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString();
|
||||
|
||||
if (props.type === 'edit' && isLoading) return <div>Loading...</div>;
|
||||
if (props.type === 'edit' && fetchError)
|
||||
return <div>Error loading event.</div>;
|
||||
|
||||
return (
|
||||
<form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
|
||||
<div className='grid grid-row-start:auto gap-4 sm:gap-8 w-full'>
|
||||
<div className='h-full w-full mt-0 ml-2 mb-16 flex items-center max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
|
||||
<div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<Logo colorType='monochrome' logoType='submark' width={50} />
|
||||
</div>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full'>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Event Name'
|
||||
placeholder={props.type === 'create' ? 'New Event' : 'Event Name'}
|
||||
name='eventName'
|
||||
variantSize='big'
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-0 sm:w-[50px]'></div>
|
||||
</div>
|
||||
<div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
|
||||
<div>
|
||||
<TimePicker
|
||||
dateLabel='start Time'
|
||||
timeLabel=' '
|
||||
date={startDate}
|
||||
setDate={setStartDate}
|
||||
time={startTime}
|
||||
setTime={setStartTime}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TimePicker
|
||||
dateLabel='end Time'
|
||||
timeLabel=' '
|
||||
date={endDate}
|
||||
setDate={setEndDate}
|
||||
time={endTime}
|
||||
setTime={setEndTime}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-54'>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Location'
|
||||
placeholder='where is the event?'
|
||||
name='eventLocation'
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px]'>created:</Label>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
{createdAtDisplay}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px]'>updated:</Label>
|
||||
<p className='text-[var(--color-neutral-300)]'>
|
||||
{updatedAtDisplay}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
|
||||
<div className='h-full w-full grid grid-flow-row gap-4'>
|
||||
<div className='h-full w-full'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label>Organiser:</Label>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
{organiserValue}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Event Description'
|
||||
placeholder='What is the event about?'
|
||||
name='eventDescription'
|
||||
variantSize='textarea'
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
></LabeledInput>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label>Participants</Label>
|
||||
<UserSearchInput
|
||||
selectedUsers={selectedParticipants}
|
||||
addUserAction={(user) => {
|
||||
setSelectedParticipants((current) =>
|
||||
current.find((u) => u.id === user.id)
|
||||
? current
|
||||
: [...current, user],
|
||||
);
|
||||
}}
|
||||
removeUserAction={(user) => {
|
||||
setSelectedParticipants((current) =>
|
||||
current.filter((u) => u.id !== user.id),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2 sm:overflow-y-auto sm:mb-0'>
|
||||
{selectedParticipants.map((user) => (
|
||||
<ParticipantListEntry key={user.id} participant={user.name} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
||||
<div className='w-[20%] grid max-sm:w-[40%]'>
|
||||
<Button
|
||||
type='button'
|
||||
variant='secondary'
|
||||
onClick={() => {
|
||||
router.back();
|
||||
console.log('user aborted - no change in database');
|
||||
}}
|
||||
>
|
||||
cancel
|
||||
</Button>
|
||||
</div>
|
||||
<div className='w-[20%] grid max-sm:w-[40%]'>
|
||||
<Button
|
||||
type='submit'
|
||||
variant='primary'
|
||||
disabled={status === 'pending'}
|
||||
>
|
||||
{status === 'pending' ? 'Saving...' : 'save event'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{isSuccess && <p>Event created!</p>}
|
||||
{error && <p className='text-red-500'>Error: {error.message}</p>}
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventForm;
|
||||
|
|
@ -63,9 +63,9 @@ export default function Logo({
|
|||
);
|
||||
}
|
||||
|
||||
if (width === undefined || height === undefined) {
|
||||
if (width === undefined && height === undefined) {
|
||||
console.warn(
|
||||
`Logo: 'width' and 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
|
||||
`Logo: 'width' or 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
160
src/components/misc/toast-inner.tsx
Normal file
160
src/components/misc/toast-inner.tsx
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
/*
|
||||
USAGE:
|
||||
|
||||
import { toast } from 'sonner';
|
||||
import { ToastInner } from '@/components/misc/toast-inner';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
<Button
|
||||
variant='outline_primary'
|
||||
onClick={() =>
|
||||
|
||||
|
||||
toast.custom(
|
||||
(t) => (
|
||||
<ToastInner
|
||||
toastId={t}
|
||||
title=''
|
||||
description=''
|
||||
onAction={() => console.log('on Action')} //No Button shown if this is null
|
||||
variant=''default' | 'success' | 'error' | 'info' | 'warning' | 'notification''
|
||||
buttonText=[No Button shown if this is null]
|
||||
iconName=[Any Icon Name from Lucide in UpperCamelCase or default if null]
|
||||
/>
|
||||
),
|
||||
|
||||
|
||||
{
|
||||
duration: 5000,
|
||||
},
|
||||
)
|
||||
}
|
||||
>
|
||||
Show Toast
|
||||
</Button>
|
||||
|
||||
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { toast } from 'sonner';
|
||||
import { X } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import * as Icons from 'lucide-react';
|
||||
|
||||
interface ToastInnerProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
buttonText?: string;
|
||||
onAction?: () => void;
|
||||
toastId: string | number;
|
||||
variant?:
|
||||
| 'default'
|
||||
| 'success'
|
||||
| 'error'
|
||||
| 'info'
|
||||
| 'warning'
|
||||
| 'notification';
|
||||
iconName?: keyof typeof Icons;
|
||||
closeOnAction?: boolean;
|
||||
}
|
||||
|
||||
const variantConfig = {
|
||||
default: {
|
||||
bgColor: 'bg-neutral-150',
|
||||
defaultIcon: 'Info',
|
||||
},
|
||||
success: {
|
||||
bgColor: 'bg-green-200',
|
||||
defaultIcon: 'CheckCircle',
|
||||
},
|
||||
error: {
|
||||
bgColor: 'bg-red-200',
|
||||
defaultIcon: 'XCircle',
|
||||
},
|
||||
info: {
|
||||
bgColor: 'bg-blue-200',
|
||||
defaultIcon: 'Info',
|
||||
},
|
||||
warning: {
|
||||
bgColor: 'bg-yellow-200',
|
||||
defaultIcon: 'AlertTriangle',
|
||||
},
|
||||
notification: {
|
||||
bgColor: 'bg-neutral-150',
|
||||
defaultIcon: 'BellRing',
|
||||
},
|
||||
};
|
||||
|
||||
export const ToastInner: React.FC<ToastInnerProps> = ({
|
||||
title,
|
||||
description,
|
||||
buttonText,
|
||||
onAction,
|
||||
toastId,
|
||||
variant = 'default',
|
||||
iconName,
|
||||
closeOnAction = true,
|
||||
}) => {
|
||||
const bgColor = variantConfig[variant].bgColor;
|
||||
|
||||
// fallback to variant's default icon if iconName is not provided
|
||||
const iconKey = (iconName ||
|
||||
variantConfig[variant].defaultIcon) as keyof typeof Icons;
|
||||
const Icon = Icons[iconKey] as React.ComponentType<Icons.LucideProps>;
|
||||
|
||||
return (
|
||||
<div className={`relative sm:w-120 rounded p-4 ${bgColor} select-none`}>
|
||||
{/* Close Button */}
|
||||
<button
|
||||
onClick={() => toast.dismiss(toastId)}
|
||||
className='absolute top-2 right-2 cursor-pointer'
|
||||
aria-label='Close notification'
|
||||
>
|
||||
<X className='h-4 w-4 text-neutral-600' />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className={`grid ${
|
||||
variant === 'default'
|
||||
? 'grid-cols-[auto_130px] max-sm:grid-cols-[auto_90px]'
|
||||
: 'grid-cols-[40px_auto_130px] max-sm:grid-cols-[40px_auto_90px]'
|
||||
} gap-4 items-center`}
|
||||
>
|
||||
{variant !== 'default' && (
|
||||
<div className='flex items-center justify-center'>
|
||||
<Icon size={40} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Text Content */}
|
||||
<div className='grid gap-1'>
|
||||
<h6>{title}</h6>
|
||||
{description && <Label>{description}</Label>}
|
||||
</div>
|
||||
|
||||
{/* Action Button */}
|
||||
<div className='flex justify-center'>
|
||||
{onAction && buttonText && (
|
||||
<Button
|
||||
variant={'secondary'}
|
||||
className='w-full mr-2'
|
||||
onClick={() => {
|
||||
onAction();
|
||||
if (closeOnAction) {
|
||||
toast.dismiss(toastId);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{buttonText}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
96
src/components/misc/user-search.tsx
Normal file
96
src/components/misc/user-search.tsx
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from '@/components/ui/command';
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
import { useGetApiSearchUser } from '@/generated/api/search/search';
|
||||
|
||||
interface User {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export function UserSearchInput({
|
||||
addUserAction,
|
||||
removeUserAction,
|
||||
selectedUsers,
|
||||
}: {
|
||||
addUserAction: (user: User) => void;
|
||||
removeUserAction: (user: User) => void;
|
||||
selectedUsers: User[];
|
||||
}) {
|
||||
const [userSearch, setUserSearch] = React.useState('');
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const { data: searchUserData } = useGetApiSearchUser({ query: userSearch });
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant='outline_muted'
|
||||
role='combobox'
|
||||
aria-expanded={open}
|
||||
className='w-[200px] justify-between'
|
||||
>
|
||||
{'Select user...'}
|
||||
<ChevronsUpDownIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className='w-[200px] p-0'>
|
||||
<Command shouldFilter={false}>
|
||||
<CommandInput
|
||||
placeholder='Search user...'
|
||||
value={userSearch}
|
||||
onValueChange={setUserSearch}
|
||||
/>
|
||||
<CommandList>
|
||||
<CommandEmpty>No users found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{searchUserData?.data.users?.map((user) => {
|
||||
const isSelected = selectedUsers.some((u) => u.id === user.id);
|
||||
|
||||
return (
|
||||
<CommandItem
|
||||
key={user.id}
|
||||
value={user.id}
|
||||
onSelect={() => {
|
||||
if (isSelected) {
|
||||
removeUserAction(user);
|
||||
} else {
|
||||
addUserAction(user);
|
||||
}
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
'mr-2 h-4 w-4',
|
||||
isSelected ? 'opacity-100' : 'opacity-0',
|
||||
)}
|
||||
/>
|
||||
{user.name}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
86
src/components/time-picker.tsx
Normal file
86
src/components/time-picker.tsx
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { ChevronDownIcon } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Calendar } from '@/components/ui/calendar';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
|
||||
export default function TimePicker({
|
||||
dateLabel = 'Date',
|
||||
timeLabel = 'Time',
|
||||
date,
|
||||
setDate,
|
||||
time,
|
||||
setTime,
|
||||
}: {
|
||||
dateLabel?: string;
|
||||
timeLabel?: string;
|
||||
date?: Date;
|
||||
setDate?: (date: Date | undefined) => void;
|
||||
time?: string;
|
||||
setTime?: (time: string) => void;
|
||||
}) {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div className='flex gap-4'>
|
||||
<div className='flex flex-col gap-3'>
|
||||
<Label htmlFor='date' className='px-1'>
|
||||
{dateLabel}
|
||||
</Label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant='calendar' id='date'>
|
||||
{date ? date.toLocaleDateString() : 'Select date'}
|
||||
<ChevronDownIcon />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className='w-auto overflow-hidden p-0' align='start'>
|
||||
<Calendar
|
||||
mode='single'
|
||||
selected={date}
|
||||
captionLayout='dropdown'
|
||||
onSelect={(d) => {
|
||||
setDate?.(d);
|
||||
setOpen(false);
|
||||
}}
|
||||
modifiers={{
|
||||
today: new Date(),
|
||||
}}
|
||||
modifiersClassNames={{
|
||||
today: 'bg-secondary text-secondary-foreground rounded-full',
|
||||
}}
|
||||
classNames={{
|
||||
day: 'text-center hover:bg-gray-500 hover:rounded-md',
|
||||
}}
|
||||
weekStartsOn={1} // Set Monday as the first day of the week
|
||||
startMonth={new Date(new Date().getFullYear() - 10, 0)}
|
||||
endMonth={new Date(new Date().getFullYear() + 14, 12)}
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className='flex flex-col gap-3'>
|
||||
<Label htmlFor='time' className='px-1'>
|
||||
{timeLabel}
|
||||
</Label>
|
||||
<Input
|
||||
type='time'
|
||||
id='time'
|
||||
step='60'
|
||||
value={time}
|
||||
onChange={(e) => setTime?.(e.target.value)}
|
||||
className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -21,8 +21,11 @@ const buttonVariants = cva(
|
|||
'bg-background border-2 text-text shadow-xs hover:bg-secondary border-secondary hover:border-background-reversed active:bg-active-secondary disabled:bg-disabled-secondary',
|
||||
outline_muted:
|
||||
'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted',
|
||||
|
||||
link: 'text-text underline-offset-4 hover:underline',
|
||||
calendar:
|
||||
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 w-32 justify-between font-normal',
|
||||
ghost:
|
||||
'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2 has-[>svg]:px-3',
|
||||
|
|
|
|||
213
src/components/ui/calendar.tsx
Normal file
213
src/components/ui/calendar.tsx
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
ChevronLeftIcon,
|
||||
ChevronRightIcon,
|
||||
} from 'lucide-react';
|
||||
import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Button, buttonVariants } from '@/components/ui/button';
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = 'label',
|
||||
buttonVariant = 'ghost',
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>['variant'];
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn(
|
||||
'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className,
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString('default', { month: 'short' }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn('w-fit', defaultClassNames.root),
|
||||
months: cn(
|
||||
'flex gap-4 flex-col md:flex-row relative',
|
||||
defaultClassNames.months,
|
||||
),
|
||||
month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
|
||||
nav: cn(
|
||||
'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
|
||||
defaultClassNames.nav,
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
|
||||
defaultClassNames.button_previous,
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
|
||||
defaultClassNames.button_next,
|
||||
),
|
||||
month_caption: cn(
|
||||
'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
|
||||
defaultClassNames.month_caption,
|
||||
),
|
||||
dropdowns: cn(
|
||||
'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
|
||||
defaultClassNames.dropdowns,
|
||||
),
|
||||
dropdown_root: cn(
|
||||
'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
|
||||
defaultClassNames.dropdown_root,
|
||||
),
|
||||
dropdown: cn(
|
||||
'bg-[var(--color-basecl)] absolute inset-0 opacity-0',
|
||||
defaultClassNames.dropdown,
|
||||
),
|
||||
caption_label: cn(
|
||||
'select-none font-medium',
|
||||
captionLayout === 'label'
|
||||
? 'text-sm'
|
||||
: 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
|
||||
defaultClassNames.caption_label,
|
||||
),
|
||||
table: 'w-full border-collapse',
|
||||
weekdays: cn('flex', defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
|
||||
defaultClassNames.weekday,
|
||||
),
|
||||
week: cn('flex w-full mt-2', defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
'select-none w-(--cell-size)',
|
||||
defaultClassNames.week_number_header,
|
||||
),
|
||||
week_number: cn(
|
||||
'text-[0.8rem] select-none text-muted-foreground',
|
||||
defaultClassNames.week_number,
|
||||
),
|
||||
day: cn(
|
||||
'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
|
||||
defaultClassNames.day,
|
||||
),
|
||||
range_start: cn(
|
||||
'rounded-l-md bg-accent',
|
||||
defaultClassNames.range_start,
|
||||
),
|
||||
range_middle: cn('rounded-none', defaultClassNames.range_middle),
|
||||
range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
|
||||
today: cn(
|
||||
'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
|
||||
defaultClassNames.today,
|
||||
),
|
||||
outside: cn(
|
||||
'text-muted-foreground aria-selected:text-muted-foreground',
|
||||
defaultClassNames.outside,
|
||||
),
|
||||
disabled: cn(
|
||||
'text-muted-foreground opacity-50',
|
||||
defaultClassNames.disabled,
|
||||
),
|
||||
hidden: cn('invisible', defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot='calendar'
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === 'left') {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn('size-4', className)} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
if (orientation === 'right') {
|
||||
return (
|
||||
<ChevronRightIcon
|
||||
className={cn('size-4', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn('size-4', className)} {...props} />
|
||||
);
|
||||
},
|
||||
DayButton: CalendarDayButton,
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className='flex size-(--cell-size) items-center justify-center text-center'>
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
);
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton>) {
|
||||
const defaultClassNames = getDefaultClassNames();
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null);
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus();
|
||||
}, [modifiers.focused]);
|
||||
|
||||
return (
|
||||
<Button
|
||||
ref={ref}
|
||||
variant='ghost'
|
||||
size='icon'
|
||||
data-day={day.date.toLocaleDateString()}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
|
||||
defaultClassNames.day,
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton };
|
||||
|
|
@ -22,7 +22,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
|||
/* Outline */
|
||||
'',
|
||||
/* Shadow */
|
||||
'shadow-sm',
|
||||
'shadow-[4px_4px_9px_9px_rgba(0,0,0,0.25)]',
|
||||
/* Opacity */
|
||||
'',
|
||||
/* Scaling */
|
||||
|
|
|
|||
184
src/components/ui/command.tsx
Normal file
184
src/components/ui/command.tsx
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Command as CommandPrimitive } from 'cmdk';
|
||||
import { SearchIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
|
||||
function Command({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive>) {
|
||||
return (
|
||||
<CommandPrimitive
|
||||
data-slot='command'
|
||||
className={cn(
|
||||
'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandDialog({
|
||||
title = 'Command Palette',
|
||||
description = 'Search for a command to run...',
|
||||
children,
|
||||
className,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Dialog> & {
|
||||
title?: string;
|
||||
description?: string;
|
||||
className?: string;
|
||||
showCloseButton?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<Dialog {...props}>
|
||||
<DialogHeader className='sr-only'>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogDescription>{description}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogContent
|
||||
className={cn('overflow-hidden p-0', className)}
|
||||
showCloseButton={showCloseButton}
|
||||
>
|
||||
<Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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'>
|
||||
{children}
|
||||
</Command>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandInput({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Input>) {
|
||||
return (
|
||||
<div
|
||||
data-slot='command-input-wrapper'
|
||||
className='flex h-9 items-center gap-2 border-b px-3'
|
||||
>
|
||||
<SearchIcon className='size-4 shrink-0 opacity-50' />
|
||||
<CommandPrimitive.Input
|
||||
data-slot='command-input'
|
||||
className={cn(
|
||||
'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.List>) {
|
||||
return (
|
||||
<CommandPrimitive.List
|
||||
data-slot='command-list'
|
||||
className={cn(
|
||||
'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandEmpty({
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
|
||||
return (
|
||||
<CommandPrimitive.Empty
|
||||
data-slot='command-empty'
|
||||
className='py-6 text-center text-sm'
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandGroup({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Group>) {
|
||||
return (
|
||||
<CommandPrimitive.Group
|
||||
data-slot='command-group'
|
||||
className={cn(
|
||||
'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
|
||||
return (
|
||||
<CommandPrimitive.Separator
|
||||
data-slot='command-separator'
|
||||
className={cn('bg-border -mx-1 h-px', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof CommandPrimitive.Item>) {
|
||||
return (
|
||||
<CommandPrimitive.Item
|
||||
data-slot='command-item'
|
||||
className={cn(
|
||||
"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CommandShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<'span'>) {
|
||||
return (
|
||||
<span
|
||||
data-slot='command-shortcut'
|
||||
className={cn(
|
||||
'text-muted-foreground ml-auto text-xs tracking-widest',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Command,
|
||||
CommandDialog,
|
||||
CommandInput,
|
||||
CommandList,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandShortcut,
|
||||
CommandSeparator,
|
||||
};
|
||||
143
src/components/ui/dialog.tsx
Normal file
143
src/components/ui/dialog.tsx
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
||||
import { XIcon } from 'lucide-react';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Dialog({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
||||
return <DialogPrimitive.Root data-slot='dialog' {...props} />;
|
||||
}
|
||||
|
||||
function DialogTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
||||
return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
|
||||
}
|
||||
|
||||
function DialogPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
||||
return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
|
||||
}
|
||||
|
||||
function DialogClose({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
||||
return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
||||
return (
|
||||
<DialogPrimitive.Overlay
|
||||
data-slot='dialog-overlay'
|
||||
className={cn(
|
||||
'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/50',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
||||
showCloseButton?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal data-slot='dialog-portal'>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
data-slot='dialog-content'
|
||||
className={cn(
|
||||
'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot='dialog-close'
|
||||
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
|
||||
>
|
||||
<XIcon />
|
||||
<span className='sr-only'>Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Content>
|
||||
</DialogPortal>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot='dialog-header'
|
||||
className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
||||
return (
|
||||
<div
|
||||
data-slot='dialog-footer'
|
||||
className={cn(
|
||||
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot='dialog-title'
|
||||
className={cn('text-lg leading-none font-semibold', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot='dialog-description'
|
||||
className={cn('text-muted-foreground text-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
};
|
||||
|
|
@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
|||
data-slot='input'
|
||||
className={cn(
|
||||
/* Text */
|
||||
'text-text-input selection:text-text md:text-sm file:text-destructive file:text-sm placeholder:text-text-muted-input',
|
||||
'text-text-input selection:text-text file:text-destructive file:text-sm placeholder:text-text-muted-input',
|
||||
/* Background */
|
||||
'bg-transparent selection:bg-muted-input file:bg-transparent',
|
||||
/* Border */
|
||||
|
|
@ -41,4 +41,45 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
|
|||
);
|
||||
}
|
||||
|
||||
export { Input };
|
||||
function Textarea({
|
||||
className,
|
||||
rows,
|
||||
...props
|
||||
}: React.ComponentProps<'textarea'>) {
|
||||
return (
|
||||
<textarea
|
||||
data-slot='input'
|
||||
rows={rows}
|
||||
className={cn(
|
||||
/* Text */
|
||||
'text-text-input selection:text-text placeholder:text-text-muted-input',
|
||||
/* Background */
|
||||
'bg-transparent selection:bg-muted-input',
|
||||
/* Border */
|
||||
'rounded-md border border-input focus-visible:border-ring aria-invalid:border-destructive',
|
||||
/* Font */
|
||||
'',
|
||||
/* Cursor */
|
||||
'disabled:pointer-events-none disabled:cursor-not-allowed',
|
||||
/* Ring */
|
||||
'focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
|
||||
/* Outline */
|
||||
'outline-none',
|
||||
/* Shadow */
|
||||
'shadow-md transition-[color,box-shadow]',
|
||||
/* Opacity */
|
||||
'disabled:opacity-50',
|
||||
/* Scaling */
|
||||
'h-32 w-full min-w-0', // Bigger height for textarea
|
||||
/* Spacing */
|
||||
'px-3 py-2',
|
||||
/* Alignment */
|
||||
'',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export { Input, Textarea };
|
||||
|
|
|
|||
|
|
@ -5,16 +5,21 @@ import * as LabelPrimitive from '@radix-ui/react-label';
|
|||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Label({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
|
||||
type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & {
|
||||
size?: 'default' | 'small' | 'large';
|
||||
};
|
||||
|
||||
function Label({ className, size = 'default', ...props }: LabelProps) {
|
||||
return (
|
||||
<LabelPrimitive.Root
|
||||
data-slot='label'
|
||||
className={cn(
|
||||
/* Text */
|
||||
'text-sm',
|
||||
size === 'small'
|
||||
? 'text-sm'
|
||||
: size === 'large'
|
||||
? 'text-xl'
|
||||
: 'text-base',
|
||||
/* Background */
|
||||
'',
|
||||
/* Border */
|
||||
|
|
|
|||
48
src/components/ui/popover.tsx
Normal file
48
src/components/ui/popover.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function Popover({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
|
||||
return <PopoverPrimitive.Root data-slot='popover' {...props} />;
|
||||
}
|
||||
|
||||
function PopoverTrigger({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
|
||||
return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = 'center',
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Content
|
||||
data-slot='popover-content'
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn(
|
||||
'bg-popover text-popover-foreground 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 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Portal>
|
||||
);
|
||||
}
|
||||
|
||||
function PopoverAnchor({
|
||||
...props
|
||||
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
|
||||
return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
|
||||
}
|
||||
|
||||
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
|
||||
54
src/components/ui/sonner.tsx
Normal file
54
src/components/ui/sonner.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
'use client';
|
||||
|
||||
import { useTheme } from 'next-themes';
|
||||
import { Toaster as Sonner, ToasterProps } from 'sonner';
|
||||
import React from 'react';
|
||||
|
||||
const Toaster = ({ ...props }: ToasterProps) => {
|
||||
const { theme = 'system' } = useTheme();
|
||||
|
||||
const [shouldExpand, setShouldExpand] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const mediaQuery = window.matchMedia('(min-width: 600px)');
|
||||
|
||||
const handleScreenSizeChange = () => {
|
||||
setShouldExpand(mediaQuery.matches);
|
||||
};
|
||||
|
||||
handleScreenSizeChange(); // set initial value
|
||||
mediaQuery.addEventListener('change', handleScreenSizeChange);
|
||||
|
||||
return () =>
|
||||
mediaQuery.removeEventListener('change', handleScreenSizeChange);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Sonner
|
||||
theme={theme as ToasterProps['theme']}
|
||||
richColors={true}
|
||||
className='toaster group'
|
||||
toastOptions={{
|
||||
style: {
|
||||
backgroundColor: 'var(--color-neutral-150)',
|
||||
color: 'var(--color-text-alt)',
|
||||
borderRadius: 'var(--radius)',
|
||||
},
|
||||
cancelButtonStyle: {
|
||||
backgroundColor: 'var(--color-secondary)',
|
||||
color: 'var(--color-text-alt)',
|
||||
},
|
||||
actionButtonStyle: {
|
||||
backgroundColor: 'var(--color-secondary)',
|
||||
color: 'var(--color-text-alt)',
|
||||
},
|
||||
}}
|
||||
swipeDirections={['left', 'right']}
|
||||
closeButton={true}
|
||||
expand={shouldExpand}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export { Toaster };
|
||||
Loading…
Add table
Add a link
Reference in a new issue