Compare commits
2 Commits
a6d03971eb
...
057e9c9043
| Author | SHA1 | Date |
|---|---|---|
 ayush
|
057e9c9043 | 6 months ago |
|
ayush
|
a80995b170 | 6 months ago |
@ -0,0 +1,20 @@ |
|||||||
|
'use client' |
||||||
|
import CommonContainer from "@/components/(dashboard)/elements/CommonContainer" |
||||||
|
import AppContextProvider from "@/helpers/context/AppContextProvider" |
||||||
|
import AdminView from "@/views/AdminView" |
||||||
|
|
||||||
|
const DashBoardIndexPage = () => { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<AppContextProvider> |
||||||
|
<AdminView> |
||||||
|
<CommonContainer> |
||||||
|
<h2>hello</h2> |
||||||
|
</CommonContainer> |
||||||
|
</AdminView> |
||||||
|
</AppContextProvider> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default DashBoardIndexPage |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import { Toaster } from "@/components/(dashboard)/ui/toaster" |
||||||
|
import AppContextProvider from "@/helpers/context/AppContextProvider" |
||||||
|
import { Suspense } from "react" |
||||||
|
|
||||||
|
const RootLayout :React.FC<{ |
||||||
|
children :React.ReactNode |
||||||
|
}> = ({ |
||||||
|
children |
||||||
|
}) => { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<Suspense> |
||||||
|
<AppContextProvider> |
||||||
|
{children} |
||||||
|
</AppContextProvider> |
||||||
|
<Toaster /> |
||||||
|
</Suspense> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default RootLayout |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
import React, { useState } from 'react'; |
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; |
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; |
||||||
|
import { Label } from "@/components/ui/label"; |
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area"; |
||||||
|
import { Separator } from "@/components/ui/separator"; |
||||||
|
import { Check, X } from "lucide-react"; |
||||||
|
|
||||||
|
const QuizGenerator = () => { |
||||||
|
// Submitted questions history
|
||||||
|
const [submittedQuestions] = useState([ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
question: "What is React's Virtual DOM?", |
||||||
|
options: [ |
||||||
|
"A complete DOM copy", |
||||||
|
"A lightweight copy of the DOM", |
||||||
|
"A browser feature", |
||||||
|
"A routing system" |
||||||
|
], |
||||||
|
selectedOption: 0, // User selected
|
||||||
|
correctOption: 1, // Correct answer
|
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
question: "What hook manages side effects?", |
||||||
|
options: [ |
||||||
|
"useState", |
||||||
|
"useReducer", |
||||||
|
"useEffect", |
||||||
|
"useContext" |
||||||
|
], |
||||||
|
selectedOption: 2, |
||||||
|
correctOption: 2, |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
// Unsubmitted questions
|
||||||
|
const [pendingQuestions, setPendingQuestions] = useState([ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
question: "Which of these is a state management library?", |
||||||
|
options: ["Redux", "Axios", "Lodash", "Moment"], |
||||||
|
selectedOption: null |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
question: "What does CSS stand for?", |
||||||
|
options: [ |
||||||
|
"Computer Style Sheets", |
||||||
|
"Cascading Style Sheets", |
||||||
|
"Creative Style Sheets", |
||||||
|
"Colorful Style Sheets" |
||||||
|
], |
||||||
|
selectedOption: null |
||||||
|
}, |
||||||
|
]); |
||||||
|
|
||||||
|
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); |
||||||
|
|
||||||
|
const handleOptionSelect = (value) => { |
||||||
|
const updatedQuestions = [...pendingQuestions]; |
||||||
|
updatedQuestions[currentQuestionIndex].selectedOption = parseInt(value); |
||||||
|
setPendingQuestions(updatedQuestions); |
||||||
|
}; |
||||||
|
|
||||||
|
const generateQuiz = () => { |
||||||
|
// Reset selections and shuffle pending questions
|
||||||
|
const shuffledQuestions = [...pendingQuestions].map(q => ({ |
||||||
|
...q, |
||||||
|
selectedOption: null |
||||||
|
})); |
||||||
|
setPendingQuestions(shuffledQuestions); |
||||||
|
setCurrentQuestionIndex(0); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleNext = () => { |
||||||
|
if (currentQuestionIndex < pendingQuestions.length - 1) { |
||||||
|
setCurrentQuestionIndex(prev => prev + 1); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handlePrevious = () => { |
||||||
|
if (currentQuestionIndex > 0) { |
||||||
|
setCurrentQuestionIndex(prev => prev - 1); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="py-6 container mx- mt-8"> |
||||||
|
{/* Submitted Questions History */} |
||||||
|
<div className='grid grid-cols-3 space-x-6'> |
||||||
|
<Card className="w-full col-span-2"> |
||||||
|
<CardHeader> |
||||||
|
<CardTitle>Quiz History</CardTitle> |
||||||
|
</CardHeader> |
||||||
|
<CardContent> |
||||||
|
<ScrollArea className="h-[400px] pr-4"> |
||||||
|
{submittedQuestions.map((q, index) => ( |
||||||
|
<div key={q.id} className="mb-4"> |
||||||
|
<div className="p-4 border rounded-lg border-gray-200"> |
||||||
|
<h3 className="font-medium mb-2">{q.question}</h3> |
||||||
|
<div className="text-sm space-y-2"> |
||||||
|
{q.options.map((option, i) => ( |
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`p-2 rounded flex justify-between items-center ${ |
||||||
|
i === q.correctOption && i === q.selectedOption |
||||||
|
? 'bg-green-100' |
||||||
|
: i === q.correctOption |
||||||
|
? 'bg-green-50' |
||||||
|
: i === q.selectedOption |
||||||
|
? 'bg-red-50' |
||||||
|
: 'bg-gray-50' |
||||||
|
}`}
|
||||||
|
> |
||||||
|
<span>{option}</span> |
||||||
|
{i === q.correctOption && ( |
||||||
|
<Check className="w-4 h-4 text-green-600" /> |
||||||
|
)} |
||||||
|
{i === q.selectedOption && i !== q.correctOption && ( |
||||||
|
<X className="w-4 h-4 text-red-600" /> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{index < submittedQuestions.length - 1 && <Separator className="my-4" />} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</ScrollArea> |
||||||
|
</CardContent> |
||||||
|
</Card> |
||||||
|
|
||||||
|
{/* Pending Questions Interface */} |
||||||
|
<div className="w-full space-y-6"> |
||||||
|
<Button
|
||||||
|
onClick={generateQuiz} |
||||||
|
className="w-full bg-purple-700" |
||||||
|
> |
||||||
|
Generate Quiz |
||||||
|
</Button> |
||||||
|
|
||||||
|
{pendingQuestions.length > 0 ? ( |
||||||
|
<Card> |
||||||
|
<CardHeader> |
||||||
|
<CardTitle> |
||||||
|
Question {currentQuestionIndex + 1} of {pendingQuestions.length} |
||||||
|
</CardTitle> |
||||||
|
</CardHeader> |
||||||
|
<CardContent> |
||||||
|
<div className="space-y-6"> |
||||||
|
<h3 className="text-lg font-medium"> |
||||||
|
{pendingQuestions[currentQuestionIndex].question} |
||||||
|
</h3> |
||||||
|
|
||||||
|
<RadioGroup |
||||||
|
value={pendingQuestions[currentQuestionIndex].selectedOption?.toString()} |
||||||
|
onValueChange={handleOptionSelect} |
||||||
|
> |
||||||
|
{pendingQuestions[currentQuestionIndex].options.map((option, i) => ( |
||||||
|
<div key={i} className="flex items-center space-x-2"> |
||||||
|
<RadioGroupItem value={i.toString()} id={`option-${i}`} /> |
||||||
|
<Label htmlFor={`option-${i}`}>{option}</Label> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</RadioGroup> |
||||||
|
|
||||||
|
<div className="flex justify-end mt-6"> |
||||||
|
<Button
|
||||||
|
onClick={handleNext} |
||||||
|
disabled={currentQuestionIndex === pendingQuestions.length - 1} |
||||||
|
className='bg-purple-700' |
||||||
|
> |
||||||
|
Submit |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</CardContent> |
||||||
|
</Card> |
||||||
|
) : ( |
||||||
|
<Card> |
||||||
|
<CardContent className="p-6 text-center text-gray-500"> |
||||||
|
No pending questions available |
||||||
|
</CardContent> |
||||||
|
</Card> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default QuizGenerator; |
||||||
@ -0,0 +1,169 @@ |
|||||||
|
import AsyncSelect from 'react-select/async'; |
||||||
|
import React, { useEffect, useRef } from 'react'; |
||||||
|
import { ChoiceType } from '@/helpers/commonSchema/common.schema'; |
||||||
|
import { Label } from '../ui/label'; |
||||||
|
import { StylesConfig } from 'node_modules/react-select/dist/declarations/src'; |
||||||
|
|
||||||
|
interface SelectFieldProps { |
||||||
|
className?: string; |
||||||
|
id?: string; |
||||||
|
label?: string; |
||||||
|
labelStyle: string; |
||||||
|
labelWidth?: string; |
||||||
|
name: string; |
||||||
|
defaultValue?: ChoiceType | null; |
||||||
|
value?: string | number | boolean; |
||||||
|
required?: boolean; |
||||||
|
wrapperClassName?: string; |
||||||
|
options?: { value: string | number; label: string }[]; |
||||||
|
fieldErrors?: Array<string>; |
||||||
|
clearSelectValue?: boolean; |
||||||
|
setClearSelectValue?: React.Dispatch<React.SetStateAction<boolean>>; |
||||||
|
isDisabled?: boolean; |
||||||
|
onChange?: (choice: ChoiceType) => void | any; |
||||||
|
loadOptions? : (inputValue: string, callback: (options: any[]) => void) => Promise<void> | any |
||||||
|
placeHolder? : string |
||||||
|
labelClassName? : string |
||||||
|
defaultOptions? : { value: string | number; label: string }[] |
||||||
|
isMulti? : boolean |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const AsyncSelectField: React.FC<SelectFieldProps> = ({ |
||||||
|
className = '', |
||||||
|
id, |
||||||
|
label, |
||||||
|
labelStyle, |
||||||
|
labelWidth, |
||||||
|
name, |
||||||
|
defaultValue, |
||||||
|
value, |
||||||
|
required, |
||||||
|
wrapperClassName = '', |
||||||
|
fieldErrors = [], |
||||||
|
clearSelectValue = false, |
||||||
|
setClearSelectValue, |
||||||
|
isDisabled, |
||||||
|
onChange, |
||||||
|
loadOptions, |
||||||
|
placeHolder, |
||||||
|
labelClassName , |
||||||
|
defaultOptions , |
||||||
|
isMulti = false , |
||||||
|
}) => { |
||||||
|
if (labelStyle === 'label-left') { |
||||||
|
wrapperClassName = wrapperClassName.concat( |
||||||
|
' ', |
||||||
|
' flex justify-between items-center gap-4 ' |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const selectRef = useRef<any>(null); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (clearSelectValue) { |
||||||
|
selectRef?.current?.clearValue?.(); |
||||||
|
setClearSelectValue && setClearSelectValue(false); |
||||||
|
} |
||||||
|
}, [clearSelectValue, setClearSelectValue]); |
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// // Auto-select the first option if available
|
||||||
|
// if (!selectedValue && defaultOptions && defaultOptions.length > 0) {
|
||||||
|
// const firstOption = defaultOptions[0];
|
||||||
|
// setSelectedValue(firstOption);
|
||||||
|
// onChange && onChange(firstOption);
|
||||||
|
// }
|
||||||
|
// }, [defaultOptions, selectedValue, onChange]);
|
||||||
|
|
||||||
|
const styles = { |
||||||
|
menuList: (base: any , state :any) => ({ |
||||||
|
...base, |
||||||
|
borderColor : state?.isFocused && 'bg-[var(--primary)]', |
||||||
|
colourStyles : '#fff', |
||||||
|
'::-webkit-scrollbar': { |
||||||
|
width: '5px', |
||||||
|
}, |
||||||
|
'::-webkit-scrollbar-track': { |
||||||
|
background: '#f1f1f1', |
||||||
|
}, |
||||||
|
'::-webkit-scrollbar-thumb': { |
||||||
|
background: '#d1d1d1', |
||||||
|
}, |
||||||
|
'::-webkit-scrollbar-thumb:hover': { |
||||||
|
background: '#555', |
||||||
|
}, |
||||||
|
}), |
||||||
|
input: (base:any, state : any) => ({ |
||||||
|
...base, |
||||||
|
'[type="text"]': { |
||||||
|
fontSize: 13, |
||||||
|
fontWeight: 900, |
||||||
|
color: 'green' |
||||||
|
} |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
const colourStyles: StylesConfig<any> = { |
||||||
|
control: (styles) => ({ ...styles, backgroundColor: 'white' }), |
||||||
|
option: (styles, { data, isDisabled, isFocused, isSelected }) => { |
||||||
|
return { |
||||||
|
...styles, |
||||||
|
backgroundColor:'hsl(var(--background))', |
||||||
|
color:'#fff' |
||||||
|
}; |
||||||
|
}, |
||||||
|
|
||||||
|
// input: (styles) => ({ ...styles, ...dot() }),
|
||||||
|
// placeholder: (styles) => ({ ...styles, ...dot('#ccc') }),
|
||||||
|
// singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
|
||||||
|
};
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={`${wrapperClassName}`}> |
||||||
|
{label && ( |
||||||
|
<Label className={`${labelClassName} ${fieldErrors?.length > 0 && 'text-destructive'}`}> |
||||||
|
{label} |
||||||
|
{required ? <span className="text-red-400"> *</span> : ''} |
||||||
|
</Label> |
||||||
|
)} |
||||||
|
<div className="w-full mt-2"> |
||||||
|
<AsyncSelect |
||||||
|
cacheOptions |
||||||
|
isMulti={isMulti} |
||||||
|
loadOptions={loadOptions} |
||||||
|
defaultOptions={defaultOptions} |
||||||
|
ref={selectRef} |
||||||
|
styles={styles} |
||||||
|
isDisabled={isDisabled} |
||||||
|
onChange={onChange as any} |
||||||
|
className={className + 'bg-[var(--primary)]' + ' !text-sm '+ (fieldErrors?.length > 0 && 'border border-destructive')} |
||||||
|
theme={(theme) => ({ |
||||||
|
...theme, |
||||||
|
borderRadius: 0, |
||||||
|
colors: { |
||||||
|
...theme.colors, |
||||||
|
backgroundColor: 'hsl(var(--background))' , |
||||||
|
primary25: 'hsl(var(--secondary))', |
||||||
|
primary: 'hsl(var(--secondary))', |
||||||
|
color : '#fff' |
||||||
|
}, |
||||||
|
})} |
||||||
|
|
||||||
|
id={id} |
||||||
|
name={name} |
||||||
|
defaultValue={defaultValue} |
||||||
|
placeholder={placeHolder} |
||||||
|
|
||||||
|
/> |
||||||
|
<span className="block text-destructive text-xs my-1"> |
||||||
|
{fieldErrors.map((item: string, index: any) => ( |
||||||
|
<span key={index}>{item}</span> |
||||||
|
))} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default AsyncSelectField; |
||||||
@ -0,0 +1,174 @@ |
|||||||
|
import React, { useCallback, useState, useEffect } from 'react'; |
||||||
|
import { useDropzone } from 'react-dropzone'; |
||||||
|
import { Label } from '../ui/label'; |
||||||
|
import { FolderInput, Trash2 } from 'lucide-react'; |
||||||
|
|
||||||
|
interface FileWithPreview extends File { |
||||||
|
preview: string; |
||||||
|
} |
||||||
|
|
||||||
|
interface InitialFileState { |
||||||
|
file: FileWithPreview | null; |
||||||
|
path: string | null; |
||||||
|
} |
||||||
|
|
||||||
|
interface DropZonePropsInterface { |
||||||
|
title?: string; |
||||||
|
handleFileChange: (key: string, file: File | null) => void; |
||||||
|
name: string; |
||||||
|
initialItem?: File | string | null; |
||||||
|
currentFile?: File | null; // Add this prop
|
||||||
|
} |
||||||
|
|
||||||
|
const DropZone: React.FC<DropZonePropsInterface> = ({ |
||||||
|
title = 'Upload File', |
||||||
|
handleFileChange, |
||||||
|
name, |
||||||
|
initialItem = null, |
||||||
|
currentFile = null, // Add this prop
|
||||||
|
}) => { |
||||||
|
const [fileState, setFileState] = useState<InitialFileState>({ |
||||||
|
file: null, |
||||||
|
path: typeof initialItem === 'string' ? initialItem : null |
||||||
|
}); |
||||||
|
|
||||||
|
// Effect to handle initial setup and updates
|
||||||
|
useEffect(() => { |
||||||
|
if (currentFile) { |
||||||
|
// If there's a current file in form state, create preview
|
||||||
|
const fileWithPreview = Object.assign(currentFile, { |
||||||
|
preview: URL.createObjectURL(currentFile) |
||||||
|
}) as FileWithPreview; |
||||||
|
setFileState({ file: fileWithPreview, path: null }); |
||||||
|
} else if (initialItem && typeof initialItem === 'string') { |
||||||
|
// Handle path-based initialItem
|
||||||
|
setFileState(prev => ({ ...prev, path: initialItem })); |
||||||
|
} else if (initialItem instanceof File) { |
||||||
|
// Handle File-based initialItem
|
||||||
|
const fileWithPreview = Object.assign(initialItem, { |
||||||
|
preview: URL.createObjectURL(initialItem) |
||||||
|
}) as FileWithPreview; |
||||||
|
setFileState({ file: fileWithPreview, path: null }); |
||||||
|
} else if (!initialItem && !currentFile) { |
||||||
|
// Reset state if no file
|
||||||
|
setFileState({ file: null, path: null }); |
||||||
|
} |
||||||
|
}, [initialItem, currentFile]); |
||||||
|
|
||||||
|
const onDrop = useCallback( |
||||||
|
(acceptedFiles: File[]) => { |
||||||
|
if (acceptedFiles.length > 0) { |
||||||
|
const fileWithPreview = Object.assign(acceptedFiles[0], { |
||||||
|
preview: URL.createObjectURL(acceptedFiles[0]), |
||||||
|
}) as FileWithPreview; |
||||||
|
|
||||||
|
setFileState({ file: fileWithPreview, path: null }); |
||||||
|
handleFileChange(name, fileWithPreview); |
||||||
|
} |
||||||
|
}, |
||||||
|
[name, handleFileChange] |
||||||
|
); |
||||||
|
|
||||||
|
const removeFile = useCallback((e: React.MouseEvent) => { |
||||||
|
e.stopPropagation(); |
||||||
|
setFileState({ file: null, path: null }); |
||||||
|
handleFileChange(name, null); |
||||||
|
}, [name, handleFileChange]); |
||||||
|
|
||||||
|
const { getRootProps, getInputProps } = useDropzone({ |
||||||
|
onDrop, |
||||||
|
accept: { |
||||||
|
'image/jpeg': ['.jpeg', '.jpg'], |
||||||
|
'image/png': ['.png'], |
||||||
|
'application/pdf': ['.pdf'], |
||||||
|
'application/msword': ['.doc', '.docx'] |
||||||
|
}, |
||||||
|
multiple: false |
||||||
|
}); |
||||||
|
|
||||||
|
const renderPreview = () => { |
||||||
|
const currentFile = fileState.file; |
||||||
|
const currentPath = fileState.path; |
||||||
|
|
||||||
|
if (currentFile) { |
||||||
|
if (currentFile.type.startsWith('image/')) { |
||||||
|
return ( |
||||||
|
<div className="mt-4 flex flex-col items-center gap-2"> |
||||||
|
<img |
||||||
|
src={currentFile.preview} |
||||||
|
alt={currentFile.name} |
||||||
|
className="max-h-32 border rounded" |
||||||
|
/> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<FolderInput className="w-4 h-4" /> |
||||||
|
<span className="text-sm">{currentFile.name}</span> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
onClick={removeFile} |
||||||
|
className="hover:bg-gray-200 p-1 rounded-full" |
||||||
|
aria-label="Remove file" |
||||||
|
> |
||||||
|
<Trash2 className="w-4 h-4 text-red-500" /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} else if (currentPath) { |
||||||
|
if (currentPath.match(/\.(jpg|jpeg|png)$/i)) { |
||||||
|
return ( |
||||||
|
<div className="mt-4 flex flex-col items-center gap-2"> |
||||||
|
<img |
||||||
|
src={currentPath} |
||||||
|
alt="Uploaded file" |
||||||
|
className="max-h-32 border rounded" |
||||||
|
/> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<FolderInput className="w-4 h-4" /> |
||||||
|
<span className="text-sm">{currentPath.split('/').pop()}</span> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
onClick={removeFile} |
||||||
|
className="hover:bg-gray-200 p-1 rounded-full" |
||||||
|
aria-label="Remove file" |
||||||
|
> |
||||||
|
<Trash2 className="w-4 h-4 text-red-500" /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return null; |
||||||
|
}; |
||||||
|
|
||||||
|
// Cleanup preview URLs on unmount
|
||||||
|
useEffect(() => { |
||||||
|
return () => { |
||||||
|
if (fileState.file?.preview) { |
||||||
|
URL.revokeObjectURL(fileState.file.preview); |
||||||
|
} |
||||||
|
}; |
||||||
|
}, [fileState.file]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<Label>{title}</Label> |
||||||
|
<div |
||||||
|
{...getRootProps()} |
||||||
|
className="bg-sky-50 dark:bg-background border-gray-400 border border-dashed px-4 py-8 rounded cursor-pointer" |
||||||
|
> |
||||||
|
<input {...getInputProps()} /> |
||||||
|
<div className="text-center"> |
||||||
|
<p className="text-sm">Drag and drop a file here, or click to select a file</p> |
||||||
|
<em className="text-sm block mt-1">(*.jpeg, *.png, *.pdf, *.doc files accepted)</em> |
||||||
|
</div> |
||||||
|
|
||||||
|
{renderPreview()} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default DropZone; |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
import React, { useContext } from "react"; |
||||||
|
import { Label } from "@/components/ui/label"; |
||||||
|
import { Input } from "@/components/ui/input"; |
||||||
|
import { cn } from "@/lib/utils"; |
||||||
|
import { useTheme } from "@/hooks/use-theme"; |
||||||
|
|
||||||
|
interface FormInputProps extends React.InputHTMLAttributes<HTMLInputElement> { |
||||||
|
label?: string; |
||||||
|
error?: []; |
||||||
|
labelClassName?: string; |
||||||
|
containerClassName?: string; |
||||||
|
helperText?: string; |
||||||
|
labelPosition?: "top" | "left"; |
||||||
|
required? : boolean ,
|
||||||
|
name : string |
||||||
|
type?: |
||||||
|
| "textarea" |
||||||
|
| "text" |
||||||
|
| "file" |
||||||
|
| "email" |
||||||
|
| "tel" |
||||||
|
| "password" |
||||||
|
| "number" |
||||||
|
| "search" |
||||||
|
| "color" |
||||||
|
| "date" |
||||||
|
| "time" |
||||||
|
| "range" |
||||||
|
| "datetime-local" |
||||||
|
| "checkbox"; |
||||||
|
} |
||||||
|
|
||||||
|
const FormInput = React.forwardRef<HTMLInputElement, FormInputProps>( |
||||||
|
( |
||||||
|
{ |
||||||
|
label, |
||||||
|
error, |
||||||
|
name , |
||||||
|
className, |
||||||
|
labelClassName, |
||||||
|
containerClassName, |
||||||
|
helperText, |
||||||
|
labelPosition = "top", |
||||||
|
id, |
||||||
|
type = "text" ,
|
||||||
|
required = false , |
||||||
|
...props |
||||||
|
}, |
||||||
|
ref |
||||||
|
) => { |
||||||
|
const inputId = id || label?.toLowerCase().replace(/\s+/g, "-"); |
||||||
|
const {theme} = useTheme() |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={cn( |
||||||
|
"w-full", |
||||||
|
labelPosition === "left" && "grid grid-cols-4 gap-4 items-center", |
||||||
|
containerClassName |
||||||
|
)}> |
||||||
|
{label && ( |
||||||
|
<Label |
||||||
|
htmlFor={inputId} |
||||||
|
className={cn( |
||||||
|
labelPosition === "left" && "text-right", |
||||||
|
error && "text-destructive", |
||||||
|
labelClassName, |
||||||
|
'font-medium' |
||||||
|
)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
{required ? <span className="text-red-400"> *</span> : ""} |
||||||
|
</Label> |
||||||
|
)} |
||||||
|
<div className={cn( |
||||||
|
"flex flex-col gap-1.5", |
||||||
|
labelPosition === "left" && "col-span-3", |
||||||
|
labelPosition !== "left" && 'mt-2' |
||||||
|
)}> |
||||||
|
<Input |
||||||
|
id={inputId} |
||||||
|
ref={ref} |
||||||
|
name={name} |
||||||
|
type={type} |
||||||
|
className={cn( |
||||||
|
error && "border-destructive", |
||||||
|
className ,
|
||||||
|
type === 'date' && theme, |
||||||
|
'py-[20px]' |
||||||
|
)} |
||||||
|
aria-describedby={ |
||||||
|
error ? `${inputId}-error` :
|
||||||
|
helperText ? `${inputId}-helper` :
|
||||||
|
undefined |
||||||
|
} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
{helperText && ( |
||||||
|
<p |
||||||
|
id={`${inputId}-helper`} |
||||||
|
className="text-sm text-muted-foreground" |
||||||
|
> |
||||||
|
{helperText} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
{error?.map((item: string, index: any) => ( |
||||||
|
<span key={index} className="text-sm text-destructive"> |
||||||
|
{item} |
||||||
|
<br></br> |
||||||
|
</span> |
||||||
|
))} |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
); |
||||||
|
|
||||||
|
FormInput.displayName = "FormInput"; |
||||||
|
|
||||||
|
export default FormInput; |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
"use client"; |
||||||
|
|
||||||
|
import React from "react"; |
||||||
|
import Stepper from "@/components/ui/stepper"; |
||||||
|
import { Step } from "@/helpers/commonSchema/steps.schema"; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default function MultiStepForm({steps , renderContent , className} :
|
||||||
|
{steps : Step[] , renderContent : ( step : number , changeNext : () => void , changePrev : () => void ) => React.ReactNode , className? : string} |
||||||
|
) { |
||||||
|
|
||||||
|
const [currentStep, setCurrentStep] = React.useState(1); |
||||||
|
|
||||||
|
const handleNext = () => { |
||||||
|
if (currentStep < steps.length) { |
||||||
|
setCurrentStep((prev) => prev + 1); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handlePrev = () => { |
||||||
|
if (currentStep > 1) { |
||||||
|
setCurrentStep((prev) => prev - 1); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handleStepClick = (stepNumber: number) => { |
||||||
|
setCurrentStep(stepNumber); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={`max-w-[70vw] w-full mx-auto ${className}`}> |
||||||
|
<div className=" space-y-6"> |
||||||
|
<Stepper |
||||||
|
steps={steps} |
||||||
|
currentStep={currentStep} |
||||||
|
onStepClick={handleStepClick} |
||||||
|
/> |
||||||
|
<div> |
||||||
|
{ |
||||||
|
renderContent(currentStep , handleNext , handlePrev) |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,126 @@ |
|||||||
|
import Calendar from "@sbmdkl/nepali-datepicker-reactjs"; |
||||||
|
import '@sbmdkl/nepali-datepicker-reactjs/dist/index.css'; |
||||||
|
|
||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
import NepaliDate from "nepali-date-converter"; |
||||||
|
import { AdToBs, getTomorrowEnglishDate, getYesterdayEnglishDate } from "@/helpers/date.helper" |
||||||
|
import { Label } from "../ui/label"; |
||||||
|
|
||||||
|
interface NepaliDateFieldProps { |
||||||
|
children?: React.ReactNode; |
||||||
|
wrapperClassName?: string; |
||||||
|
id?: string; |
||||||
|
className?: string; |
||||||
|
label?: string; |
||||||
|
labelStyle?: "label-left" | 'label-top'; |
||||||
|
labelWidth?: String; |
||||||
|
name?: string; |
||||||
|
status?: string; |
||||||
|
disabled?: boolean; |
||||||
|
value?: any; |
||||||
|
defaultValue?: any; |
||||||
|
formGroup?: string; |
||||||
|
hasIcon?: string; |
||||||
|
size?: string; |
||||||
|
placeholder?: string; |
||||||
|
rows?: number; |
||||||
|
hint?: string; |
||||||
|
required?: boolean; |
||||||
|
hidden?: boolean; |
||||||
|
fieldErrors?: Array<string>; |
||||||
|
helpText?: String; |
||||||
|
onChange?: (e: any) => void; |
||||||
|
step?: string; |
||||||
|
disableFutureDate?: boolean; |
||||||
|
position?: "bottom" | "left"; |
||||||
|
disablePastDate?: boolean; |
||||||
|
isToday? : boolean |
||||||
|
} |
||||||
|
|
||||||
|
const NepaliDateField: React.FC<NepaliDateFieldProps> = ({ |
||||||
|
className = "", |
||||||
|
id, |
||||||
|
wrapperClassName = "", |
||||||
|
children, |
||||||
|
label, |
||||||
|
labelStyle, |
||||||
|
labelWidth, |
||||||
|
name, |
||||||
|
status, |
||||||
|
disabled, |
||||||
|
value, |
||||||
|
defaultValue, |
||||||
|
formGroup, |
||||||
|
hasIcon, |
||||||
|
size, |
||||||
|
placeholder, |
||||||
|
rows, |
||||||
|
hint, |
||||||
|
required, |
||||||
|
fieldErrors = [], |
||||||
|
helpText, |
||||||
|
hidden = false, |
||||||
|
onChange, |
||||||
|
disableFutureDate, |
||||||
|
position = "bottom", |
||||||
|
disablePastDate, |
||||||
|
isToday = false , |
||||||
|
...props |
||||||
|
}) => { |
||||||
|
const today = new NepaliDate().format("YYYY-MM-DD"); |
||||||
|
const tomorrow = getTomorrowEnglishDate(); |
||||||
|
const previousDay = getYesterdayEnglishDate(); |
||||||
|
const currentNepaliDate = new NepaliDate().format("YYYY-MM-DD"); |
||||||
|
const tomorrowNepaliDate = AdToBs(tomorrow); |
||||||
|
const yesterdayNepaliDate = AdToBs(previousDay); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (disabled) { |
||||||
|
document.querySelector('._1oYOS')?.setAttribute('disabled', 'true'); |
||||||
|
} else { |
||||||
|
document.querySelector('._1oYOS')?.removeAttribute('disabled'); |
||||||
|
} |
||||||
|
}, [disabled]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={`w-full flex-col ${wrapperClassName} ${ |
||||||
|
position === "left" ? "inputLeft" : "" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{label && ( |
||||||
|
<Label id={id && id}> |
||||||
|
{label} |
||||||
|
</Label> |
||||||
|
)} |
||||||
|
<div className={label && 'w-full mt-2'}> |
||||||
|
<Calendar |
||||||
|
onChange={onChange} |
||||||
|
hideDefaultValue={defaultValue ? false : (isToday ? false : true)} |
||||||
|
defaultDate={defaultValue ?? (isToday ? today : undefined)} |
||||||
|
placeholder={"YYYY-MM-DD"} |
||||||
|
language={"en"} |
||||||
|
value={value ?? ''} |
||||||
|
className={`border rounded-md py-1.5 px-1.5 w-48 ${className} text-xs `} |
||||||
|
maxDate={disableFutureDate ? tomorrowNepaliDate : undefined} |
||||||
|
minDate={disablePastDate ? yesterdayNepaliDate : undefined} |
||||||
|
disabled={disabled} |
||||||
|
/> |
||||||
|
{children} |
||||||
|
{helpText && ( |
||||||
|
<div className="text-gray-800 text-xs mt-1">{helpText}</div> |
||||||
|
)} |
||||||
|
<span className="text-error-500 text-xs"> |
||||||
|
{fieldErrors.map((item: string, index: any) => ( |
||||||
|
<span key={index}> |
||||||
|
{item} |
||||||
|
<br></br> |
||||||
|
</span> |
||||||
|
))} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default NepaliDateField; |
||||||
@ -0,0 +1,125 @@ |
|||||||
|
import React, { useEffect, useRef } from "react"; |
||||||
|
import { |
||||||
|
Select, |
||||||
|
SelectContent, |
||||||
|
SelectItem, |
||||||
|
SelectTrigger, |
||||||
|
SelectValue, |
||||||
|
} from "@/components/ui/select"; |
||||||
|
import { Label } from "@/components/ui/label"; |
||||||
|
import { cn } from "@/lib/utils"; |
||||||
|
import { ChoiceType } from "@/helpers/commonSchema/common.schema"; |
||||||
|
|
||||||
|
interface SelectFieldProps { |
||||||
|
className?: string; |
||||||
|
id?: string; |
||||||
|
label?: string; |
||||||
|
labelStyle?: string; |
||||||
|
labelWidth?: string; |
||||||
|
name: string; |
||||||
|
labelClassName?: string; |
||||||
|
placeholder?: string; |
||||||
|
defaultValue?: string | number | boolean; |
||||||
|
value?: string | number | boolean; |
||||||
|
required?: boolean; |
||||||
|
wrapperClassName?: string; |
||||||
|
options: { value: string | number; label: string }[]; |
||||||
|
fieldErrors?: Array<string>; |
||||||
|
clearSelectValue?: boolean; |
||||||
|
setClearSelectValue?: React.Dispatch<React.SetStateAction<boolean>>; |
||||||
|
isDisabled?: boolean; |
||||||
|
onChange?: (value: ChoiceType | any) => void; |
||||||
|
} |
||||||
|
|
||||||
|
const SelectField: React.FC<SelectFieldProps> = ({ |
||||||
|
className = "", |
||||||
|
id, |
||||||
|
label, |
||||||
|
labelStyle, |
||||||
|
name, |
||||||
|
defaultValue, |
||||||
|
value, |
||||||
|
placeholder = `Select ${label}`, |
||||||
|
required, |
||||||
|
options, |
||||||
|
wrapperClassName = "", |
||||||
|
fieldErrors = [], |
||||||
|
clearSelectValue = false, |
||||||
|
setClearSelectValue, |
||||||
|
isDisabled, |
||||||
|
onChange, |
||||||
|
labelClassName |
||||||
|
}) => { |
||||||
|
const selectRef = useRef<HTMLButtonElement>(null); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (clearSelectValue === true) { |
||||||
|
onChange?.(""); |
||||||
|
setClearSelectValue?.(false); |
||||||
|
} |
||||||
|
}, [clearSelectValue, setClearSelectValue, onChange]); |
||||||
|
|
||||||
|
const wrapperClasses = cn( |
||||||
|
wrapperClassName, |
||||||
|
labelStyle === "label-left" && "flex justify-between items-center gap-2" |
||||||
|
); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className={wrapperClasses}> |
||||||
|
{label && ( |
||||||
|
<Label
|
||||||
|
htmlFor={id ?? name}
|
||||||
|
className={cn(labelClassName)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
{required && <span className="text-destructive ml-1">*</span>} |
||||||
|
</Label> |
||||||
|
)} |
||||||
|
|
||||||
|
<div className={cn( |
||||||
|
"w-full", |
||||||
|
labelStyle !== "label-left" && "mt-2" |
||||||
|
)}> |
||||||
|
<Select |
||||||
|
defaultValue={defaultValue?.toString()} |
||||||
|
value={value?.toString()} |
||||||
|
onValueChange={onChange} |
||||||
|
disabled={isDisabled} |
||||||
|
|
||||||
|
> |
||||||
|
<SelectTrigger
|
||||||
|
ref={selectRef} |
||||||
|
className={cn( |
||||||
|
"w-full font-normal", |
||||||
|
className |
||||||
|
)} |
||||||
|
id={id ?? name} |
||||||
|
> |
||||||
|
<SelectValue placeholder={placeholder} /> |
||||||
|
</SelectTrigger> |
||||||
|
<SelectContent className="max-h-[200px]"> |
||||||
|
{options.map((option) => ( |
||||||
|
<SelectItem
|
||||||
|
key={option.value}
|
||||||
|
value={option.value.toString()} |
||||||
|
> |
||||||
|
{option.label} |
||||||
|
</SelectItem> |
||||||
|
))} |
||||||
|
</SelectContent> |
||||||
|
</Select> |
||||||
|
|
||||||
|
{fieldErrors.map((error, index) => ( |
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
className="block text-destructive text-xs mt-1" |
||||||
|
> |
||||||
|
{error} |
||||||
|
</span> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default SelectField; |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
import React from "react" |
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
BreadcrumbItem,
|
||||||
|
BreadcrumbLink,
|
||||||
|
BreadcrumbList,
|
||||||
|
BreadcrumbPage,
|
||||||
|
BreadcrumbSeparator
|
||||||
|
|
||||||
|
} from "@/components/ui/breadcrumb" |
||||||
|
import { Link } from "lucide-react" |
||||||
|
|
||||||
|
interface BreadCrumbItemInterface { |
||||||
|
title : string |
||||||
|
href : string |
||||||
|
|
||||||
|
} |
||||||
|
interface BreadCrumbNavPropsInterface { |
||||||
|
breadCrumbItems : BreadCrumbItemInterface[] |
||||||
|
} |
||||||
|
|
||||||
|
const BreadCrumbNav : React.FC<BreadCrumbNavPropsInterface> = ({ |
||||||
|
breadCrumbItems |
||||||
|
}) => { |
||||||
|
|
||||||
|
return( |
||||||
|
<Breadcrumb> |
||||||
|
<BreadcrumbList> |
||||||
|
{ |
||||||
|
breadCrumbItems?.length > 1 && |
||||||
|
breadCrumbItems.map((item: BreadCrumbItemInterface, index: number) => { |
||||||
|
const isLastItem = index === breadCrumbItems.length - 1; |
||||||
|
return ( |
||||||
|
<React.Fragment key={index}> |
||||||
|
<BreadcrumbItem> |
||||||
|
{isLastItem ? ( |
||||||
|
<BreadcrumbPage>{item.title}</BreadcrumbPage> |
||||||
|
) : ( |
||||||
|
<BreadcrumbLink href={item.href}> |
||||||
|
{item.title} |
||||||
|
</BreadcrumbLink> |
||||||
|
)} |
||||||
|
</BreadcrumbItem> |
||||||
|
{!isLastItem && <BreadcrumbSeparator />} |
||||||
|
</React.Fragment> |
||||||
|
); |
||||||
|
}) |
||||||
|
} |
||||||
|
</BreadcrumbList> |
||||||
|
</Breadcrumb> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default BreadCrumbNav |
||||||
@ -0,0 +1,377 @@ |
|||||||
|
import React, { useState, useCallback, useMemo, useEffect, useRef } from "react" |
||||||
|
import { useSearchParams, useRouter } from "next/navigation" |
||||||
|
import { ChevronDown, Cross, Loader2, MoreHorizontal, X } from "lucide-react" |
||||||
|
import { |
||||||
|
ColumnDef, |
||||||
|
ColumnFiltersState, |
||||||
|
SortingState, |
||||||
|
VisibilityState, |
||||||
|
flexRender, |
||||||
|
getCoreRowModel, |
||||||
|
getFilteredRowModel, |
||||||
|
getPaginationRowModel, |
||||||
|
getSortedRowModel, |
||||||
|
useReactTable, |
||||||
|
} from "@tanstack/react-table" |
||||||
|
import { Button } from "@/components/ui/button" |
||||||
|
import { Checkbox } from "@/components/ui/checkbox" |
||||||
|
import { |
||||||
|
DropdownMenu, |
||||||
|
DropdownMenuCheckboxItem, |
||||||
|
DropdownMenuContent, |
||||||
|
DropdownMenuItem, |
||||||
|
DropdownMenuTrigger, |
||||||
|
} from "@/components/ui/dropdown-menu" |
||||||
|
import { Input } from "@/components/ui/input" |
||||||
|
import { |
||||||
|
Table, |
||||||
|
TableBody, |
||||||
|
TableCell, |
||||||
|
TableHead, |
||||||
|
TableHeader, |
||||||
|
TableRow, |
||||||
|
} from "@/components/ui/table" |
||||||
|
import { DeleteInstances } from "../DeleteInstances/DeleteInstances" |
||||||
|
import BulkUpload from "../../elements/BulkUpload" |
||||||
|
import Download from "../../elements/Download" |
||||||
|
import TableSkeleton from "../../elements/TableSkeleton" |
||||||
|
|
||||||
|
const useDebounce = (callback: Function, delay: number) => { |
||||||
|
const timeoutRef = React.useRef<NodeJS.Timeout>(); |
||||||
|
|
||||||
|
React.useEffect(() => { |
||||||
|
return () => { |
||||||
|
if (timeoutRef.current) { |
||||||
|
clearTimeout(timeoutRef.current); |
||||||
|
} |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return useCallback((...args: any[]) => { |
||||||
|
if (timeoutRef.current) { |
||||||
|
clearTimeout(timeoutRef.current); |
||||||
|
} |
||||||
|
|
||||||
|
timeoutRef.current = setTimeout(() => { |
||||||
|
callback(...args); |
||||||
|
}, delay); |
||||||
|
}, [callback, delay]); |
||||||
|
}; |
||||||
|
|
||||||
|
interface DataTableProps<TData> { |
||||||
|
data: TData[] |
||||||
|
columns: ColumnDef<TData>[] |
||||||
|
searchKey?: string |
||||||
|
showCheckbox?: boolean |
||||||
|
actionDropdown?: any |
||||||
|
sn?: number |
||||||
|
customFilter?: React.ReactNode |
||||||
|
mutate: () => void |
||||||
|
isLoading?: boolean |
||||||
|
uploadURL?: string |
||||||
|
deleteURL?: string |
||||||
|
downloadSampleURL? : string |
||||||
|
downloadBtnLable? : string |
||||||
|
} |
||||||
|
|
||||||
|
export function DataTable<TData>({ |
||||||
|
data = [], |
||||||
|
columns: userColumns, |
||||||
|
searchKey, |
||||||
|
showCheckbox = false, |
||||||
|
actionDropdown, |
||||||
|
customFilter, |
||||||
|
mutate, |
||||||
|
uploadURL, |
||||||
|
isLoading = false, |
||||||
|
deleteURL, |
||||||
|
downloadSampleURL, |
||||||
|
downloadBtnLable |
||||||
|
}: DataTableProps<TData>) { |
||||||
|
const searchParams = useSearchParams() |
||||||
|
const router = useRouter() |
||||||
|
const [isSearching, setIsSearching] = useState(false) |
||||||
|
const inputRef = useRef<HTMLInputElement>(null) |
||||||
|
const shouldFocusRef = useRef(false) |
||||||
|
|
||||||
|
// Initialize states with proper types
|
||||||
|
const [sorting, setSorting] = useState<SortingState>([]) |
||||||
|
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) |
||||||
|
const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({}) |
||||||
|
const [rowSelection, setRowSelection] = useState({}) |
||||||
|
const [deleteIds, setDeleteIds] = useState([]) |
||||||
|
|
||||||
|
// Initialize filter state from URL
|
||||||
|
const [localFilter, setLocalFilter] = useState(searchParams.get(searchKey ?? 'name') || "") |
||||||
|
|
||||||
|
// Memoize the columns configuration
|
||||||
|
const finalColumns = useMemo(() => { |
||||||
|
let cols: ColumnDef<TData>[] = [] |
||||||
|
|
||||||
|
if (showCheckbox) { |
||||||
|
cols.push({ |
||||||
|
id: "select", |
||||||
|
header: ({ table }) => ( |
||||||
|
<Checkbox |
||||||
|
checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && "indeterminate")} |
||||||
|
onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} |
||||||
|
aria-label="Select all" |
||||||
|
disabled={isLoading} |
||||||
|
/> |
||||||
|
), |
||||||
|
cell: ({ row }) => ( |
||||||
|
<Checkbox |
||||||
|
checked={row.getIsSelected()} |
||||||
|
onCheckedChange={(value) => row.toggleSelected(!!value)} |
||||||
|
aria-label="Select row" |
||||||
|
disabled={isLoading} |
||||||
|
/> |
||||||
|
), |
||||||
|
enableSorting: false, |
||||||
|
enableHiding: false, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
cols = [...cols, ...userColumns] |
||||||
|
|
||||||
|
if (actionDropdown) { |
||||||
|
cols.push({ |
||||||
|
...actionDropdown, |
||||||
|
header: "Actions", |
||||||
|
enableSorting: false, |
||||||
|
enableHiding: false, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return cols |
||||||
|
}, [userColumns, showCheckbox, actionDropdown, isLoading]) |
||||||
|
|
||||||
|
const tableData = useMemo(() => { |
||||||
|
if (!data) return []; |
||||||
|
return data.map((item: any) => ({ |
||||||
|
...item, |
||||||
|
})); |
||||||
|
}, [data]); |
||||||
|
|
||||||
|
// Create table instance
|
||||||
|
const table = useReactTable({ |
||||||
|
data: tableData, |
||||||
|
columns: finalColumns, |
||||||
|
onSortingChange: setSorting, |
||||||
|
onColumnFiltersChange: setColumnFilters, |
||||||
|
getCoreRowModel: getCoreRowModel(), |
||||||
|
getPaginationRowModel: getPaginationRowModel(), |
||||||
|
getSortedRowModel: getSortedRowModel(), |
||||||
|
getFilteredRowModel: getFilteredRowModel(), |
||||||
|
onColumnVisibilityChange: setColumnVisibility, |
||||||
|
onRowSelectionChange: setRowSelection, |
||||||
|
state: { |
||||||
|
sorting, |
||||||
|
columnFilters, |
||||||
|
columnVisibility, |
||||||
|
rowSelection, |
||||||
|
}, |
||||||
|
enableFilters: true, |
||||||
|
manualFiltering: false, |
||||||
|
}) |
||||||
|
|
||||||
|
// Debounced URL update
|
||||||
|
const debouncedUpdateURL = useCallback( |
||||||
|
useDebounce(async (value: string) => { |
||||||
|
try { |
||||||
|
const currentParams = new URLSearchParams(searchParams?.toString() || ''); |
||||||
|
currentParams.set(searchKey ?? 'name', value); |
||||||
|
router.replace(`?${currentParams.toString()}`); |
||||||
|
if (typeof mutate === 'function') { |
||||||
|
await mutate(); |
||||||
|
} |
||||||
|
} catch (error) { |
||||||
|
console.error('Error updating search:', error); |
||||||
|
} finally { |
||||||
|
setIsSearching(false); |
||||||
|
shouldFocusRef.current = true; |
||||||
|
} |
||||||
|
}, 500), |
||||||
|
[searchParams, router, mutate, searchKey] |
||||||
|
); |
||||||
|
|
||||||
|
// Clear search parameters
|
||||||
|
const clearSearchParams = () => { |
||||||
|
const column = table.getColumn(searchKey as string); |
||||||
|
if (column) { |
||||||
|
column.setFilterValue(""); |
||||||
|
} |
||||||
|
setLocalFilter(""); |
||||||
|
setIsSearching(false); |
||||||
|
router.replace(window.location.pathname); |
||||||
|
if (typeof mutate === 'function') { |
||||||
|
mutate(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Handle input filter change
|
||||||
|
const handleFilterChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => { |
||||||
|
const value = event.target.value; |
||||||
|
setLocalFilter(value); |
||||||
|
setIsSearching(true); |
||||||
|
shouldFocusRef.current = true; |
||||||
|
debouncedUpdateURL(value); |
||||||
|
}, [debouncedUpdateURL]); |
||||||
|
|
||||||
|
// Handle focus after loading/searching states change
|
||||||
|
useEffect(() => { |
||||||
|
if (!isLoading && !isSearching && shouldFocusRef.current && inputRef.current) { |
||||||
|
inputRef.current.focus(); |
||||||
|
shouldFocusRef.current = false; |
||||||
|
} |
||||||
|
}, [isLoading, isSearching]); |
||||||
|
|
||||||
|
// Initialize filter from URL
|
||||||
|
useEffect(() => { |
||||||
|
const urlFilter = searchParams?.get(searchKey ?? 'name'); |
||||||
|
if (searchKey && urlFilter) { |
||||||
|
setLocalFilter(urlFilter); |
||||||
|
} |
||||||
|
}, [searchParams, searchKey]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="w-full"> |
||||||
|
<div className="flex items-center py-4 justify-between"> |
||||||
|
<div className="flex gap-2"> |
||||||
|
{searchKey && ( |
||||||
|
<div className="relative"> |
||||||
|
<Input |
||||||
|
placeholder={`Filter ${searchKey}...`} |
||||||
|
value={localFilter} |
||||||
|
onChange={handleFilterChange} |
||||||
|
className="max-w-sm" |
||||||
|
disabled={isLoading} |
||||||
|
ref={inputRef} |
||||||
|
/> |
||||||
|
{(isLoading || isSearching) ? ( |
||||||
|
<div className="absolute right-2 top-1/2 -translate-y-1/2"> |
||||||
|
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" /> |
||||||
|
</div> |
||||||
|
) : searchParams?.get(searchKey) ? ( |
||||||
|
<button
|
||||||
|
className="absolute right-2 top-1/2 -translate-y-1/2" |
||||||
|
onClick={clearSearchParams} |
||||||
|
> |
||||||
|
<X className="h-4 w-4 text-muted-foreground" /> |
||||||
|
</button> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
{customFilter} |
||||||
|
</div> |
||||||
|
<div className="w-fit flex gap-4"> |
||||||
|
{table.getSelectedRowModel().rows.map(row => row.original?.id)?.length > 0 && deleteURL &&
|
||||||
|
<DeleteInstances
|
||||||
|
url={deleteURL} |
||||||
|
mutate={mutate} |
||||||
|
ids={table.getSelectedRowModel().rows.map(row => row.original?.id)} |
||||||
|
variant={'outline'} |
||||||
|
/> |
||||||
|
} |
||||||
|
<DropdownMenu> |
||||||
|
<DropdownMenuTrigger asChild> |
||||||
|
<Button variant="outline" className="ml-auto" disabled={isLoading}> |
||||||
|
Columns <ChevronDown className="ml-2 h-4 w-4" /> |
||||||
|
</Button> |
||||||
|
</DropdownMenuTrigger> |
||||||
|
<DropdownMenuContent align="end"> |
||||||
|
{table |
||||||
|
.getAllColumns() |
||||||
|
.filter((column) => column.getCanHide()) |
||||||
|
.map((column) => ( |
||||||
|
<DropdownMenuCheckboxItem |
||||||
|
key={column.id} |
||||||
|
className="capitalize" |
||||||
|
checked={column.getIsVisible()} |
||||||
|
onCheckedChange={(value) => column.toggleVisibility(!!value)} |
||||||
|
> |
||||||
|
{column.id} |
||||||
|
</DropdownMenuCheckboxItem> |
||||||
|
))} |
||||||
|
</DropdownMenuContent> |
||||||
|
</DropdownMenu> |
||||||
|
{(uploadURL || downloadSampleURL) &&
|
||||||
|
<DropdownMenu> |
||||||
|
<DropdownMenuTrigger asChild className=""> |
||||||
|
<Button variant="ghost" className="h-8 w-8 p-0"> |
||||||
|
<span className="sr-only">Open menu</span> |
||||||
|
<MoreHorizontal className="h-4 w-4" /> |
||||||
|
</Button> |
||||||
|
</DropdownMenuTrigger> |
||||||
|
<DropdownMenuContent align="end"> |
||||||
|
{uploadURL &&
|
||||||
|
<DropdownMenuItem asChild> |
||||||
|
<BulkUpload submitUrl={uploadURL} mutate={mutate}/> |
||||||
|
</DropdownMenuItem> |
||||||
|
} |
||||||
|
{ |
||||||
|
downloadSampleURL &&
|
||||||
|
<DropdownMenuItem asChild className="mt-2"> |
||||||
|
<Download url={downloadSampleURL} label={downloadBtnLable}/> |
||||||
|
</DropdownMenuItem> |
||||||
|
} |
||||||
|
</DropdownMenuContent> |
||||||
|
</DropdownMenu> |
||||||
|
} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className="rounded-md border"> |
||||||
|
<Table className="custom-scrollbar" key={data?.length}> |
||||||
|
<TableHeader> |
||||||
|
{table.getHeaderGroups().map((headerGroup) => ( |
||||||
|
<TableRow key={headerGroup.id}> |
||||||
|
{headerGroup.headers.map((header) => ( |
||||||
|
<TableHead key={header.id}> |
||||||
|
{header.isPlaceholder |
||||||
|
? null |
||||||
|
: flexRender( |
||||||
|
header.column.columnDef.header, |
||||||
|
header.getContext() |
||||||
|
)} |
||||||
|
</TableHead> |
||||||
|
))} |
||||||
|
</TableRow> |
||||||
|
))} |
||||||
|
</TableHeader> |
||||||
|
<TableBody> |
||||||
|
{isLoading ? ( |
||||||
|
<TableSkeleton columns={finalColumns.length} rows={5}/> |
||||||
|
) : table.getRowModel().rows.length > 0 ? ( |
||||||
|
table.getRowModel().rows.map((row) => ( |
||||||
|
<TableRow |
||||||
|
key={row.id} |
||||||
|
data-state={row.getIsSelected() && "selected"} |
||||||
|
> |
||||||
|
{row.getVisibleCells().map((cell) => ( |
||||||
|
<TableCell key={cell.id}> |
||||||
|
{flexRender( |
||||||
|
cell.column.columnDef.cell, |
||||||
|
cell.getContext() |
||||||
|
)} |
||||||
|
</TableCell> |
||||||
|
))} |
||||||
|
</TableRow> |
||||||
|
)) |
||||||
|
) : ( |
||||||
|
<TableRow> |
||||||
|
<TableCell |
||||||
|
colSpan={finalColumns.length} |
||||||
|
className="h-24 text-center" |
||||||
|
> |
||||||
|
No results. |
||||||
|
</TableCell> |
||||||
|
</TableRow> |
||||||
|
)} |
||||||
|
</TableBody> |
||||||
|
</Table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default DataTable; |
||||||
@ -0,0 +1,117 @@ |
|||||||
|
import { |
||||||
|
AlertDialog, |
||||||
|
AlertDialogAction, |
||||||
|
AlertDialogCancel, |
||||||
|
AlertDialogContent, |
||||||
|
AlertDialogDescription, |
||||||
|
AlertDialogFooter, |
||||||
|
AlertDialogHeader, |
||||||
|
AlertDialogTitle, |
||||||
|
AlertDialogTrigger, |
||||||
|
} from "@/components/ui/alert-dialog" |
||||||
|
import { Button } from "@/components/ui/button" |
||||||
|
import { fetchHeader } from "@/helpers/fetch.helper"; |
||||||
|
import { useToast } from "@/hooks/use-toast"; |
||||||
|
import { Loader, Trash2 } from "lucide-react"; |
||||||
|
import { useState } from "react" |
||||||
|
|
||||||
|
export function DeleteInstances({ |
||||||
|
url, |
||||||
|
mutate, |
||||||
|
ids, |
||||||
|
variant = "ghost" , |
||||||
|
// open,
|
||||||
|
// onOpenChange,
|
||||||
|
showTitle = true , |
||||||
|
className |
||||||
|
}: { |
||||||
|
url: string; |
||||||
|
mutate: () => void; |
||||||
|
ids: Array<string>; |
||||||
|
variant? : "ghost" | "link" | "default" | "destructive" | "outline" | "secondary" | null | undefined |
||||||
|
className? : string |
||||||
|
showTitle? : boolean |
||||||
|
// open: boolean;
|
||||||
|
// onOpenChange: (value: boolean) => void;
|
||||||
|
}) { |
||||||
|
const [showModal , setShowModal] = useState<boolean>(false)
|
||||||
|
const [loading, setLoading] = useState<boolean>(false); |
||||||
|
const { toast } = useToast(); |
||||||
|
|
||||||
|
const handleDelete = async (e: React.MouseEvent): Promise<void> => { |
||||||
|
|
||||||
|
const formData = new FormData(); |
||||||
|
ids.forEach((id : string , index : number) => { |
||||||
|
formData.append(`ids[${index}]` , id) |
||||||
|
}) |
||||||
|
|
||||||
|
try { |
||||||
|
setLoading(true); |
||||||
|
const res = await fetch(url, { |
||||||
|
headers: fetchHeader(), |
||||||
|
method: "POST", |
||||||
|
body: formData, |
||||||
|
}); |
||||||
|
const data = await res.json(); |
||||||
|
if (data?.success) { |
||||||
|
toast({ |
||||||
|
title: "Success", |
||||||
|
description: data?.message, |
||||||
|
variant: "success", |
||||||
|
}); |
||||||
|
mutate(); |
||||||
|
setShowModal(false); // Close the dialog on success
|
||||||
|
}else{ |
||||||
|
toast({ |
||||||
|
variant: "destructive", |
||||||
|
title: "Error", |
||||||
|
description: data?.message, |
||||||
|
}); |
||||||
|
} |
||||||
|
} catch (error: any) { |
||||||
|
toast({ |
||||||
|
variant: "destructive", |
||||||
|
title: "Error", |
||||||
|
description: error?.message, |
||||||
|
}); |
||||||
|
} finally { |
||||||
|
setLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<AlertDialog open={showModal} onOpenChange={setShowModal}> |
||||||
|
<AlertDialogTrigger asChild> |
||||||
|
<Button |
||||||
|
variant={variant} |
||||||
|
size="sm" |
||||||
|
className={`text-red-500 hover:text-red-700 !w-full text-left flex !px-2 h-auto min-h-[36px]
|
||||||
|
${variant == 'outline' ? 'justify-center' : 'justify-start'} ${className}`}
|
||||||
|
> |
||||||
|
<Trash2 className="h-4 w-4" /> |
||||||
|
{showTitle && 'Delete'} |
||||||
|
{loading ? <Loader /> : null} |
||||||
|
</Button> |
||||||
|
</AlertDialogTrigger> |
||||||
|
<AlertDialogContent> |
||||||
|
<AlertDialogHeader> |
||||||
|
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> |
||||||
|
<AlertDialogDescription> |
||||||
|
This action cannot be undone. This will delete your data. |
||||||
|
</AlertDialogDescription> |
||||||
|
</AlertDialogHeader> |
||||||
|
<AlertDialogFooter> |
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel> |
||||||
|
<AlertDialogAction |
||||||
|
className="bg-red-500 hover:bg-red-300" |
||||||
|
onClick={(e) => handleDelete(e)} |
||||||
|
> |
||||||
|
Continue |
||||||
|
</AlertDialogAction> |
||||||
|
</AlertDialogFooter> |
||||||
|
</AlertDialogContent> |
||||||
|
</AlertDialog> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import Link from "next/link"; |
||||||
|
|
||||||
|
export default function AppFooter() { |
||||||
|
return ( |
||||||
|
<div className="z-20 w-full bg-background/95 shadow backdrop-blur supports-[backdrop-filter]:bg-background/60"> |
||||||
|
<div className="mx-4 md:mx-8 flex h-14 items-center"> |
||||||
|
<p className="text-xs md:text-sm leading-loose text-muted-foreground text-left"> |
||||||
|
©copyright{" "} |
||||||
|
<Link |
||||||
|
href="www.kumarijob.com" |
||||||
|
target="_blank" |
||||||
|
rel="noopener noreferrer" |
||||||
|
className="font-medium underline underline-offset-4" |
||||||
|
> |
||||||
|
Kumari Job |
||||||
|
</Link> |
||||||
|
. All rights reserved |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
import { SearchIcon } from "lucide-react"; |
||||||
|
import { ModeToggle } from "./_partials/modeToggle"; |
||||||
|
import { SheetMenu } from "./_partials/sheetMenu"; |
||||||
|
import { UserNav } from "./_partials/userNav"; |
||||||
|
import UserNotifications from "./_partials/userNotifications"; |
||||||
|
import { Input } from "@/components/ui/input"; |
||||||
|
|
||||||
|
|
||||||
|
const AppHeader : React.FC = () => { |
||||||
|
return ( |
||||||
|
<header className="sticky top-0 z-10 w-full bg-background/95 shadow backdrop-blur
|
||||||
|
supports-[backdrop-filter]:bg-background/60
|
||||||
|
dark:shadow-secondary"> |
||||||
|
<div className="flex h-14 items-center container py-4 px-4 sm:px-8 mx-auto"> |
||||||
|
<div className="flex items-center space-x-4 lg:space-x-0 mr-4"> |
||||||
|
<SheetMenu /> |
||||||
|
</div> |
||||||
|
<div className="relative flex-1 max-w-md md:max-w-lg sm:ml-0 ml-2"> |
||||||
|
<SearchIcon className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> |
||||||
|
<Input |
||||||
|
type="search" |
||||||
|
placeholder="Search..." |
||||||
|
className="w-full rounded-lg bg-muted pl-8 pr-4 py-2 text-sm focus:outline-none focus:ring-1
|
||||||
|
focus:ring-primary focus:border-primary" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div className="flex flex-1 items-center gap-3 justify-end"> |
||||||
|
<UserNotifications /> |
||||||
|
<ModeToggle /> |
||||||
|
<UserNav /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default AppHeader |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,66 @@ |
|||||||
|
import React, { useContext } from 'react'; |
||||||
|
import { |
||||||
|
DropdownMenu, |
||||||
|
DropdownMenuContent, |
||||||
|
DropdownMenuItem, |
||||||
|
DropdownMenuTrigger, |
||||||
|
} from "@/components/ui/dropdown-menu"; |
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { GraduationCap, Grid3x3, Headset, UserRoundCog, UserSearch, Warehouse } from "lucide-react"; |
||||||
|
import Link from 'next/link'; |
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; |
||||||
|
import { AuthContext } from '@/helpers/context/AuthProvider'; |
||||||
|
|
||||||
|
const apps = [ |
||||||
|
{ icon: UserRoundCog, name: 'PIMS', color: 'text-red-600' , link : `${process.env.NEXT_PUBLIC_HRMS_FRONTEND}`}, |
||||||
|
{ icon: Warehouse, name: 'Asset', color: 'text-orange-600' , link : `${process.env.NEXT_PUBLIC_HRMS_FRONTEND}`}, |
||||||
|
{ icon: Headset, name: 'CRMS', color: 'text-blue-500' , link : `${process.env.NEXT_PUBLIC_CRM_FRONTEND}`}, |
||||||
|
{ icon: GraduationCap, name: 'TMS', color: 'text-yellow-500' , link : `${process.env.NEXT_PUBLIC_TMS_FRONTEND}`}, |
||||||
|
{ icon: UserSearch, name: 'Job Board', color: 'text-green-500' , link : `${process.env.NEXT_PUBLIC_EMPLOYEE_FRONTEND}`}, |
||||||
|
]; |
||||||
|
|
||||||
|
const ApplicationSwitch : React.FC = () => { |
||||||
|
|
||||||
|
const { user } = useContext(AuthContext)
|
||||||
|
return ( |
||||||
|
<DropdownMenu> |
||||||
|
<DropdownMenuTrigger asChild> |
||||||
|
<Button |
||||||
|
variant="outline" |
||||||
|
className="relative h-8 w-8 rounded-full" |
||||||
|
> |
||||||
|
<Grid3x3 className="w-[1.2rem] h-[1.2rem]"/> |
||||||
|
</Button> |
||||||
|
</DropdownMenuTrigger> |
||||||
|
<DropdownMenuContent align="end" className="w-60 p-2"> |
||||||
|
<div className="grid grid-cols-3 gap-4 p-2"> |
||||||
|
<DropdownMenuItem> |
||||||
|
<Link href={`${process.env.IDP_FRONTEND}`} className=''> |
||||||
|
<Avatar className="h-8 w-8"> |
||||||
|
{ |
||||||
|
user?.pfpName ?
|
||||||
|
<AvatarImage src={user?.pfpName} alt={user.firstName} /> :
|
||||||
|
<AvatarFallback className="bg-transparent">uk</AvatarFallback> |
||||||
|
} |
||||||
|
</Avatar> |
||||||
|
<span>Profile</span> |
||||||
|
</Link> |
||||||
|
</DropdownMenuItem> |
||||||
|
{apps.map((app) => ( |
||||||
|
<DropdownMenuItem |
||||||
|
key={app.name} |
||||||
|
className="flex flex-col items-center justify-center p-2 focus:bg-accent cursor-pointer" |
||||||
|
> |
||||||
|
<Link href={app.link} className={`hover:text-${app.color}`}> |
||||||
|
<app.icon className={`h-6 w-6 mb-1 ${app.color}`} /> |
||||||
|
<span className="text-xs">{app.name}</span> |
||||||
|
</Link> |
||||||
|
</DropdownMenuItem> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</DropdownMenuContent> |
||||||
|
</DropdownMenu> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default ApplicationSwitch; |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
"use client"; |
||||||
|
|
||||||
|
import * as React from "react"; |
||||||
|
// import { useTheme } from "next-themes";
|
||||||
|
import { MoonIcon, SunIcon } from "@radix-ui/react-icons"; |
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { |
||||||
|
Tooltip, |
||||||
|
TooltipContent, |
||||||
|
TooltipTrigger, |
||||||
|
TooltipProvider |
||||||
|
} from "@/components/ui/tooltip"; |
||||||
|
import { useTheme } from "@/hooks/use-theme"; |
||||||
|
|
||||||
|
export function ModeToggle() { |
||||||
|
|
||||||
|
const { toggleTheme, theme } = useTheme(); |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<TooltipProvider disableHoverableContent> |
||||||
|
<Tooltip delayDuration={100}> |
||||||
|
<TooltipTrigger asChild> |
||||||
|
<Button |
||||||
|
className="rounded-full w-8 h-8 bg-background" |
||||||
|
variant="outline" |
||||||
|
size="icon" |
||||||
|
onClick={() => toggleTheme()} |
||||||
|
> |
||||||
|
<SunIcon className="w-[1.2rem] h-[1.2rem] rotate-90 scale-0 transition-transform ease-in-out duration-500 dark:rotate-0 dark:scale-100" /> |
||||||
|
<MoonIcon className="absolute w-[1.2rem] h-[1.2rem] rotate-0 scale-1000 transition-transform ease-in-out duration-500 dark:-rotate-90 dark:scale-0" /> |
||||||
|
<span className="sr-only">Switch Theme</span> |
||||||
|
</Button> |
||||||
|
</TooltipTrigger> |
||||||
|
<TooltipContent side="bottom">Switch Theme</TooltipContent> |
||||||
|
</Tooltip> |
||||||
|
</TooltipProvider> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
import Link from "next/link"; |
||||||
|
import { MenuIcon, PanelsTopLeft } from "lucide-react"; |
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { |
||||||
|
Sheet, |
||||||
|
SheetHeader, |
||||||
|
SheetContent, |
||||||
|
SheetTrigger, |
||||||
|
SheetTitle |
||||||
|
} from "@/components/ui/sheet"; |
||||||
|
import { Menu } from "../../Sidebar/_partials/menu"; |
||||||
|
|
||||||
|
export function SheetMenu() { |
||||||
|
return ( |
||||||
|
<Sheet> |
||||||
|
<SheetTrigger className="lg:hidden" asChild> |
||||||
|
<Button className="h-8" variant="outline" size="icon"> |
||||||
|
<MenuIcon size={20} /> |
||||||
|
</Button> |
||||||
|
</SheetTrigger> |
||||||
|
<SheetContent className="sm:w-72 px-3 h-full flex flex-col" side="left"> |
||||||
|
<SheetHeader> |
||||||
|
<Button |
||||||
|
className="flex justify-center items-center pb-2 pt-1" |
||||||
|
variant="link" |
||||||
|
asChild |
||||||
|
> |
||||||
|
<Link href="/dashboard" className="flex items-center gap-2"> |
||||||
|
<PanelsTopLeft className="w-6 h-6 mr-1" /> |
||||||
|
<SheetTitle className="font-bold text-lg">Brand</SheetTitle> |
||||||
|
</Link> |
||||||
|
</Button> |
||||||
|
</SheetHeader> |
||||||
|
<Menu isOpen /> |
||||||
|
</SheetContent> |
||||||
|
</Sheet> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,93 @@ |
|||||||
|
"use client"; |
||||||
|
|
||||||
|
import Link from "next/link"; |
||||||
|
import { LayoutGrid, LogOut, RefreshCcw, User } from "lucide-react"; |
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; |
||||||
|
|
||||||
|
import { |
||||||
|
Tooltip, |
||||||
|
TooltipContent, |
||||||
|
TooltipTrigger, |
||||||
|
TooltipProvider |
||||||
|
} from "@/components/ui/tooltip"; |
||||||
|
import { |
||||||
|
DropdownMenu, |
||||||
|
DropdownMenuContent, |
||||||
|
DropdownMenuGroup, |
||||||
|
DropdownMenuItem, |
||||||
|
DropdownMenuLabel, |
||||||
|
DropdownMenuSeparator, |
||||||
|
DropdownMenuTrigger |
||||||
|
} from "@/components/ui/dropdown-menu"; |
||||||
|
import { useContext } from "react"; |
||||||
|
import { AuthContext } from "@/helpers/context/AuthProvider"; |
||||||
|
|
||||||
|
export function UserNav() { |
||||||
|
|
||||||
|
const { user , logout } = useContext(AuthContext) |
||||||
|
|
||||||
|
return ( |
||||||
|
<DropdownMenu> |
||||||
|
<TooltipProvider disableHoverableContent> |
||||||
|
<Tooltip delayDuration={100}> |
||||||
|
<TooltipTrigger asChild> |
||||||
|
<DropdownMenuTrigger asChild> |
||||||
|
<Button |
||||||
|
variant="outline" |
||||||
|
className="relative h-8 w-8 rounded-full" |
||||||
|
> |
||||||
|
<Avatar className="h-8 w-8"> |
||||||
|
{ |
||||||
|
user?.pfpName ?
|
||||||
|
<AvatarImage src={user?.pfpName} alt={user.firstName} /> :
|
||||||
|
<AvatarFallback className="bg-transparent">uk</AvatarFallback> |
||||||
|
} |
||||||
|
</Avatar> |
||||||
|
</Button> |
||||||
|
</DropdownMenuTrigger> |
||||||
|
</TooltipTrigger> |
||||||
|
<TooltipContent side="bottom">Profile</TooltipContent> |
||||||
|
</Tooltip> |
||||||
|
</TooltipProvider> |
||||||
|
|
||||||
|
<DropdownMenuContent className="w-56" align="end" forceMount> |
||||||
|
<DropdownMenuLabel className="font-normal"> |
||||||
|
<div className="flex flex-col space-y-1"> |
||||||
|
<p className="text-sm font-medium leading-none">{user?.firstName}</p> |
||||||
|
<p className="text-xs leading-none text-muted-foreground"> |
||||||
|
{user?.email} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</DropdownMenuLabel> |
||||||
|
<DropdownMenuSeparator /> |
||||||
|
<DropdownMenuGroup> |
||||||
|
<DropdownMenuItem className="hover:cursor-pointer" asChild> |
||||||
|
<Link href="/dashboard" className="flex items-center"> |
||||||
|
<LayoutGrid className="w-4 h-4 mr-3 text-muted-foreground" /> |
||||||
|
Dashboard |
||||||
|
</Link> |
||||||
|
</DropdownMenuItem> |
||||||
|
<DropdownMenuItem className="hover:cursor-pointer" asChild> |
||||||
|
<Link href="/account" className="flex items-center"> |
||||||
|
<User className="w-4 h-4 mr-3 text-muted-foreground" /> |
||||||
|
Account |
||||||
|
</Link> |
||||||
|
</DropdownMenuItem> |
||||||
|
<DropdownMenuItem className="hover:cursor-pointer" asChild> |
||||||
|
<Link href="/account" className="flex items-center"> |
||||||
|
<RefreshCcw className="w-4 h-4 mr-3 text-muted-foreground" /> |
||||||
|
Switch Company |
||||||
|
</Link> |
||||||
|
</DropdownMenuItem> |
||||||
|
</DropdownMenuGroup> |
||||||
|
<DropdownMenuSeparator /> |
||||||
|
<DropdownMenuItem className="hover:cursor-pointer" onClick={() => logout()}> |
||||||
|
<LogOut className="w-4 h-4 mr-3 text-muted-foreground" /> |
||||||
|
Sign out |
||||||
|
</DropdownMenuItem> |
||||||
|
</DropdownMenuContent> |
||||||
|
</DropdownMenu> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,123 @@ |
|||||||
|
import { Button } from "@/components/ui/button" |
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuGroup,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger
|
||||||
|
} from "@/components/ui/dropdown-menu" |
||||||
|
import { BellIcon } from "lucide-react" |
||||||
|
import Image from "next/image" |
||||||
|
import Link from "next/link" |
||||||
|
|
||||||
|
const UserNotifications : React.FC = () => { |
||||||
|
return( |
||||||
|
<DropdownMenu> |
||||||
|
<DropdownMenuTrigger asChild> |
||||||
|
<Button |
||||||
|
variant="outline" |
||||||
|
className="relative h-8 w-8 rounded-full" |
||||||
|
> |
||||||
|
<BellIcon className="w-[1.2rem] h-[1.2rem]"/> |
||||||
|
</Button> |
||||||
|
</DropdownMenuTrigger> |
||||||
|
|
||||||
|
<DropdownMenuContent className="w-80" align="end" forceMount> |
||||||
|
<DropdownMenuLabel className="font-normal"> |
||||||
|
<div className="flex flex-col space-y-1"> |
||||||
|
<p className="text-sm font-medium leading-none">Notifications</p> |
||||||
|
</div> |
||||||
|
</DropdownMenuLabel> |
||||||
|
<DropdownMenuSeparator /> |
||||||
|
<DropdownMenuGroup> |
||||||
|
<DropdownMenuItem className="hover:cursor-pointer" asChild> |
||||||
|
<p>Notification</p> |
||||||
|
</DropdownMenuItem> |
||||||
|
<DropdownMenuItem> |
||||||
|
<Link href="https://smarthr.dreamstechnologies.com/laravel/template/public/activity"> |
||||||
|
<div className="flex gap-2"> |
||||||
|
<div className="w-[35px] h-[35px] relative"> |
||||||
|
<Image src="https://smarthr.dreamstechnologies.com/laravel/template/public/build/img/profiles/avatar-27.jpg"
|
||||||
|
alt="Profile" fill className="aspect-square rounded-full"/> |
||||||
|
</div> |
||||||
|
<div className="flex-1"> |
||||||
|
<p className="mb-1"><span className="text-dark font-semibold">Shawn </span> |
||||||
|
performance in Math is below the threshold. |
||||||
|
</p> |
||||||
|
<span className="text-xs text-right block">Just Now</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Link> |
||||||
|
</DropdownMenuItem> |
||||||
|
|
||||||
|
</DropdownMenuGroup> |
||||||
|
|
||||||
|
</DropdownMenuContent> |
||||||
|
</DropdownMenu> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
{/* <div class="d-flex flex-column"> |
||||||
|
<div class="border-bottom mb-3 pb-3"> |
||||||
|
<a href="https://smarthr.dreamstechnologies.com/laravel/template/public/activity"> |
||||||
|
<div class="d-flex"> |
||||||
|
<span class="avatar avatar-lg me-2 flex-shrink-0"> |
||||||
|
<img src="https://smarthr.dreamstechnologies.com/laravel/template/public/build/img/profiles/avatar-27.jpg" alt="Profile"> |
||||||
|
</span> |
||||||
|
<div class="flex-grow-1"> |
||||||
|
<p class="mb-1"><span class="text-dark fw-semibold">Shawn</span> |
||||||
|
performance in Math is below the threshold.</p> |
||||||
|
<span>Just Now</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="border-bottom mb-3 pb-3"> |
||||||
|
<a href="https://smarthr.dreamstechnologies.com/laravel/template/public/activity" class="pb-0"> |
||||||
|
<div class="d-flex"> |
||||||
|
<span class="avatar avatar-lg me-2 flex-shrink-0"> |
||||||
|
<img src="https://smarthr.dreamstechnologies.com/laravel/template/public/build/img/profiles/avatar-23.jpg" alt="Profile"> |
||||||
|
</span> |
||||||
|
<div class="flex-grow-1"> |
||||||
|
<p class="mb-1"><span class="text-dark fw-semibold">Sylvia</span> added |
||||||
|
appointment on 02:00 PM</p> |
||||||
|
<span>10 mins ago</span> |
||||||
|
<div class="d-flex justify-content-start align-items-center mt-1"> |
||||||
|
<span class="btn btn-light btn-sm me-2">Deny</span> |
||||||
|
<span class="btn btn-primary btn-sm">Approve</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="border-bottom mb-3 pb-3"> |
||||||
|
<a href="https://smarthr.dreamstechnologies.com/laravel/template/public/activity"> |
||||||
|
<div class="d-flex"> |
||||||
|
<span class="avatar avatar-lg me-2 flex-shrink-0"> |
||||||
|
<img src="https://smarthr.dreamstechnologies.com/laravel/template/public/build/img/profiles/avatar-25.jpg" alt="Profile"> |
||||||
|
</span> |
||||||
|
<div class="flex-grow-1"> |
||||||
|
<p class="mb-1">New student record <span class="text-dark fw-semibold"> George</span> is created by <span class="text-dark fw-semibold">Teressa</span></p> |
||||||
|
<span>2 hrs ago</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
<div class="border-0 mb-3 pb-0"> |
||||||
|
<a href="https://smarthr.dreamstechnologies.com/laravel/template/public/activity"> |
||||||
|
<div class="d-flex"> |
||||||
|
<span class="avatar avatar-lg me-2 flex-shrink-0"> |
||||||
|
<img src="https://smarthr.dreamstechnologies.com/laravel/template/public/build/img/profiles/avatar-01.jpg" alt="Profile"> |
||||||
|
</span> |
||||||
|
<div class="flex-grow-1"> |
||||||
|
<p class="mb-1">A new teacher record for <span class="text-dark fw-semibold">Elisa</span> </p> |
||||||
|
<span>09:45 AM</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</a> |
||||||
|
</div> |
||||||
|
</div> */} |
||||||
|
|
||||||
|
export default UserNotifications |
||||||
@ -0,0 +1,116 @@ |
|||||||
|
import { PaginationEllipsis, PaginationItem, PaginationLink } from "@/components/ui/pagination"; |
||||||
|
|
||||||
|
export const generatePaginationLinks = ( |
||||||
|
currentPage: number, |
||||||
|
totalPages: number, |
||||||
|
onPageChange: (page: number) => void |
||||||
|
) => { |
||||||
|
const pages: JSX.Element[] = []; |
||||||
|
|
||||||
|
// Show all pages if total pages is 6 or less
|
||||||
|
if (totalPages <= 6) { |
||||||
|
for (let i = 1; i <= totalPages; i++) { |
||||||
|
pages.push( |
||||||
|
<PaginationItem key={i}> |
||||||
|
<PaginationLink |
||||||
|
onClick={() => onPageChange(i)} |
||||||
|
isActive={i === currentPage} |
||||||
|
className="cursor-pointer" |
||||||
|
> |
||||||
|
{i} |
||||||
|
</PaginationLink> |
||||||
|
</PaginationItem> |
||||||
|
); |
||||||
|
} |
||||||
|
return pages; |
||||||
|
} |
||||||
|
|
||||||
|
// Always show first page
|
||||||
|
pages.push( |
||||||
|
<PaginationItem key={1}> |
||||||
|
<PaginationLink |
||||||
|
onClick={() => onPageChange(1)} |
||||||
|
isActive={1 === currentPage} |
||||||
|
className="cursor-pointer" |
||||||
|
> |
||||||
|
1 |
||||||
|
</PaginationLink> |
||||||
|
</PaginationItem> |
||||||
|
); |
||||||
|
|
||||||
|
// Calculate range for middle section
|
||||||
|
let startPage = Math.max(2, currentPage - 1); |
||||||
|
let endPage = Math.min(totalPages - 1, currentPage + 1); |
||||||
|
|
||||||
|
// Show ellipsis after first page if needed
|
||||||
|
if (startPage > 2) { |
||||||
|
if (startPage > 3) { |
||||||
|
pages.push(<PaginationEllipsis key="ellipsis-1" />); |
||||||
|
} |
||||||
|
// Show page 2 if we're not starting from it
|
||||||
|
if (startPage > 2) { |
||||||
|
pages.push( |
||||||
|
<PaginationItem key={2}> |
||||||
|
<PaginationLink |
||||||
|
onClick={() => onPageChange(2)} |
||||||
|
isActive={2 === currentPage} |
||||||
|
className="cursor-pointer" |
||||||
|
> |
||||||
|
2 |
||||||
|
</PaginationLink> |
||||||
|
</PaginationItem> |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Add middle pages
|
||||||
|
for (let i = startPage; i <= endPage; i++) { |
||||||
|
pages.push( |
||||||
|
<PaginationItem key={i}> |
||||||
|
<PaginationLink |
||||||
|
onClick={() => onPageChange(i)} |
||||||
|
isActive={i === currentPage} |
||||||
|
className="cursor-pointer" |
||||||
|
> |
||||||
|
{i} |
||||||
|
</PaginationLink> |
||||||
|
</PaginationItem> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
// Show ellipsis before last page if needed
|
||||||
|
if (endPage < totalPages - 1) { |
||||||
|
// Show second to last page if we're not ending on it
|
||||||
|
if (endPage < totalPages - 2) { |
||||||
|
pages.push( |
||||||
|
<PaginationItem key={totalPages - 1}> |
||||||
|
<PaginationLink |
||||||
|
onClick={() => onPageChange(totalPages - 1)} |
||||||
|
isActive={totalPages - 1 === currentPage} |
||||||
|
className="cursor-pointer" |
||||||
|
> |
||||||
|
{totalPages - 1} |
||||||
|
</PaginationLink> |
||||||
|
</PaginationItem> |
||||||
|
); |
||||||
|
} |
||||||
|
if (endPage < totalPages - 2) { |
||||||
|
pages.push(<PaginationEllipsis key="ellipsis-2" />); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Always show last page
|
||||||
|
pages.push( |
||||||
|
<PaginationItem key={totalPages}> |
||||||
|
<PaginationLink |
||||||
|
onClick={() => onPageChange(totalPages)} |
||||||
|
isActive={totalPages === currentPage} |
||||||
|
className="cursor-pointer" |
||||||
|
> |
||||||
|
{totalPages} |
||||||
|
</PaginationLink> |
||||||
|
</PaginationItem> |
||||||
|
); |
||||||
|
|
||||||
|
return pages; |
||||||
|
}; |
||||||
@ -0,0 +1,121 @@ |
|||||||
|
import * as React from "react" |
||||||
|
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" |
||||||
|
|
||||||
|
import { ButtonProps, buttonVariants } from "@/components/ui/button" |
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( |
||||||
|
<nav |
||||||
|
role="navigation" |
||||||
|
aria-label="pagination" |
||||||
|
className={cn("mx-auto flex w-full justify-center", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
|
||||||
|
const PaginationContent = React.forwardRef< |
||||||
|
HTMLUListElement, |
||||||
|
React.ComponentProps<"ul"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ul |
||||||
|
ref={ref} |
||||||
|
className={cn("flex flex-row items-center gap-1", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
PaginationContent.displayName = "PaginationContent" |
||||||
|
|
||||||
|
const PaginationItem = React.forwardRef< |
||||||
|
HTMLLIElement, |
||||||
|
React.ComponentProps<"li"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<li ref={ref} className={cn("hover:cursor-pointer", className)} {...props} /> |
||||||
|
)) |
||||||
|
PaginationItem.displayName = "PaginationItem" |
||||||
|
|
||||||
|
type PaginationLinkProps = { |
||||||
|
isActive?: boolean; |
||||||
|
disabled?: boolean; |
||||||
|
} & Pick<ButtonProps, "size"> & |
||||||
|
React.ComponentProps<"a"> |
||||||
|
|
||||||
|
const PaginationLink = ({ |
||||||
|
className, |
||||||
|
isActive, |
||||||
|
size = "icon", |
||||||
|
disabled = false, |
||||||
|
...props |
||||||
|
}: PaginationLinkProps) => ( |
||||||
|
<PaginationItem> |
||||||
|
<a |
||||||
|
aria-current={isActive ? "page" : undefined} |
||||||
|
role="link" |
||||||
|
aria-disabled={disabled} |
||||||
|
className={cn( |
||||||
|
buttonVariants({ |
||||||
|
variant: isActive ? "default" : "ghost", |
||||||
|
size, |
||||||
|
}), |
||||||
|
disabled && "cursor-not-allowed pointer-events-none", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</PaginationItem> |
||||||
|
) |
||||||
|
PaginationLink.displayName = "PaginationLink" |
||||||
|
|
||||||
|
const PaginationPrevious = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof PaginationLink>) => ( |
||||||
|
<PaginationLink |
||||||
|
aria-label="Go to previous page" |
||||||
|
size="default" |
||||||
|
className={cn("gap-1 pl-2.5", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ChevronLeft className="h-4 w-4" /> |
||||||
|
<span>Previous</span> |
||||||
|
</PaginationLink> |
||||||
|
) |
||||||
|
PaginationPrevious.displayName = "PaginationPrevious" |
||||||
|
|
||||||
|
const PaginationNext = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof PaginationLink>) => ( |
||||||
|
<PaginationLink |
||||||
|
aria-label="Go to next page" |
||||||
|
size="default" |
||||||
|
className={cn("gap-1 pr-2.5", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<span>Next</span> |
||||||
|
<ChevronRight className="h-4 w-4" /> |
||||||
|
</PaginationLink> |
||||||
|
) |
||||||
|
|
||||||
|
const PaginationEllipsis = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"span">) => ( |
||||||
|
<span |
||||||
|
aria-hidden |
||||||
|
className={cn("flex h-9 w-9 items-center justify-center", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<MoreHorizontal className="h-4 w-4" /> |
||||||
|
<span className="sr-only">More pages</span> |
||||||
|
</span> |
||||||
|
) |
||||||
|
|
||||||
|
export { |
||||||
|
Pagination, |
||||||
|
PaginationContent, |
||||||
|
PaginationEllipsis, |
||||||
|
PaginationItem, |
||||||
|
PaginationLink, |
||||||
|
PaginationNext, |
||||||
|
PaginationPrevious, |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
import { Pagination, PaginationContent, PaginationItem, PaginationNext, PaginationPrevious } from "@/components/ui/pagination"; |
||||||
|
import { generatePaginationLinks } from "./GeneratePages"; |
||||||
|
import { useRouter, useSearchParams } from "next/navigation"; |
||||||
|
|
||||||
|
type PaginatorProps = { |
||||||
|
currentPage: number; |
||||||
|
totalPages: number; |
||||||
|
showPreviousNext: boolean; |
||||||
|
mutate : () => void |
||||||
|
} |
||||||
|
|
||||||
|
export default function Paginator({ |
||||||
|
currentPage, |
||||||
|
totalPages, |
||||||
|
showPreviousNext, |
||||||
|
mutate |
||||||
|
}: PaginatorProps) { |
||||||
|
|
||||||
|
const searchParams = useSearchParams() |
||||||
|
const router = useRouter() |
||||||
|
|
||||||
|
const onPageChange = (page : number) : void => { |
||||||
|
const currentParams = new URLSearchParams(searchParams.toString()) |
||||||
|
currentParams.set( 'page' , page.toString()) |
||||||
|
router.replace(`?${currentParams.toString()}`) |
||||||
|
mutate() |
||||||
|
} |
||||||
|
return ( |
||||||
|
<div className="w-fit ml-auto mt-4"> |
||||||
|
<Pagination> |
||||||
|
<PaginationContent> |
||||||
|
{showPreviousNext && totalPages ? ( |
||||||
|
<PaginationItem> |
||||||
|
<PaginationPrevious |
||||||
|
onClick={() => onPageChange(currentPage - 1)} |
||||||
|
disabled={currentPage - 1 < 1} |
||||||
|
className="cursor-pointer" |
||||||
|
/> |
||||||
|
</PaginationItem> |
||||||
|
) : null} |
||||||
|
{generatePaginationLinks(currentPage, totalPages, onPageChange)} |
||||||
|
{showPreviousNext && totalPages ? ( |
||||||
|
<PaginationItem> |
||||||
|
<PaginationNext |
||||||
|
onClick={() => onPageChange(currentPage + 1)} |
||||||
|
disabled={currentPage > totalPages - 1} |
||||||
|
className="cursor-pointer" |
||||||
|
/> |
||||||
|
</PaginationItem> |
||||||
|
): null} |
||||||
|
</PaginationContent> |
||||||
|
</Pagination> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
"use client"; |
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { SidebarContext } from "@/hooks/use-sidebar"; |
||||||
|
import { cn } from "@/lib/utils"; |
||||||
|
import Image from "next/image"; |
||||||
|
import Link from "next/link"; |
||||||
|
import { useContext } from "react"; |
||||||
|
import { SidebarToggle } from "./_partials/sidebarToggle"; |
||||||
|
import { Menu } from "./_partials/menu"; |
||||||
|
|
||||||
|
export default function AppSideBar() { |
||||||
|
|
||||||
|
const sidebar = useContext(SidebarContext) |
||||||
|
if (!sidebar) return <>No Sidebar provider</>; |
||||||
|
const { isOpen, toggleOpen, getOpenState, setIsHover, settings } = sidebar; |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<aside |
||||||
|
className={cn( |
||||||
|
"fixed top-0 left-0 z-20 h-screen -translate-x-full lg:translate-x-0 transition-[width] ease-in-out duration-300", |
||||||
|
!getOpenState() ? "w-[90px]" : "w-72", |
||||||
|
settings.disabled && "hidden" |
||||||
|
)} |
||||||
|
> |
||||||
|
<SidebarToggle isOpen={isOpen} setIsOpen={toggleOpen} /> |
||||||
|
<div |
||||||
|
onMouseEnter={() => setIsHover(true)} |
||||||
|
onMouseLeave={() => setIsHover(false)} |
||||||
|
className="relative h-full flex flex-col px-3 py-4 overflow-y-auto shadow-md dark:shadow-zinc-800" |
||||||
|
> |
||||||
|
<Button |
||||||
|
className={cn( |
||||||
|
"transition-transform ease-in-out duration-300 mb-1", |
||||||
|
!getOpenState() ? "translate-x-1" : "translate-x-0" |
||||||
|
)} |
||||||
|
variant="link" |
||||||
|
asChild |
||||||
|
> |
||||||
|
</Button> |
||||||
|
<Link href="/dashboard" className="block py-1"> |
||||||
|
<Image src={'https://www.kumarijob.com/soft-assets/images/logo.svg'} width={150} height={300} alt="brand-logo" className="mx-auto block"/> |
||||||
|
</Link> |
||||||
|
<Menu isOpen={getOpenState()} /> |
||||||
|
</div> |
||||||
|
</aside> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,189 @@ |
|||||||
|
"use client"; |
||||||
|
|
||||||
|
import Link from "next/link"; |
||||||
|
import { useState } from "react"; |
||||||
|
import { ChevronDown, Dot, LucideIcon } from "lucide-react"; |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"; |
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { DropdownMenuArrow } from "@radix-ui/react-dropdown-menu"; |
||||||
|
import { |
||||||
|
Collapsible, |
||||||
|
CollapsibleContent, |
||||||
|
CollapsibleTrigger |
||||||
|
} from "@/components/ui/collapsible"; |
||||||
|
import { |
||||||
|
Tooltip, |
||||||
|
TooltipTrigger, |
||||||
|
TooltipContent, |
||||||
|
TooltipProvider |
||||||
|
} from "@/components/ui/tooltip"; |
||||||
|
import { |
||||||
|
DropdownMenu, |
||||||
|
DropdownMenuItem, |
||||||
|
DropdownMenuLabel, |
||||||
|
DropdownMenuTrigger, |
||||||
|
DropdownMenuContent, |
||||||
|
DropdownMenuSeparator |
||||||
|
} from "@/components/ui/dropdown-menu"; |
||||||
|
import { usePathname } from "next/navigation"; |
||||||
|
|
||||||
|
type Submenu = { |
||||||
|
href: string; |
||||||
|
label: string; |
||||||
|
active?: boolean; |
||||||
|
}; |
||||||
|
|
||||||
|
interface CollapseMenuButtonProps { |
||||||
|
icon: LucideIcon; |
||||||
|
label: string; |
||||||
|
active: boolean; |
||||||
|
submenus: Submenu[]; |
||||||
|
isOpen: boolean | undefined; |
||||||
|
} |
||||||
|
|
||||||
|
export function CollapseMenuButton({ |
||||||
|
icon: Icon, |
||||||
|
label, |
||||||
|
submenus, |
||||||
|
isOpen |
||||||
|
}: CollapseMenuButtonProps) { |
||||||
|
const pathname = usePathname(); |
||||||
|
const isSubmenuActive = submenus.some((submenu) => |
||||||
|
submenu.active === undefined ? submenu.href === pathname : submenu.active |
||||||
|
); |
||||||
|
const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive); |
||||||
|
|
||||||
|
return isOpen ? ( |
||||||
|
<Collapsible |
||||||
|
open={isCollapsed} |
||||||
|
onOpenChange={setIsCollapsed} |
||||||
|
className="w-full" |
||||||
|
> |
||||||
|
<CollapsibleTrigger |
||||||
|
className="[&[data-state=open]>div>div>svg]:rotate-180 mb-1" |
||||||
|
asChild |
||||||
|
> |
||||||
|
<Button |
||||||
|
variant={isSubmenuActive ? "secondary" : "ghost"} |
||||||
|
className="w-full justify-start h-10" |
||||||
|
> |
||||||
|
<div className="w-full items-center flex justify-between"> |
||||||
|
<div className="flex items-center"> |
||||||
|
<span className="mr-4"> |
||||||
|
<Icon size={18} /> |
||||||
|
</span> |
||||||
|
<p |
||||||
|
className={cn( |
||||||
|
"max-w-[150px] truncate", |
||||||
|
isOpen |
||||||
|
? "translate-x-0 opacity-100" |
||||||
|
: "-translate-x-96 opacity-0" |
||||||
|
)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"whitespace-nowrap", |
||||||
|
isOpen |
||||||
|
? "translate-x-0 opacity-100" |
||||||
|
: "-translate-x-96 opacity-0" |
||||||
|
)} |
||||||
|
> |
||||||
|
<ChevronDown |
||||||
|
size={18} |
||||||
|
className="transition-transform duration-200" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Button> |
||||||
|
</CollapsibleTrigger> |
||||||
|
<CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"> |
||||||
|
{submenus.map(({ href, label, active }, index) => ( |
||||||
|
<Button |
||||||
|
key={index} |
||||||
|
variant={ |
||||||
|
(active === undefined && pathname === href) || active |
||||||
|
? "secondary" |
||||||
|
: "ghost" |
||||||
|
} |
||||||
|
className="w-full justify-start h-10 mb-1" |
||||||
|
asChild |
||||||
|
> |
||||||
|
<Link href={href}> |
||||||
|
<span className="mr-4 ml-2"> |
||||||
|
<Dot size={18} /> |
||||||
|
</span> |
||||||
|
<p |
||||||
|
className={cn( |
||||||
|
"max-w-[170px] truncate", |
||||||
|
isOpen |
||||||
|
? "translate-x-0 opacity-100" |
||||||
|
: "-translate-x-96 opacity-0" |
||||||
|
)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
</Link> |
||||||
|
</Button> |
||||||
|
))} |
||||||
|
</CollapsibleContent> |
||||||
|
</Collapsible> |
||||||
|
) : ( |
||||||
|
<DropdownMenu> |
||||||
|
<TooltipProvider disableHoverableContent> |
||||||
|
<Tooltip delayDuration={100}> |
||||||
|
<TooltipTrigger asChild> |
||||||
|
<DropdownMenuTrigger asChild> |
||||||
|
<Button |
||||||
|
variant={isSubmenuActive ? "secondary" : "ghost"} |
||||||
|
className="w-full justify-start h-10 mb-1" |
||||||
|
> |
||||||
|
<div className="w-full items-center flex justify-between"> |
||||||
|
<div className="flex items-center"> |
||||||
|
<span className={cn(isOpen === false ? "" : "mr-4")}> |
||||||
|
<Icon size={18} /> |
||||||
|
</span> |
||||||
|
<p |
||||||
|
className={cn( |
||||||
|
"max-w-[200px] truncate", |
||||||
|
isOpen === false ? "opacity-0" : "opacity-100" |
||||||
|
)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Button> |
||||||
|
</DropdownMenuTrigger> |
||||||
|
</TooltipTrigger> |
||||||
|
<TooltipContent side="right" align="start" alignOffset={2}> |
||||||
|
{label} |
||||||
|
</TooltipContent> |
||||||
|
</Tooltip> |
||||||
|
</TooltipProvider> |
||||||
|
<DropdownMenuContent side="right" sideOffset={25} align="start"> |
||||||
|
<DropdownMenuLabel className="max-w-[190px] truncate"> |
||||||
|
{label} |
||||||
|
</DropdownMenuLabel> |
||||||
|
<DropdownMenuSeparator /> |
||||||
|
{submenus.map(({ href, label, active }, index) => ( |
||||||
|
<DropdownMenuItem key={index} asChild> |
||||||
|
<Link |
||||||
|
className={`cursor-pointer ${ |
||||||
|
((active === undefined && pathname === href) || active) && |
||||||
|
"bg-secondary" |
||||||
|
}`}
|
||||||
|
href={href} |
||||||
|
> |
||||||
|
<p className="max-w-[180px] truncate">{label}</p> |
||||||
|
</Link> |
||||||
|
</DropdownMenuItem> |
||||||
|
))} |
||||||
|
<DropdownMenuArrow className="fill-border" /> |
||||||
|
</DropdownMenuContent> |
||||||
|
</DropdownMenu> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
"use client"; |
||||||
|
|
||||||
|
import Link from "next/link"; |
||||||
|
import { Ellipsis, LogOut } from "lucide-react"; |
||||||
|
import { usePathname } from "next/navigation"; |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"; |
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
|
||||||
|
import { |
||||||
|
Tooltip, |
||||||
|
TooltipTrigger, |
||||||
|
TooltipContent, |
||||||
|
TooltipProvider |
||||||
|
} from "@/components/ui/tooltip"; |
||||||
|
import { useContext } from "react"; |
||||||
|
import { AuthContext } from "@/helpers/context/AuthProvider"; |
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area"; |
||||||
|
import { CollapseMenuButton } from "./collapseMenuButton"; |
||||||
|
import { getMenuList } from "@/utils/menu-list"; |
||||||
|
|
||||||
|
interface MenuProps { |
||||||
|
isOpen: boolean | undefined; |
||||||
|
} |
||||||
|
|
||||||
|
export function Menu({ isOpen }: MenuProps) { |
||||||
|
|
||||||
|
const pathname = usePathname(); |
||||||
|
const menuList = getMenuList(); |
||||||
|
const { logout } = useContext(AuthContext) |
||||||
|
|
||||||
|
return ( |
||||||
|
<ScrollArea className="[&>div>div[style]]:!block"> |
||||||
|
<nav className="mt-8 h-full w-full"> |
||||||
|
<ul className="flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-60px-32px)] items-start space-y-1 px-2"> |
||||||
|
{menuList.map(({ groupLabel, menus }, index) => ( |
||||||
|
<li className={cn("w-full", groupLabel ? "pt-3" : "")} key={index}> |
||||||
|
{(isOpen && groupLabel) || isOpen === undefined ? ( |
||||||
|
<p className="text-sm font-medium text-muted-foreground px-4 pb-2 max-w-[248px] truncate"> |
||||||
|
{groupLabel} |
||||||
|
</p> |
||||||
|
) : !isOpen && isOpen !== undefined && groupLabel ? ( |
||||||
|
<TooltipProvider> |
||||||
|
<Tooltip delayDuration={100}> |
||||||
|
<TooltipTrigger className="w-full"> |
||||||
|
<div className="w-full flex justify-center items-center"> |
||||||
|
<Ellipsis className="h-5 w-5" /> |
||||||
|
</div> |
||||||
|
</TooltipTrigger> |
||||||
|
<TooltipContent side="right"> |
||||||
|
<p>{groupLabel}</p> |
||||||
|
</TooltipContent> |
||||||
|
</Tooltip> |
||||||
|
</TooltipProvider> |
||||||
|
) : null} |
||||||
|
{menus.map( |
||||||
|
({ href, label, icon: Icon, active, submenus }, index) => |
||||||
|
!submenus || submenus.length === 0 ? ( |
||||||
|
<div className="w-full" key={index}> |
||||||
|
<TooltipProvider disableHoverableContent> |
||||||
|
<Tooltip delayDuration={100}> |
||||||
|
<TooltipTrigger asChild> |
||||||
|
<Button |
||||||
|
variant={ |
||||||
|
(active === undefined && |
||||||
|
pathname.startsWith(href)) || |
||||||
|
active |
||||||
|
? "secondary" |
||||||
|
: "ghost" |
||||||
|
} |
||||||
|
className="w-full justify-start h-10 mb-1" |
||||||
|
asChild |
||||||
|
> |
||||||
|
<Link href={href}> |
||||||
|
<span |
||||||
|
className={cn(isOpen === false ? "" : "mr-4")} |
||||||
|
> |
||||||
|
<Icon size={18} /> |
||||||
|
</span> |
||||||
|
<p |
||||||
|
className={cn( |
||||||
|
"max-w-[200px] truncate", |
||||||
|
isOpen === false |
||||||
|
? "-translate-x-96 opacity-0" |
||||||
|
: "translate-x-0 opacity-100" |
||||||
|
)} |
||||||
|
> |
||||||
|
{label} |
||||||
|
</p> |
||||||
|
</Link> |
||||||
|
</Button> |
||||||
|
</TooltipTrigger> |
||||||
|
{isOpen === false && ( |
||||||
|
<TooltipContent side="right"> |
||||||
|
{label} |
||||||
|
</TooltipContent> |
||||||
|
)} |
||||||
|
</Tooltip> |
||||||
|
</TooltipProvider> |
||||||
|
</div> |
||||||
|
) : ( |
||||||
|
<div className="w-full" key={index}> |
||||||
|
{/* working */} |
||||||
|
<CollapseMenuButton |
||||||
|
icon={Icon} |
||||||
|
label={label} |
||||||
|
active={ |
||||||
|
active === undefined |
||||||
|
? pathname.startsWith(href) |
||||||
|
: active |
||||||
|
} |
||||||
|
submenus={submenus} |
||||||
|
isOpen={isOpen} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
)} |
||||||
|
</li> |
||||||
|
))} |
||||||
|
<li className="w-full grow flex items-end"> |
||||||
|
<TooltipProvider disableHoverableContent> |
||||||
|
<Tooltip delayDuration={100}> |
||||||
|
<TooltipTrigger asChild> |
||||||
|
<Button |
||||||
|
onClick={() => {logout()}} |
||||||
|
variant="outline" |
||||||
|
className="w-full justify-center h-10 mt-5 text-red-500 hover:text-red-700" |
||||||
|
> |
||||||
|
<span className={cn(isOpen === false ? "" : "mr-2")}> |
||||||
|
<LogOut size={18} className=""/> |
||||||
|
</span> |
||||||
|
<p |
||||||
|
className={cn( |
||||||
|
"whitespace-nowrap", |
||||||
|
isOpen === false ? "opacity-0 hidden" : "opacity-100" |
||||||
|
)} |
||||||
|
> |
||||||
|
Sign out |
||||||
|
</p> |
||||||
|
</Button> |
||||||
|
</TooltipTrigger> |
||||||
|
{isOpen === false && ( |
||||||
|
<TooltipContent side="right" onClick={() => logout()}>Sign out</TooltipContent> |
||||||
|
)} |
||||||
|
</Tooltip> |
||||||
|
</TooltipProvider> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</nav> |
||||||
|
</ScrollArea> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
import { ChevronLeft } from "lucide-react"; |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"; |
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
|
||||||
|
interface SidebarToggleProps { |
||||||
|
isOpen: boolean | undefined; |
||||||
|
setIsOpen?: () => void; |
||||||
|
} |
||||||
|
|
||||||
|
export function SidebarToggle({ isOpen, setIsOpen }: SidebarToggleProps) { |
||||||
|
return ( |
||||||
|
<div className="invisible lg:visible absolute top-[12px] -right-[16px] z-20"> |
||||||
|
<Button |
||||||
|
onClick={() => setIsOpen?.()} |
||||||
|
className="rounded-md w-8 h-8" |
||||||
|
variant="outline" |
||||||
|
size="icon" |
||||||
|
> |
||||||
|
<ChevronLeft |
||||||
|
className={cn( |
||||||
|
"h-4 w-4 transition-transform ease-in-out duration-700", |
||||||
|
isOpen === false ? "rotate-180" : "rotate-0" |
||||||
|
)} |
||||||
|
/> |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
const AdminCommonContainer: React.FC<{children : React.ReactNode , className? :string , title? : string}> = ({ |
||||||
|
children ,
|
||||||
|
className ,
|
||||||
|
title |
||||||
|
}) => { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<title>{title ?? 'HRMS'}</title> |
||||||
|
<div className={`container py-4 px-4 sm:px-8 mx-auto ${className}`}>{children}</div> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default AdminCommonContainer |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
const AdminContentContainer : React.FC<{ |
||||||
|
children : React.ReactNode ,
|
||||||
|
className? : string |
||||||
|
}> = ({ |
||||||
|
children ,
|
||||||
|
className |
||||||
|
}) => { |
||||||
|
return( |
||||||
|
<div className={`border bg-card text-card-foreground shadow rounded-lg border-none mt-6 min-h-[50vh] p-6 mb-16 ${className}`}> |
||||||
|
{ |
||||||
|
children |
||||||
|
} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default AdminContentContainer |
||||||
@ -0,0 +1,125 @@ |
|||||||
|
import React, { useState, useRef, ChangeEvent } from 'react'; |
||||||
|
import { Button } from "@/components/ui/button"; |
||||||
|
import { |
||||||
|
Dialog, |
||||||
|
DialogContent, |
||||||
|
DialogHeader, |
||||||
|
DialogTitle, |
||||||
|
DialogTrigger, |
||||||
|
} from "@/components/ui/dialog"; |
||||||
|
import { Input } from "@/components/ui/input"; |
||||||
|
import { Label } from "@/components/ui/label"; |
||||||
|
import { Upload, Loader2 } from "lucide-react"; |
||||||
|
import { fetchHeader } from '@/helpers/fetch.helper'; |
||||||
|
import { useToast } from '@/hooks/use-toast'; |
||||||
|
|
||||||
|
const BulkUpload = ({ |
||||||
|
submitUrl ,
|
||||||
|
mutate |
||||||
|
} : { |
||||||
|
submitUrl : string |
||||||
|
mutate : () => void |
||||||
|
}) => { |
||||||
|
const { toast } = useToast() |
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
const [selectedFile, setSelectedFile] = useState<File | null>(null); |
||||||
|
const [open, setOpen] = useState(false); |
||||||
|
const fileInputRef = useRef<any>(null); |
||||||
|
|
||||||
|
const handleFileChange = (event : ChangeEvent<HTMLInputElement>) => { |
||||||
|
const file = event.target.files?.[0]; |
||||||
|
if (file) { |
||||||
|
setSelectedFile(file); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handleSubmit = async () => { |
||||||
|
if (!selectedFile) return; |
||||||
|
|
||||||
|
try { |
||||||
|
setIsLoading(true); |
||||||
|
|
||||||
|
const formData = new FormData(); |
||||||
|
formData.append('file', selectedFile); |
||||||
|
|
||||||
|
const response = await fetch(submitUrl, { |
||||||
|
method: 'POST', |
||||||
|
body: formData, |
||||||
|
headers : fetchHeader() |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
throw new Error('Upload failed'); |
||||||
|
} |
||||||
|
const data = await response.json() |
||||||
|
|
||||||
|
// Reset and close on success
|
||||||
|
setSelectedFile(null); |
||||||
|
setOpen(false); |
||||||
|
if (fileInputRef.current) { |
||||||
|
fileInputRef.current.value = ''; |
||||||
|
} |
||||||
|
toast({ |
||||||
|
title : 'Sucessfully Uploaded !', |
||||||
|
description : data?.message, |
||||||
|
variant : 'success' |
||||||
|
}) |
||||||
|
|
||||||
|
// You might want to trigger a refresh of the employee list here
|
||||||
|
|
||||||
|
} catch (error : any) { |
||||||
|
toast({ |
||||||
|
title : 'Upload failed', |
||||||
|
description : error?.message, |
||||||
|
variant : 'destructive' |
||||||
|
}) |
||||||
|
// You might want to show an error message to the user here
|
||||||
|
} finally { |
||||||
|
setIsLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Dialog open={open} onOpenChange={setOpen}> |
||||||
|
<DialogTrigger asChild> |
||||||
|
<Button variant={'outline'} className='justify-center'> |
||||||
|
<Upload className="mr-2 h-4 w-4" /> |
||||||
|
Import Employees |
||||||
|
</Button> |
||||||
|
</DialogTrigger> |
||||||
|
<DialogContent> |
||||||
|
<DialogHeader> |
||||||
|
<DialogTitle>Upload Employee Data</DialogTitle> |
||||||
|
</DialogHeader> |
||||||
|
<div className="grid gap-4 py-4"> |
||||||
|
<div className="space-y-2"> |
||||||
|
<Label htmlFor="file">Select File</Label> |
||||||
|
|
||||||
|
<Input |
||||||
|
id="file" |
||||||
|
type="file" |
||||||
|
accept=".csv,.xlsx,.xls" |
||||||
|
onChange={handleFileChange} |
||||||
|
ref={fileInputRef} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{selectedFile && ( |
||||||
|
<p className="text-sm text-muted-foreground"> |
||||||
|
Selected: {selectedFile.name} |
||||||
|
</p> |
||||||
|
)} |
||||||
|
<Button
|
||||||
|
onClick={handleSubmit} |
||||||
|
disabled={!selectedFile || isLoading} |
||||||
|
className="w-full" |
||||||
|
> |
||||||
|
Upload |
||||||
|
</Button> |
||||||
|
</div> |
||||||
|
</DialogContent> |
||||||
|
</Dialog> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default BulkUpload; |
||||||
@ -0,0 +1,14 @@ |
|||||||
|
const CommonContainer: React.FC<{children : React.ReactNode , className? :string , title? : string}> = ({ |
||||||
|
children ,
|
||||||
|
className ,
|
||||||
|
title |
||||||
|
}) => { |
||||||
|
return( |
||||||
|
<> |
||||||
|
<title>{title ?? 'HRMS'}</title> |
||||||
|
<div className={`container py-4 px-4 sm:px-8 mx-auto ${className}`}>{children}</div> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default CommonContainer |
||||||
@ -0,0 +1,17 @@ |
|||||||
|
const ContentContainer : React.FC<{ |
||||||
|
children : React.ReactNode ,
|
||||||
|
className? : string |
||||||
|
}> = ({ |
||||||
|
children ,
|
||||||
|
className |
||||||
|
}) => { |
||||||
|
return( |
||||||
|
<div className={`border bg-card text-card-foreground shadow rounded-lg border-none mt-6 min-h-[50vh] p-6 mb-16 ${className}`}> |
||||||
|
{ |
||||||
|
children |
||||||
|
} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default ContentContainer |
||||||
@ -0,0 +1,86 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { Button } from '../ui/button'; |
||||||
|
import { DownloadIcon } from 'lucide-react'; |
||||||
|
import { getEduConnectAccessToken } from '@/helpers/token.helper'; |
||||||
|
|
||||||
|
interface DownloadProps { |
||||||
|
url: string; |
||||||
|
filename?: string; |
||||||
|
className?: string; |
||||||
|
label?: string; |
||||||
|
onSuccess?: () => void; |
||||||
|
onError?: (error: Error) => void; |
||||||
|
headers?: Record<string, string>; |
||||||
|
} |
||||||
|
|
||||||
|
const Download = ({ |
||||||
|
url, |
||||||
|
filename = 'download', |
||||||
|
className = '', |
||||||
|
label = 'Download', |
||||||
|
onSuccess, |
||||||
|
onError, |
||||||
|
headers = {}, |
||||||
|
}: DownloadProps) => { |
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
|
||||||
|
const handleDownload = async () => { |
||||||
|
setIsLoading(true); |
||||||
|
try { |
||||||
|
const response = await fetch(url, { |
||||||
|
method: 'GET', |
||||||
|
headers: { |
||||||
|
Authorization : `Bearer ${getEduConnectAccessToken()}`, |
||||||
|
Accept : 'Application/json' |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
throw new Error(`HTTP error! status: ${response.status}`); |
||||||
|
} |
||||||
|
|
||||||
|
// Get filename from Content-Disposition header if available
|
||||||
|
const contentDisposition = response.headers.get('content-disposition'); |
||||||
|
const serverFilename = contentDisposition |
||||||
|
?.split(';') |
||||||
|
?.find(n => n.includes('filename=')) |
||||||
|
?.replace('filename=', '') |
||||||
|
?.trim(); |
||||||
|
|
||||||
|
const blob = await response.blob(); |
||||||
|
const downloadUrl = window.URL.createObjectURL(blob); |
||||||
|
const link = document.createElement('a'); |
||||||
|
link.href = downloadUrl; |
||||||
|
link.download = serverFilename || filename; |
||||||
|
|
||||||
|
// Append to document, click, and cleanup
|
||||||
|
document.body.appendChild(link); |
||||||
|
link.click(); |
||||||
|
document.body.removeChild(link); |
||||||
|
|
||||||
|
// Cleanup the URL object
|
||||||
|
window.URL.revokeObjectURL(downloadUrl); |
||||||
|
|
||||||
|
onSuccess?.(); |
||||||
|
} catch (error) { |
||||||
|
console.error('Download failed:', error); |
||||||
|
onError?.(error as Error); |
||||||
|
} finally { |
||||||
|
setIsLoading(false); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Button |
||||||
|
onClick={handleDownload} |
||||||
|
disabled={isLoading} |
||||||
|
variant={'outline'} |
||||||
|
className={`${className} w-full`} |
||||||
|
> |
||||||
|
<DownloadIcon className="mr-2 h-4 w-4" /> |
||||||
|
{label} |
||||||
|
</Button> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Download; |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import { Building2, Briefcase, Calendar, Edit, Trash2 } from 'lucide-react'; |
||||||
|
// import { EmployeeExperienceAPIInterface } from '@/helpers/apiSchema/employeeExperience.schema';
|
||||||
|
|
||||||
|
interface EmployeeExperienceListProps { |
||||||
|
experiences: any[]; |
||||||
|
onEdit: (experience: any) => void; |
||||||
|
onDelete: (experienceId: number) => void; |
||||||
|
} |
||||||
|
|
||||||
|
export const EmployeeExperienceList: React.FC<EmployeeExperienceListProps> = ({
|
||||||
|
experiences,
|
||||||
|
onEdit,
|
||||||
|
onDelete
|
||||||
|
}) => { |
||||||
|
return ( |
||||||
|
<ul className="employee-experience__list space-y-4"> |
||||||
|
{experiences?.map((experience) => ( |
||||||
|
<li key={experience.id} className="relative"> |
||||||
|
<div className="bg-white shadow-md rounded-lg p-4 border border-gray-200 hover:shadow-lg transition-shadow"> |
||||||
|
<div className="flex items-center mb-2"> |
||||||
|
<Building2 className="mr-3 text-blue-600" size={24} /> |
||||||
|
<h3 className="text-lg font-semibold text-gray-900"> |
||||||
|
{experience.company} |
||||||
|
</h3> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex items-center text-foreground"> |
||||||
|
<Briefcase className="mr-3" size={16} /> |
||||||
|
<span className="text-sm">{experience.designation}</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex items-center text-gray-600"> |
||||||
|
<Calendar className="mr-3 text-gray-500" size={16} /> |
||||||
|
<span className="text-foreground text-sm"> |
||||||
|
{new Date(experience.from_date).toLocaleDateString()} -
|
||||||
|
{new Date(experience.to_date).toLocaleDateString()} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mt-4 text-sm text-gray-500"> |
||||||
|
<span className="mr-2 bg-blue-100 text-blue-800 px-2 py-1 rounded"> |
||||||
|
{experience.industry} |
||||||
|
</span> |
||||||
|
<span className="bg-green-100 text-green-800 px-2 py-1 rounded"> |
||||||
|
Level {experience.job_level} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
|
||||||
|
{/* Action Buttons */} |
||||||
|
<div className="absolute top-4 right-4 flex space-x-2"> |
||||||
|
<button
|
||||||
|
onClick={() => onEdit(experience)} |
||||||
|
className="text-yellow-500 hover:text-yellow-700" |
||||||
|
title="Edit Experience" |
||||||
|
> |
||||||
|
<Edit size={20} /> |
||||||
|
</button> |
||||||
|
<button
|
||||||
|
onClick={() => onDelete(experience.id)} |
||||||
|
className="text-red-500 hover:text-red-700" |
||||||
|
title="Delete Experience" |
||||||
|
> |
||||||
|
<Trash2 size={20} /> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ul> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
const FormSection = ({ children , title } : {children : React.ReactNode , title : string}) => ( |
||||||
|
<div className="space-y-4 w-full"> |
||||||
|
<h3 className="text-lg font-semibold">{title}</h3> |
||||||
|
<div className="space-y-4"> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
|
||||||
|
export default FormSection |
||||||
|
|
||||||
@ -0,0 +1,9 @@ |
|||||||
|
import { Loader2 } from "lucide-react"; |
||||||
|
|
||||||
|
const Loader: React.FC = () => { |
||||||
|
return ( |
||||||
|
<Loader2 /> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Loader |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
import React from 'react' |
||||||
|
import { Skeleton } from '../ui/skeleton' |
||||||
|
import { |
||||||
|
TableRow, |
||||||
|
TableCell, |
||||||
|
} from "@/components/ui/table" |
||||||
|
|
||||||
|
interface TableSkeletonProps { |
||||||
|
columns?: number |
||||||
|
rows?: number |
||||||
|
} |
||||||
|
|
||||||
|
export function TableSkeleton({
|
||||||
|
columns = 5, |
||||||
|
rows = 5 |
||||||
|
}: TableSkeletonProps) { |
||||||
|
return ( |
||||||
|
<> |
||||||
|
{Array.from({ length: rows }).map((_, rowIndex) => ( |
||||||
|
<TableRow key={rowIndex} className="hover:bg-transparent"> |
||||||
|
{Array.from({ length: columns }).map((_, colIndex) => ( |
||||||
|
<TableCell key={colIndex} className="p-4"> |
||||||
|
<Skeleton className="h-4 w-[80%] bg-slate-200" /> |
||||||
|
</TableCell> |
||||||
|
))} |
||||||
|
</TableRow> |
||||||
|
))} |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default TableSkeleton; |
||||||
@ -0,0 +1,57 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as AccordionPrimitive from "@radix-ui/react-accordion" |
||||||
|
import { ChevronDown } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Accordion = AccordionPrimitive.Root |
||||||
|
|
||||||
|
const AccordionItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof AccordionPrimitive.Item>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AccordionPrimitive.Item |
||||||
|
ref={ref} |
||||||
|
className={cn("border-b rounded-lg", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
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.Trigger |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children} |
||||||
|
<ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" /> |
||||||
|
</AccordionPrimitive.Trigger> |
||||||
|
</AccordionPrimitive.Header> |
||||||
|
)) |
||||||
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName |
||||||
|
|
||||||
|
const AccordionContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof AccordionPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> |
||||||
|
>(({ className, children, ...props }, ref) => ( |
||||||
|
<AccordionPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<div className={cn("pb-4 pt-0", className)}>{children}</div> |
||||||
|
</AccordionPrimitive.Content> |
||||||
|
)) |
||||||
|
AccordionContent.displayName = AccordionPrimitive.Content.displayName |
||||||
|
|
||||||
|
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } |
||||||
@ -0,0 +1,141 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { buttonVariants } from "@/components/ui/button" |
||||||
|
|
||||||
|
const AlertDialog = AlertDialogPrimitive.Root |
||||||
|
|
||||||
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger |
||||||
|
|
||||||
|
const AlertDialogPortal = AlertDialogPrimitive.Portal |
||||||
|
|
||||||
|
const AlertDialogOverlay = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Overlay>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.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", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
ref={ref} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName |
||||||
|
|
||||||
|
const AlertDialogContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPortal> |
||||||
|
<AlertDialogOverlay /> |
||||||
|
<AlertDialogPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</AlertDialogPortal> |
||||||
|
)) |
||||||
|
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName |
||||||
|
|
||||||
|
const AlertDialogHeader = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col space-y-2 text-center sm:text-left", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
AlertDialogHeader.displayName = "AlertDialogHeader" |
||||||
|
|
||||||
|
const AlertDialogFooter = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
AlertDialogFooter.displayName = "AlertDialogFooter" |
||||||
|
|
||||||
|
const AlertDialogTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Title |
||||||
|
ref={ref} |
||||||
|
className={cn("text-lg font-semibold", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName |
||||||
|
|
||||||
|
const AlertDialogDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogDescription.displayName = |
||||||
|
AlertDialogPrimitive.Description.displayName |
||||||
|
|
||||||
|
const AlertDialogAction = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Action>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Action |
||||||
|
ref={ref} |
||||||
|
className={cn(buttonVariants(), className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName |
||||||
|
|
||||||
|
const AlertDialogCancel = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Cancel>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Cancel |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
buttonVariants({ variant: "outline" }), |
||||||
|
"mt-2 sm:mt-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName |
||||||
|
|
||||||
|
export { |
||||||
|
AlertDialog, |
||||||
|
AlertDialogPortal, |
||||||
|
AlertDialogOverlay, |
||||||
|
AlertDialogTrigger, |
||||||
|
AlertDialogContent, |
||||||
|
AlertDialogHeader, |
||||||
|
AlertDialogFooter, |
||||||
|
AlertDialogTitle, |
||||||
|
AlertDialogDescription, |
||||||
|
AlertDialogAction, |
||||||
|
AlertDialogCancel, |
||||||
|
} |
||||||
@ -0,0 +1,95 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as AvatarPrimitive from "@radix-ui/react-avatar" |
||||||
|
import { Dialog, DialogContent } from "@/components/ui/dialog" |
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { X } from "lucide-react" |
||||||
|
|
||||||
|
const Avatar = React.forwardRef< |
||||||
|
React.ElementRef<typeof AvatarPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AvatarPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full cursor-pointer", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
Avatar.displayName = AvatarPrimitive.Root.displayName |
||||||
|
|
||||||
|
interface EnhancedAvatarImageProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> { |
||||||
|
viewerClassName?: string |
||||||
|
} |
||||||
|
|
||||||
|
const AvatarImage = React.forwardRef< |
||||||
|
React.ElementRef<typeof AvatarPrimitive.Image>, |
||||||
|
EnhancedAvatarImageProps |
||||||
|
>(({ className, viewerClassName, src, alt, ...props }, ref) => { |
||||||
|
const [isOpen, setIsOpen] = React.useState(false) |
||||||
|
|
||||||
|
console.log(isOpen) |
||||||
|
return ( |
||||||
|
<> |
||||||
|
<AvatarPrimitive.Image |
||||||
|
ref={ref} |
||||||
|
src={src} |
||||||
|
alt={alt} |
||||||
|
className={cn("aspect-square h-full w-full", className)} |
||||||
|
onClick={() => setIsOpen(true)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
|
||||||
|
<Dialog open={isOpen} onOpenChange={setIsOpen}> |
||||||
|
<DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none" hideCloseButton> |
||||||
|
<div className="relative w-full h-full flex items-center justify-center rounded-lg overflow-hidden"> |
||||||
|
{/* Blurred background using the same image */} |
||||||
|
<div
|
||||||
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat blur-xl opacity-90 scale-110" |
||||||
|
style={{ backgroundImage: `url(${src})` }} |
||||||
|
/> |
||||||
|
{/* Semi-transparent overlay to improve contrast */} |
||||||
|
<div className="absolute inset-0 bg-white/10 backdrop-blur-xl" /> |
||||||
|
|
||||||
|
<button |
||||||
|
onClick={() => setIsOpen(false)} |
||||||
|
className="absolute top-4 right-4 text-white hover:text-gray-300 focus:outline-none z-10" |
||||||
|
> |
||||||
|
<X className="h-6 w-6" /> |
||||||
|
</button> |
||||||
|
|
||||||
|
<img |
||||||
|
src={src} |
||||||
|
alt={alt} |
||||||
|
className={cn( |
||||||
|
"relative z-10 max-w-full max-h-[80vh] object-contain", |
||||||
|
viewerClassName |
||||||
|
)} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</DialogContent> |
||||||
|
</Dialog> |
||||||
|
</> |
||||||
|
) |
||||||
|
}) |
||||||
|
AvatarImage.displayName = AvatarPrimitive.Image.displayName |
||||||
|
|
||||||
|
const AvatarFallback = React.forwardRef< |
||||||
|
React.ElementRef<typeof AvatarPrimitive.Fallback>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AvatarPrimitive.Fallback |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex h-full w-full items-center justify-center rounded-full bg-muted", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName |
||||||
|
|
||||||
|
export { Avatar, AvatarImage, AvatarFallback } |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
import * as React from "react" |
||||||
|
import { cva, type VariantProps } from "class-variance-authority" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const badgeVariants = cva( |
||||||
|
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs cursor-pointer font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", |
||||||
|
{ |
||||||
|
variants: { |
||||||
|
variant: { |
||||||
|
default: |
||||||
|
"border-transparent bg-primary text-primary-foreground shadow hover:opacity-[0.95]", |
||||||
|
secondary: |
||||||
|
"border-transparent bg-secondary text-secondary-foreground hover:opacity-[0.95]", |
||||||
|
destructive: |
||||||
|
"border-transparent bg-destructive text-destructive-foreground shadow hover:opacity-[0.95]", |
||||||
|
success :
|
||||||
|
"border-green-300 bg-green-500 text-destructive-foreground shadow hover:opacity-[0.95]", |
||||||
|
outline: "text-foreground", |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultVariants: { |
||||||
|
variant: "default", |
||||||
|
}, |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
export interface BadgeProps |
||||||
|
extends React.HTMLAttributes<HTMLDivElement>, |
||||||
|
VariantProps<typeof badgeVariants> {} |
||||||
|
|
||||||
|
function Badge({ className, variant, ...props }: BadgeProps) { |
||||||
|
return ( |
||||||
|
<div className={cn(badgeVariants({ variant }), className)} {...props} /> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export { Badge, badgeVariants } |
||||||
@ -0,0 +1,115 @@ |
|||||||
|
import * as React from "react" |
||||||
|
import { Slot } from "@radix-ui/react-slot" |
||||||
|
import { ChevronRight, MoreHorizontal } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Breadcrumb = React.forwardRef< |
||||||
|
HTMLElement, |
||||||
|
React.ComponentPropsWithoutRef<"nav"> & { |
||||||
|
separator?: React.ReactNode |
||||||
|
} |
||||||
|
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />) |
||||||
|
Breadcrumb.displayName = "Breadcrumb" |
||||||
|
|
||||||
|
const BreadcrumbList = React.forwardRef< |
||||||
|
HTMLOListElement, |
||||||
|
React.ComponentPropsWithoutRef<"ol"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ol |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
BreadcrumbList.displayName = "BreadcrumbList" |
||||||
|
|
||||||
|
const BreadcrumbItem = React.forwardRef< |
||||||
|
HTMLLIElement, |
||||||
|
React.ComponentPropsWithoutRef<"li"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<li |
||||||
|
ref={ref} |
||||||
|
className={cn("inline-flex items-center gap-1.5", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
BreadcrumbItem.displayName = "BreadcrumbItem" |
||||||
|
|
||||||
|
const BreadcrumbLink = React.forwardRef< |
||||||
|
HTMLAnchorElement, |
||||||
|
React.ComponentPropsWithoutRef<"a"> & { |
||||||
|
asChild?: boolean |
||||||
|
} |
||||||
|
>(({ asChild, className, ...props }, ref) => { |
||||||
|
const Comp = asChild ? Slot : "a" |
||||||
|
|
||||||
|
return ( |
||||||
|
<Comp |
||||||
|
ref={ref} |
||||||
|
className={cn("transition-colors hover:text-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
BreadcrumbLink.displayName = "BreadcrumbLink" |
||||||
|
|
||||||
|
const BreadcrumbPage = React.forwardRef< |
||||||
|
HTMLSpanElement, |
||||||
|
React.ComponentPropsWithoutRef<"span"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<span |
||||||
|
ref={ref} |
||||||
|
role="link" |
||||||
|
aria-disabled="true" |
||||||
|
aria-current="page" |
||||||
|
className={cn("font-normal text-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
BreadcrumbPage.displayName = "BreadcrumbPage" |
||||||
|
|
||||||
|
const BreadcrumbSeparator = ({ |
||||||
|
children, |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"li">) => ( |
||||||
|
<li |
||||||
|
role="presentation" |
||||||
|
aria-hidden="true" |
||||||
|
className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children ?? <ChevronRight />} |
||||||
|
</li> |
||||||
|
) |
||||||
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator" |
||||||
|
|
||||||
|
const BreadcrumbEllipsis = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"span">) => ( |
||||||
|
<span |
||||||
|
role="presentation" |
||||||
|
aria-hidden="true" |
||||||
|
className={cn("flex h-9 w-9 items-center justify-center", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<MoreHorizontal className="h-4 w-4" /> |
||||||
|
<span className="sr-only">More</span> |
||||||
|
</span> |
||||||
|
) |
||||||
|
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" |
||||||
|
|
||||||
|
export { |
||||||
|
Breadcrumb, |
||||||
|
BreadcrumbList, |
||||||
|
BreadcrumbItem, |
||||||
|
BreadcrumbLink, |
||||||
|
BreadcrumbPage, |
||||||
|
BreadcrumbSeparator, |
||||||
|
BreadcrumbEllipsis, |
||||||
|
} |
||||||
@ -0,0 +1,68 @@ |
|||||||
|
import * as React from "react" |
||||||
|
import { Slot } from "@radix-ui/react-slot" |
||||||
|
import { cva, type VariantProps } from "class-variance-authority" |
||||||
|
import { Loader, Loader2 } from "lucide-react" |
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const buttonVariants = cva( |
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", |
||||||
|
{ |
||||||
|
variants: { |
||||||
|
variant: { |
||||||
|
default: |
||||||
|
"bg-primary text-primary-foreground shadow hover:bg-primary/90", |
||||||
|
destructive: |
||||||
|
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", |
||||||
|
outline: |
||||||
|
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", |
||||||
|
secondary: |
||||||
|
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", |
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground", |
||||||
|
link: "text-primary underline-offset-4 hover:underline", |
||||||
|
}, |
||||||
|
size: { |
||||||
|
default: "h-9 px-4 py-2", |
||||||
|
sm: "h-8 rounded-md px-3 text-xs", |
||||||
|
lg: "h-10 rounded-md px-8", |
||||||
|
icon: "h-9 w-9", |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultVariants: { |
||||||
|
variant: "default", |
||||||
|
size: "default", |
||||||
|
}, |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
export interface ButtonProps |
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>, |
||||||
|
VariantProps<typeof buttonVariants> { |
||||||
|
asChild?: boolean |
||||||
|
isLoading?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( |
||||||
|
({ className, variant, size, isLoading = false, asChild = false, children, disabled, ...props }, ref) => { |
||||||
|
const Comp = asChild ? Slot : "button" |
||||||
|
return ( |
||||||
|
<Comp |
||||||
|
className={cn(buttonVariants({ variant, size, className }))} |
||||||
|
ref={ref} |
||||||
|
disabled={isLoading || disabled} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{isLoading ? ( |
||||||
|
<> |
||||||
|
<Loader className="animate-spin" /> |
||||||
|
{children} |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
children |
||||||
|
)} |
||||||
|
</Comp> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
Button.displayName = "Button" |
||||||
|
|
||||||
|
export { Button, buttonVariants } |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react" |
||||||
|
import { DayPicker } from "react-day-picker" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { buttonVariants } from "@/components/ui/button" |
||||||
|
|
||||||
|
export type CalendarProps = React.ComponentProps<typeof DayPicker> |
||||||
|
|
||||||
|
function Calendar({ |
||||||
|
className, |
||||||
|
classNames, |
||||||
|
showOutsideDays = true, |
||||||
|
...props |
||||||
|
}: CalendarProps) { |
||||||
|
return ( |
||||||
|
<DayPicker |
||||||
|
showOutsideDays={showOutsideDays} |
||||||
|
className={cn("p-3", className)} |
||||||
|
classNames={{ |
||||||
|
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", |
||||||
|
month: "space-y-4", |
||||||
|
caption: "flex justify-center pt-1 relative items-center", |
||||||
|
caption_label: "text-sm font-medium", |
||||||
|
nav: "space-x-1 flex items-center", |
||||||
|
nav_button: cn( |
||||||
|
buttonVariants({ variant: "outline" }), |
||||||
|
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" |
||||||
|
), |
||||||
|
nav_button_previous: "absolute left-1", |
||||||
|
nav_button_next: "absolute right-1", |
||||||
|
table: "w-full border-collapse space-y-1", |
||||||
|
head_row: "flex", |
||||||
|
head_cell: |
||||||
|
"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", |
||||||
|
row: "flex w-full mt-2", |
||||||
|
cell: cn( |
||||||
|
"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", |
||||||
|
props.mode === "range" |
||||||
|
? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" |
||||||
|
: "[&:has([aria-selected])]:rounded-md" |
||||||
|
), |
||||||
|
day: cn( |
||||||
|
buttonVariants({ variant: "ghost" }), |
||||||
|
"h-8 w-8 p-0 font-normal aria-selected:opacity-100" |
||||||
|
), |
||||||
|
day_range_start: "day-range-start", |
||||||
|
day_range_end: "day-range-end", |
||||||
|
day_selected: |
||||||
|
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", |
||||||
|
day_today: "bg-accent text-accent-foreground", |
||||||
|
day_outside: |
||||||
|
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", |
||||||
|
day_disabled: "text-muted-foreground opacity-50", |
||||||
|
day_range_middle: |
||||||
|
"aria-selected:bg-accent aria-selected:text-accent-foreground", |
||||||
|
day_hidden: "invisible", |
||||||
|
...classNames, |
||||||
|
}} |
||||||
|
components={{ |
||||||
|
IconLeft: ({ className, ...props }) => ( |
||||||
|
<ChevronLeft className={cn("h-4 w-4", className)} {...props} /> |
||||||
|
), |
||||||
|
IconRight: ({ className, ...props }) => ( |
||||||
|
<ChevronRight className={cn("h-4 w-4", className)} {...props} /> |
||||||
|
), |
||||||
|
}} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
Calendar.displayName = "Calendar" |
||||||
|
|
||||||
|
export { Calendar } |
||||||
@ -0,0 +1,76 @@ |
|||||||
|
import * as React from "react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Card = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.HTMLAttributes<HTMLDivElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"rounded-xl border bg-card text-card-foreground shadow", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
Card.displayName = "Card" |
||||||
|
|
||||||
|
const CardHeader = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.HTMLAttributes<HTMLDivElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className={cn("flex flex-col space-y-1.5 p-6", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
CardHeader.displayName = "CardHeader" |
||||||
|
|
||||||
|
const CardTitle = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.HTMLAttributes<HTMLDivElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className={cn("font-semibold leading-none tracking-tight", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
CardTitle.displayName = "CardTitle" |
||||||
|
|
||||||
|
const CardDescription = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.HTMLAttributes<HTMLDivElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
CardDescription.displayName = "CardDescription" |
||||||
|
|
||||||
|
const CardContent = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.HTMLAttributes<HTMLDivElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> |
||||||
|
)) |
||||||
|
CardContent.displayName = "CardContent" |
||||||
|
|
||||||
|
const CardFooter = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.HTMLAttributes<HTMLDivElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className={cn("flex items-center p-6 pt-0", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
CardFooter.displayName = "CardFooter" |
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } |
||||||
@ -0,0 +1,365 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as RechartsPrimitive from "recharts" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||||
|
const THEMES = { light: "", dark: ".dark" } as const |
||||||
|
|
||||||
|
export type ChartConfig = { |
||||||
|
[k in string]: { |
||||||
|
label?: React.ReactNode |
||||||
|
icon?: React.ComponentType |
||||||
|
} & ( |
||||||
|
| { color?: string; theme?: never } |
||||||
|
| { color?: never; theme: Record<keyof typeof THEMES, string> } |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
type ChartContextProps = { |
||||||
|
config: ChartConfig |
||||||
|
} |
||||||
|
|
||||||
|
const ChartContext = React.createContext<ChartContextProps | null>(null) |
||||||
|
|
||||||
|
function useChart() { |
||||||
|
const context = React.useContext(ChartContext) |
||||||
|
|
||||||
|
if (!context) { |
||||||
|
throw new Error("useChart must be used within a <ChartContainer />") |
||||||
|
} |
||||||
|
|
||||||
|
return context |
||||||
|
} |
||||||
|
|
||||||
|
const ChartContainer = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> & { |
||||||
|
config: ChartConfig |
||||||
|
children: React.ComponentProps< |
||||||
|
typeof RechartsPrimitive.ResponsiveContainer |
||||||
|
>["children"] |
||||||
|
} |
||||||
|
>(({ id, className, children, config, ...props }, ref) => { |
||||||
|
const uniqueId = React.useId() |
||||||
|
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}` |
||||||
|
|
||||||
|
return ( |
||||||
|
<ChartContext.Provider value={{ config }}> |
||||||
|
<div |
||||||
|
data-chart={chartId} |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ChartStyle id={chartId} config={config} /> |
||||||
|
<RechartsPrimitive.ResponsiveContainer> |
||||||
|
{children} |
||||||
|
</RechartsPrimitive.ResponsiveContainer> |
||||||
|
</div> |
||||||
|
</ChartContext.Provider> |
||||||
|
) |
||||||
|
}) |
||||||
|
ChartContainer.displayName = "Chart" |
||||||
|
|
||||||
|
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { |
||||||
|
const colorConfig = Object.entries(config).filter( |
||||||
|
([, config]) => config.theme || config.color |
||||||
|
) |
||||||
|
|
||||||
|
if (!colorConfig.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<style |
||||||
|
dangerouslySetInnerHTML={{ |
||||||
|
__html: Object.entries(THEMES) |
||||||
|
.map( |
||||||
|
([theme, prefix]) => ` |
||||||
|
${prefix} [data-chart=${id}] { |
||||||
|
${colorConfig |
||||||
|
.map(([key, itemConfig]) => { |
||||||
|
const color = |
||||||
|
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || |
||||||
|
itemConfig.color |
||||||
|
return color ? ` --color-${key}: ${color};` : null |
||||||
|
}) |
||||||
|
.join("\n")} |
||||||
|
} |
||||||
|
` |
||||||
|
) |
||||||
|
.join("\n"), |
||||||
|
}} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const ChartTooltip = RechartsPrimitive.Tooltip |
||||||
|
|
||||||
|
const ChartTooltipContent = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<typeof RechartsPrimitive.Tooltip> & |
||||||
|
React.ComponentProps<"div"> & { |
||||||
|
hideLabel?: boolean |
||||||
|
hideIndicator?: boolean |
||||||
|
indicator?: "line" | "dot" | "dashed" |
||||||
|
nameKey?: string |
||||||
|
labelKey?: string |
||||||
|
} |
||||||
|
>( |
||||||
|
( |
||||||
|
{ |
||||||
|
active, |
||||||
|
payload, |
||||||
|
className, |
||||||
|
indicator = "dot", |
||||||
|
hideLabel = false, |
||||||
|
hideIndicator = false, |
||||||
|
label, |
||||||
|
labelFormatter, |
||||||
|
labelClassName, |
||||||
|
formatter, |
||||||
|
color, |
||||||
|
nameKey, |
||||||
|
labelKey, |
||||||
|
}, |
||||||
|
ref |
||||||
|
) => { |
||||||
|
const { config } = useChart() |
||||||
|
|
||||||
|
const tooltipLabel = React.useMemo(() => { |
||||||
|
if (hideLabel || !payload?.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
const [item] = payload |
||||||
|
const key = `${labelKey || item.dataKey || item.name || "value"}` |
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||||
|
const value = |
||||||
|
!labelKey && typeof label === "string" |
||||||
|
? config[label as keyof typeof config]?.label || label |
||||||
|
: itemConfig?.label |
||||||
|
|
||||||
|
if (labelFormatter) { |
||||||
|
return ( |
||||||
|
<div className={cn("font-medium", labelClassName)}> |
||||||
|
{labelFormatter(value, payload)} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
if (!value) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return <div className={cn("font-medium", labelClassName)}>{value}</div> |
||||||
|
}, [ |
||||||
|
label, |
||||||
|
labelFormatter, |
||||||
|
payload, |
||||||
|
hideLabel, |
||||||
|
labelClassName, |
||||||
|
config, |
||||||
|
labelKey, |
||||||
|
]) |
||||||
|
|
||||||
|
if (!active || !payload?.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
const nestLabel = payload.length === 1 && indicator !== "dot" |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", |
||||||
|
className |
||||||
|
)} |
||||||
|
> |
||||||
|
{!nestLabel ? tooltipLabel : null} |
||||||
|
<div className="grid gap-1.5"> |
||||||
|
{payload.map((item, index) => { |
||||||
|
const key = `${nameKey || item.name || item.dataKey || "value"}` |
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||||
|
const indicatorColor = color || item.payload.fill || item.color |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={item.dataKey} |
||||||
|
className={cn( |
||||||
|
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", |
||||||
|
indicator === "dot" && "items-center" |
||||||
|
)} |
||||||
|
> |
||||||
|
{formatter && item?.value !== undefined && item.name ? ( |
||||||
|
formatter(item.value, item.name, item, index, item.payload) |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
{itemConfig?.icon ? ( |
||||||
|
<itemConfig.icon /> |
||||||
|
) : ( |
||||||
|
!hideIndicator && ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", |
||||||
|
{ |
||||||
|
"h-2.5 w-2.5": indicator === "dot", |
||||||
|
"w-1": indicator === "line", |
||||||
|
"w-0 border-[1.5px] border-dashed bg-transparent": |
||||||
|
indicator === "dashed", |
||||||
|
"my-0.5": nestLabel && indicator === "dashed", |
||||||
|
} |
||||||
|
)} |
||||||
|
style={ |
||||||
|
{ |
||||||
|
"--color-bg": indicatorColor, |
||||||
|
"--color-border": indicatorColor, |
||||||
|
} as React.CSSProperties |
||||||
|
} |
||||||
|
/> |
||||||
|
) |
||||||
|
)} |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-1 justify-between leading-none", |
||||||
|
nestLabel ? "items-end" : "items-center" |
||||||
|
)} |
||||||
|
> |
||||||
|
<div className="grid gap-1.5"> |
||||||
|
{nestLabel ? tooltipLabel : null} |
||||||
|
<span className="text-muted-foreground"> |
||||||
|
{itemConfig?.label || item.name} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
{item.value && ( |
||||||
|
<span className="font-mono font-medium tabular-nums text-foreground"> |
||||||
|
{item.value.toLocaleString()} |
||||||
|
</span> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
) |
||||||
|
})} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
ChartTooltipContent.displayName = "ChartTooltip" |
||||||
|
|
||||||
|
const ChartLegend = RechartsPrimitive.Legend |
||||||
|
|
||||||
|
const ChartLegendContent = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> & |
||||||
|
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & { |
||||||
|
hideIcon?: boolean |
||||||
|
nameKey?: string |
||||||
|
} |
||||||
|
>( |
||||||
|
( |
||||||
|
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, |
||||||
|
ref |
||||||
|
) => { |
||||||
|
const { config } = useChart() |
||||||
|
|
||||||
|
if (!payload?.length) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex items-center justify-center gap-4", |
||||||
|
verticalAlign === "top" ? "pb-3" : "pt-3", |
||||||
|
className |
||||||
|
)} |
||||||
|
> |
||||||
|
{payload.map((item) => { |
||||||
|
const key = `${nameKey || item.dataKey || "value"}` |
||||||
|
const itemConfig = getPayloadConfigFromPayload(config, item, key) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={item.value} |
||||||
|
className={cn( |
||||||
|
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground" |
||||||
|
)} |
||||||
|
> |
||||||
|
{itemConfig?.icon && !hideIcon ? ( |
||||||
|
<itemConfig.icon /> |
||||||
|
) : ( |
||||||
|
<div |
||||||
|
className="h-2 w-2 shrink-0 rounded-[2px]" |
||||||
|
style={{ |
||||||
|
backgroundColor: item.color, |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{itemConfig?.label} |
||||||
|
</div> |
||||||
|
) |
||||||
|
})} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
ChartLegendContent.displayName = "ChartLegend" |
||||||
|
|
||||||
|
// Helper to extract item config from a payload.
|
||||||
|
function getPayloadConfigFromPayload( |
||||||
|
config: ChartConfig, |
||||||
|
payload: unknown, |
||||||
|
key: string |
||||||
|
) { |
||||||
|
if (typeof payload !== "object" || payload === null) { |
||||||
|
return undefined |
||||||
|
} |
||||||
|
|
||||||
|
const payloadPayload = |
||||||
|
"payload" in payload && |
||||||
|
typeof payload.payload === "object" && |
||||||
|
payload.payload !== null |
||||||
|
? payload.payload |
||||||
|
: undefined |
||||||
|
|
||||||
|
let configLabelKey: string = key |
||||||
|
|
||||||
|
if ( |
||||||
|
key in payload && |
||||||
|
typeof payload[key as keyof typeof payload] === "string" |
||||||
|
) { |
||||||
|
configLabelKey = payload[key as keyof typeof payload] as string |
||||||
|
} else if ( |
||||||
|
payloadPayload && |
||||||
|
key in payloadPayload && |
||||||
|
typeof payloadPayload[key as keyof typeof payloadPayload] === "string" |
||||||
|
) { |
||||||
|
configLabelKey = payloadPayload[ |
||||||
|
key as keyof typeof payloadPayload |
||||||
|
] as string |
||||||
|
} |
||||||
|
|
||||||
|
return configLabelKey in config |
||||||
|
? config[configLabelKey] |
||||||
|
: config[key as keyof typeof config] |
||||||
|
} |
||||||
|
|
||||||
|
export { |
||||||
|
ChartContainer, |
||||||
|
ChartTooltip, |
||||||
|
ChartTooltipContent, |
||||||
|
ChartLegend, |
||||||
|
ChartLegendContent, |
||||||
|
ChartStyle, |
||||||
|
} |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox" |
||||||
|
import { Check } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Checkbox = React.forwardRef< |
||||||
|
React.ElementRef<typeof CheckboxPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<CheckboxPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"peer h-4 w-4 shrink-0 rounded-sm border border-gray-300 shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<CheckboxPrimitive.Indicator |
||||||
|
className={cn("flex items-center justify-center text-current")} |
||||||
|
> |
||||||
|
<Check className="h-4 w-4" /> |
||||||
|
</CheckboxPrimitive.Indicator> |
||||||
|
</CheckboxPrimitive.Root> |
||||||
|
)) |
||||||
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName |
||||||
|
|
||||||
|
export { Checkbox } |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" |
||||||
|
|
||||||
|
const Collapsible = CollapsiblePrimitive.Root |
||||||
|
|
||||||
|
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger |
||||||
|
|
||||||
|
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent |
||||||
|
|
||||||
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent } |
||||||
@ -0,0 +1,153 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import { type DialogProps } from "@radix-ui/react-dialog" |
||||||
|
import { Command as CommandPrimitive } from "cmdk" |
||||||
|
import { Search } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { Dialog, DialogContent } from "@/components/ui/dialog" |
||||||
|
|
||||||
|
const Command = React.forwardRef< |
||||||
|
React.ElementRef<typeof CommandPrimitive>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<CommandPrimitive |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
Command.displayName = CommandPrimitive.displayName |
||||||
|
|
||||||
|
const CommandDialog = ({ children, ...props }: DialogProps) => { |
||||||
|
return ( |
||||||
|
<Dialog {...props}> |
||||||
|
<DialogContent className="overflow-hidden p-0"> |
||||||
|
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"> |
||||||
|
{children} |
||||||
|
</Command> |
||||||
|
</DialogContent> |
||||||
|
</Dialog> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const CommandInput = React.forwardRef< |
||||||
|
React.ElementRef<typeof CommandPrimitive.Input>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div className="flex items-center border-b px-3" cmdk-input-wrapper=""> |
||||||
|
<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" /> |
||||||
|
<CommandPrimitive.Input |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)) |
||||||
|
|
||||||
|
CommandInput.displayName = CommandPrimitive.Input.displayName |
||||||
|
|
||||||
|
const CommandList = React.forwardRef< |
||||||
|
React.ElementRef<typeof CommandPrimitive.List>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<CommandPrimitive.List |
||||||
|
ref={ref} |
||||||
|
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
|
||||||
|
CommandList.displayName = CommandPrimitive.List.displayName |
||||||
|
|
||||||
|
const CommandEmpty = React.forwardRef< |
||||||
|
React.ElementRef<typeof CommandPrimitive.Empty>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> |
||||||
|
>((props, ref) => ( |
||||||
|
<CommandPrimitive.Empty |
||||||
|
ref={ref} |
||||||
|
className="py-6 text-center text-sm" |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
|
||||||
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName |
||||||
|
|
||||||
|
const CommandGroup = React.forwardRef< |
||||||
|
React.ElementRef<typeof CommandPrimitive.Group>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<CommandPrimitive.Group |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
|
||||||
|
CommandGroup.displayName = CommandPrimitive.Group.displayName |
||||||
|
|
||||||
|
const CommandSeparator = React.forwardRef< |
||||||
|
React.ElementRef<typeof CommandPrimitive.Separator>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<CommandPrimitive.Separator |
||||||
|
ref={ref} |
||||||
|
className={cn("-mx-1 h-px bg-border", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName |
||||||
|
|
||||||
|
const CommandItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof CommandPrimitive.Item>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<CommandPrimitive.Item |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
|
||||||
|
CommandItem.displayName = CommandPrimitive.Item.displayName |
||||||
|
|
||||||
|
const CommandShortcut = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => { |
||||||
|
return ( |
||||||
|
<span |
||||||
|
className={cn( |
||||||
|
"ml-auto text-xs tracking-widest text-muted-foreground", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
CommandShortcut.displayName = "CommandShortcut" |
||||||
|
|
||||||
|
export { |
||||||
|
Command, |
||||||
|
CommandDialog, |
||||||
|
CommandInput, |
||||||
|
CommandList, |
||||||
|
CommandEmpty, |
||||||
|
CommandGroup, |
||||||
|
CommandItem, |
||||||
|
CommandShortcut, |
||||||
|
CommandSeparator, |
||||||
|
} |
||||||
@ -0,0 +1,139 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog" |
||||||
|
import { X } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root |
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger |
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal |
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close |
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DialogPrimitive.Overlay |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName |
||||||
|
|
||||||
|
interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> { |
||||||
|
hideCloseButton?: boolean |
||||||
|
disableClose?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
const DialogContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>, |
||||||
|
DialogContentProps |
||||||
|
>(({ className, children, hideCloseButton = false, disableClose = false, ...props }, ref) => ( |
||||||
|
<DialogPortal> |
||||||
|
<DialogOverlay className={disableClose ? "pointer-events-none" : ""} /> |
||||||
|
<DialogPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
onEscapeKeyDown={(event) => { |
||||||
|
if (disableClose) { |
||||||
|
event.preventDefault() |
||||||
|
} |
||||||
|
}} |
||||||
|
onPointerDownOutside={(event) => { |
||||||
|
if (disableClose) { |
||||||
|
event.preventDefault() |
||||||
|
} |
||||||
|
}} |
||||||
|
className={cn( |
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children} |
||||||
|
{!hideCloseButton && !disableClose && ( |
||||||
|
<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> |
||||||
|
)) |
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName |
||||||
|
|
||||||
|
const DialogHeader = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col space-y-1.5 text-center sm:text-left", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
DialogHeader.displayName = "DialogHeader" |
||||||
|
|
||||||
|
const DialogFooter = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
DialogFooter.displayName = "DialogFooter" |
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DialogPrimitive.Title |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"text-lg font-semibold leading-none tracking-tight", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName |
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DialogPrimitive.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName |
||||||
|
|
||||||
|
export { |
||||||
|
Dialog, |
||||||
|
DialogPortal, |
||||||
|
DialogOverlay, |
||||||
|
DialogTrigger, |
||||||
|
DialogClose, |
||||||
|
DialogContent, |
||||||
|
DialogHeader, |
||||||
|
DialogFooter, |
||||||
|
DialogTitle, |
||||||
|
DialogDescription, |
||||||
|
} |
||||||
@ -0,0 +1,201 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" |
||||||
|
import { Check, ChevronRight, Circle } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const DropdownMenu = DropdownMenuPrimitive.Root |
||||||
|
|
||||||
|
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger |
||||||
|
|
||||||
|
const DropdownMenuGroup = DropdownMenuPrimitive.Group |
||||||
|
|
||||||
|
const DropdownMenuPortal = DropdownMenuPrimitive.Portal |
||||||
|
|
||||||
|
const DropdownMenuSub = DropdownMenuPrimitive.Sub |
||||||
|
|
||||||
|
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup |
||||||
|
|
||||||
|
const DropdownMenuSubTrigger = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { |
||||||
|
inset?: boolean |
||||||
|
} |
||||||
|
>(({ className, inset, children, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.SubTrigger |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", |
||||||
|
inset && "pl-8", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children} |
||||||
|
<ChevronRight className="ml-auto" /> |
||||||
|
</DropdownMenuPrimitive.SubTrigger> |
||||||
|
)) |
||||||
|
DropdownMenuSubTrigger.displayName = |
||||||
|
DropdownMenuPrimitive.SubTrigger.displayName |
||||||
|
|
||||||
|
const DropdownMenuSubContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.SubContent |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DropdownMenuSubContent.displayName = |
||||||
|
DropdownMenuPrimitive.SubContent.displayName |
||||||
|
|
||||||
|
const DropdownMenuContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> |
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.Portal> |
||||||
|
<DropdownMenuPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
sideOffset={sideOffset} |
||||||
|
className={cn( |
||||||
|
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", |
||||||
|
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</DropdownMenuPrimitive.Portal> |
||||||
|
)) |
||||||
|
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName |
||||||
|
|
||||||
|
const DropdownMenuItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Item>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & { |
||||||
|
inset?: boolean |
||||||
|
} |
||||||
|
>(({ className, inset, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.Item |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", |
||||||
|
inset && "pl-8", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName |
||||||
|
|
||||||
|
const DropdownMenuCheckboxItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> |
||||||
|
>(({ className, children, checked, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.CheckboxItem |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", |
||||||
|
className |
||||||
|
)} |
||||||
|
checked={checked} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
||||||
|
<DropdownMenuPrimitive.ItemIndicator> |
||||||
|
<Check className="h-4 w-4" /> |
||||||
|
</DropdownMenuPrimitive.ItemIndicator> |
||||||
|
</span> |
||||||
|
{children} |
||||||
|
</DropdownMenuPrimitive.CheckboxItem> |
||||||
|
)) |
||||||
|
DropdownMenuCheckboxItem.displayName = |
||||||
|
DropdownMenuPrimitive.CheckboxItem.displayName |
||||||
|
|
||||||
|
const DropdownMenuRadioItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> |
||||||
|
>(({ className, children, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.RadioItem |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"> |
||||||
|
<DropdownMenuPrimitive.ItemIndicator> |
||||||
|
<Circle className="h-2 w-2 fill-current" /> |
||||||
|
</DropdownMenuPrimitive.ItemIndicator> |
||||||
|
</span> |
||||||
|
{children} |
||||||
|
</DropdownMenuPrimitive.RadioItem> |
||||||
|
)) |
||||||
|
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName |
||||||
|
|
||||||
|
const DropdownMenuLabel = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Label>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & { |
||||||
|
inset?: boolean |
||||||
|
} |
||||||
|
>(({ className, inset, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.Label |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"px-2 py-1.5 text-sm font-semibold text-center", |
||||||
|
inset && "pl-8", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName |
||||||
|
|
||||||
|
const DropdownMenuSeparator = React.forwardRef< |
||||||
|
React.ElementRef<typeof DropdownMenuPrimitive.Separator>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DropdownMenuPrimitive.Separator |
||||||
|
ref={ref} |
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName |
||||||
|
|
||||||
|
const DropdownMenuShortcut = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => { |
||||||
|
return ( |
||||||
|
<span |
||||||
|
className={cn("ml-auto text-xs tracking-widest opacity-60", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
DropdownMenuShortcut.displayName = "DropdownMenuShortcut" |
||||||
|
|
||||||
|
export { |
||||||
|
DropdownMenu, |
||||||
|
DropdownMenuTrigger, |
||||||
|
DropdownMenuContent, |
||||||
|
DropdownMenuItem, |
||||||
|
DropdownMenuCheckboxItem, |
||||||
|
DropdownMenuRadioItem, |
||||||
|
DropdownMenuLabel, |
||||||
|
DropdownMenuSeparator, |
||||||
|
DropdownMenuShortcut, |
||||||
|
DropdownMenuGroup, |
||||||
|
DropdownMenuPortal, |
||||||
|
DropdownMenuSub, |
||||||
|
DropdownMenuSubContent, |
||||||
|
DropdownMenuSubTrigger, |
||||||
|
DropdownMenuRadioGroup, |
||||||
|
} |
||||||
@ -0,0 +1,178 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as LabelPrimitive from "@radix-ui/react-label" |
||||||
|
import { Slot } from "@radix-ui/react-slot" |
||||||
|
import { |
||||||
|
Controller, |
||||||
|
ControllerProps, |
||||||
|
FieldPath, |
||||||
|
FieldValues, |
||||||
|
FormProvider, |
||||||
|
useFormContext, |
||||||
|
} from "react-hook-form" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { Label } from "@/components/ui/label" |
||||||
|
|
||||||
|
const Form = FormProvider |
||||||
|
|
||||||
|
type FormFieldContextValue< |
||||||
|
TFieldValues extends FieldValues = FieldValues, |
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues> |
||||||
|
> = { |
||||||
|
name: TName |
||||||
|
} |
||||||
|
|
||||||
|
const FormFieldContext = React.createContext<FormFieldContextValue>( |
||||||
|
{} as FormFieldContextValue |
||||||
|
) |
||||||
|
|
||||||
|
const FormField = < |
||||||
|
TFieldValues extends FieldValues = FieldValues, |
||||||
|
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues> |
||||||
|
>({ |
||||||
|
...props |
||||||
|
}: ControllerProps<TFieldValues, TName>) => { |
||||||
|
return ( |
||||||
|
<FormFieldContext.Provider value={{ name: props.name }}> |
||||||
|
<Controller {...props} /> |
||||||
|
</FormFieldContext.Provider> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
const useFormField = () => { |
||||||
|
const fieldContext = React.useContext(FormFieldContext) |
||||||
|
const itemContext = React.useContext(FormItemContext) |
||||||
|
const { getFieldState, formState } = useFormContext() |
||||||
|
|
||||||
|
const fieldState = getFieldState(fieldContext.name, formState) |
||||||
|
|
||||||
|
if (!fieldContext) { |
||||||
|
throw new Error("useFormField should be used within <FormField>") |
||||||
|
} |
||||||
|
|
||||||
|
const { id } = itemContext |
||||||
|
|
||||||
|
return { |
||||||
|
id, |
||||||
|
name: fieldContext.name, |
||||||
|
formItemId: `${id}-form-item`, |
||||||
|
formDescriptionId: `${id}-form-item-description`, |
||||||
|
formMessageId: `${id}-form-item-message`, |
||||||
|
...fieldState, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
type FormItemContextValue = { |
||||||
|
id: string |
||||||
|
} |
||||||
|
|
||||||
|
const FormItemContext = React.createContext<FormItemContextValue>( |
||||||
|
{} as FormItemContextValue |
||||||
|
) |
||||||
|
|
||||||
|
const FormItem = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.HTMLAttributes<HTMLDivElement> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
const id = React.useId() |
||||||
|
|
||||||
|
return ( |
||||||
|
<FormItemContext.Provider value={{ id }}> |
||||||
|
<div ref={ref} className={cn("space-y-2", className)} {...props} /> |
||||||
|
</FormItemContext.Provider> |
||||||
|
) |
||||||
|
}) |
||||||
|
FormItem.displayName = "FormItem" |
||||||
|
|
||||||
|
const FormLabel = React.forwardRef< |
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
const { error, formItemId } = useFormField() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Label |
||||||
|
ref={ref} |
||||||
|
className={cn(error && "text-destructive", className)} |
||||||
|
htmlFor={formItemId} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
FormLabel.displayName = "FormLabel" |
||||||
|
|
||||||
|
const FormControl = React.forwardRef< |
||||||
|
React.ElementRef<typeof Slot>, |
||||||
|
React.ComponentPropsWithoutRef<typeof Slot> |
||||||
|
>(({ ...props }, ref) => { |
||||||
|
const { error, formItemId, formDescriptionId, formMessageId } = useFormField() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Slot |
||||||
|
ref={ref} |
||||||
|
id={formItemId} |
||||||
|
aria-describedby={ |
||||||
|
!error |
||||||
|
? `${formDescriptionId}` |
||||||
|
: `${formDescriptionId} ${formMessageId}` |
||||||
|
} |
||||||
|
aria-invalid={!!error} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
FormControl.displayName = "FormControl" |
||||||
|
|
||||||
|
const FormDescription = React.forwardRef< |
||||||
|
HTMLParagraphElement, |
||||||
|
React.HTMLAttributes<HTMLParagraphElement> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
const { formDescriptionId } = useFormField() |
||||||
|
|
||||||
|
return ( |
||||||
|
<p |
||||||
|
ref={ref} |
||||||
|
id={formDescriptionId} |
||||||
|
className={cn("text-[0.8rem] text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
FormDescription.displayName = "FormDescription" |
||||||
|
|
||||||
|
const FormMessage = React.forwardRef< |
||||||
|
HTMLParagraphElement, |
||||||
|
React.HTMLAttributes<HTMLParagraphElement> |
||||||
|
>(({ className, children, ...props }, ref) => { |
||||||
|
const { error, formMessageId } = useFormField() |
||||||
|
const body = error ? String(error?.message) : children |
||||||
|
|
||||||
|
if (!body) { |
||||||
|
return null |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<p |
||||||
|
ref={ref} |
||||||
|
id={formMessageId} |
||||||
|
className={cn("text-[0.8rem] font-medium text-destructive", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{body} |
||||||
|
</p> |
||||||
|
) |
||||||
|
}) |
||||||
|
FormMessage.displayName = "FormMessage" |
||||||
|
|
||||||
|
export { |
||||||
|
useFormField, |
||||||
|
Form, |
||||||
|
FormItem, |
||||||
|
FormLabel, |
||||||
|
FormControl, |
||||||
|
FormDescription, |
||||||
|
FormMessage, |
||||||
|
FormField, |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import * as React from "react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>( |
||||||
|
({ className, type, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<input |
||||||
|
type={type} |
||||||
|
className={cn( |
||||||
|
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", |
||||||
|
className |
||||||
|
)} |
||||||
|
ref={ref} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
Input.displayName = "Input" |
||||||
|
|
||||||
|
export { Input } |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
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" |
||||||
|
|
||||||
|
const labelVariants = cva( |
||||||
|
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" |
||||||
|
) |
||||||
|
|
||||||
|
const Label = React.forwardRef< |
||||||
|
React.ElementRef<typeof LabelPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & |
||||||
|
VariantProps<typeof labelVariants> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<LabelPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
className={cn(labelVariants(), className , 'text-sm')} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
Label.displayName = LabelPrimitive.Root.displayName |
||||||
|
|
||||||
|
export { Label } |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
import React from 'react'; |
||||||
|
|
||||||
|
const PageLoader = () => { |
||||||
|
return ( |
||||||
|
<div className="fixed inset-0 flex items-center justify-center bg-white dark:bg-gray-900 z-50"> |
||||||
|
<div className="flex flex-col items-center justify-center space-y-8"> |
||||||
|
<div className="relative w-40"> |
||||||
|
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center"> |
||||||
|
<div className="bg-white dark:bg-gray-900 rounded-full "> |
||||||
|
<h1 className="text-xl font-bold text-primary dark:text-blue-400 animate-pulse"> |
||||||
|
KJ HRMS |
||||||
|
</h1> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="w-52 h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden"> |
||||||
|
<div className="h-full bg-primary animate-[loading_1.5s_ease-in-out_infinite]"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<style jsx>{` |
||||||
|
@keyframes loading { |
||||||
|
0% { |
||||||
|
width: 0%; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
50% { |
||||||
|
width: 100%; |
||||||
|
margin-left: 0; |
||||||
|
} |
||||||
|
100% { |
||||||
|
width: 0%; |
||||||
|
margin-left: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
`}</style>
|
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default PageLoader; |
||||||
@ -0,0 +1,133 @@ |
|||||||
|
import * as React from "react" |
||||||
|
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { ButtonProps, buttonVariants } from "@/components/ui/button" |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( |
||||||
|
<nav |
||||||
|
role="navigation" |
||||||
|
aria-label="pagination" |
||||||
|
className={cn("mx-auto flex w-full justify-center", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
Pagination.displayName = "Pagination" |
||||||
|
|
||||||
|
const PaginationContent = React.forwardRef< |
||||||
|
HTMLUListElement, |
||||||
|
React.ComponentProps<"ul"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ul |
||||||
|
ref={ref} |
||||||
|
className={cn("flex flex-row items-center gap-1", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
PaginationContent.displayName = "PaginationContent" |
||||||
|
|
||||||
|
const PaginationItem = React.forwardRef< |
||||||
|
HTMLLIElement, |
||||||
|
React.ComponentProps<"li"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<li ref={ref} className={cn("", className)} {...props} /> |
||||||
|
)) |
||||||
|
PaginationItem.displayName = "PaginationItem" |
||||||
|
|
||||||
|
type PaginationLinkProps = { |
||||||
|
isActive?: boolean |
||||||
|
} & Pick<ButtonProps, "size"> & |
||||||
|
React.ComponentProps<"a"> |
||||||
|
|
||||||
|
const PaginationLink = ({ |
||||||
|
className, |
||||||
|
isActive, |
||||||
|
size = "icon", |
||||||
|
...props |
||||||
|
}: PaginationLinkProps) => ( |
||||||
|
<a |
||||||
|
aria-current={isActive ? "page" : undefined} |
||||||
|
className={cn( |
||||||
|
buttonVariants({ |
||||||
|
variant: isActive ? "outline" : "ghost", |
||||||
|
size, |
||||||
|
}), |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
PaginationLink.displayName = "PaginationLink" |
||||||
|
|
||||||
|
const PaginationPrevious = ({ |
||||||
|
className, |
||||||
|
disabled, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof PaginationLink> & { disabled?: boolean }) => ( |
||||||
|
<PaginationLink |
||||||
|
aria-label="Go to previous page" |
||||||
|
size="default" |
||||||
|
className={cn( |
||||||
|
"gap-1 pl-2.5",
|
||||||
|
disabled && "pointer-events-none opacity-50", |
||||||
|
!disabled && "cursor-pointer", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<button disabled={disabled} className="flex gap-1 items-center"> |
||||||
|
<ChevronLeft className="h-4 w-4" /> |
||||||
|
<span>Previous</span> |
||||||
|
</button> |
||||||
|
</PaginationLink> |
||||||
|
) |
||||||
|
|
||||||
|
const PaginationNext = ({ |
||||||
|
className, |
||||||
|
disabled, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof PaginationLink> & { disabled?: boolean }) => ( |
||||||
|
<PaginationLink |
||||||
|
aria-label="Go to next page" |
||||||
|
size="default" |
||||||
|
className={cn( |
||||||
|
"gap-1 pr-2.5",
|
||||||
|
disabled && "pointer-events-none opacity-50", |
||||||
|
!disabled && "cursor-pointer", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<button disabled={disabled} className="flex gap-1 items-center"> |
||||||
|
<span>Next</span> |
||||||
|
<ChevronRight className="h-4 w-4" /> |
||||||
|
</button> |
||||||
|
</PaginationLink> |
||||||
|
) |
||||||
|
|
||||||
|
const PaginationEllipsis = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"span">) => ( |
||||||
|
<span |
||||||
|
aria-hidden |
||||||
|
className={cn("flex h-9 w-9 items-center justify-center", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<MoreHorizontal className="h-4 w-4" /> |
||||||
|
<span className="sr-only">More pages</span> |
||||||
|
</span> |
||||||
|
) |
||||||
|
PaginationEllipsis.displayName = "PaginationEllipsis" |
||||||
|
|
||||||
|
export { |
||||||
|
Pagination, |
||||||
|
PaginationContent, |
||||||
|
PaginationLink, |
||||||
|
PaginationItem, |
||||||
|
PaginationPrevious, |
||||||
|
PaginationNext, |
||||||
|
PaginationEllipsis, |
||||||
|
} |
||||||
@ -0,0 +1,33 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as PopoverPrimitive from "@radix-ui/react-popover" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Popover = PopoverPrimitive.Root |
||||||
|
|
||||||
|
const PopoverTrigger = PopoverPrimitive.Trigger |
||||||
|
|
||||||
|
const PopoverAnchor = PopoverPrimitive.Anchor |
||||||
|
|
||||||
|
const PopoverContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof PopoverPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> |
||||||
|
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( |
||||||
|
<PopoverPrimitive.Portal> |
||||||
|
<PopoverPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
align={align} |
||||||
|
sideOffset={sideOffset} |
||||||
|
className={cn( |
||||||
|
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</PopoverPrimitive.Portal> |
||||||
|
)) |
||||||
|
PopoverContent.displayName = PopoverPrimitive.Content.displayName |
||||||
|
|
||||||
|
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" |
||||||
|
import { Circle } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const RadioGroup = React.forwardRef< |
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<RadioGroupPrimitive.Root |
||||||
|
className={cn("grid gap-2", className)} |
||||||
|
{...props} |
||||||
|
ref={ref} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName |
||||||
|
|
||||||
|
const RadioGroupItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Item>, |
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<RadioGroupPrimitive.Item |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"aspect-square h-4 w-4 rounded-full border border-gray-300 text-gray-300 shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<RadioGroupPrimitive.Indicator className="flex items-center justify-center"> |
||||||
|
<Circle className="h-3.5 w-3.5 fill-primary" /> |
||||||
|
</RadioGroupPrimitive.Indicator> |
||||||
|
</RadioGroupPrimitive.Item> |
||||||
|
) |
||||||
|
}) |
||||||
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName |
||||||
|
|
||||||
|
export { RadioGroup, RadioGroupItem } |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const ScrollArea = React.forwardRef< |
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> |
||||||
|
>(({ className, children, ...props }, ref) => ( |
||||||
|
<ScrollAreaPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
className={cn("relative overflow-hidden", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]"> |
||||||
|
{children} |
||||||
|
</ScrollAreaPrimitive.Viewport> |
||||||
|
<ScrollBar /> |
||||||
|
<ScrollAreaPrimitive.Corner /> |
||||||
|
</ScrollAreaPrimitive.Root> |
||||||
|
)) |
||||||
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName |
||||||
|
|
||||||
|
const ScrollBar = React.forwardRef< |
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> |
||||||
|
>(({ className, orientation = "vertical", ...props }, ref) => ( |
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar |
||||||
|
ref={ref} |
||||||
|
orientation={orientation} |
||||||
|
className={cn( |
||||||
|
"flex touch-none select-none transition-colors", |
||||||
|
orientation === "vertical" && |
||||||
|
"h-full w-2.5 border-l border-l-transparent p-[1px]", |
||||||
|
orientation === "horizontal" && |
||||||
|
"h-2.5 flex-col border-t border-t-transparent p-[1px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" /> |
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar> |
||||||
|
)) |
||||||
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName |
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar } |
||||||
@ -0,0 +1,48 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const ScrollArea = React.forwardRef< |
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> |
||||||
|
>(({ className, children, ...props }, ref) => ( |
||||||
|
<ScrollAreaPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
className={cn("relative overflow-hidden", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]"> |
||||||
|
{children} |
||||||
|
</ScrollAreaPrimitive.Viewport> |
||||||
|
<ScrollBar /> |
||||||
|
<ScrollAreaPrimitive.Corner /> |
||||||
|
</ScrollAreaPrimitive.Root> |
||||||
|
)) |
||||||
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName |
||||||
|
|
||||||
|
const ScrollBar = React.forwardRef< |
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> |
||||||
|
>(({ className, orientation = "vertical", ...props }, ref) => ( |
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar |
||||||
|
ref={ref} |
||||||
|
orientation={orientation} |
||||||
|
className={cn( |
||||||
|
"flex touch-none select-none transition-colors", |
||||||
|
orientation === "vertical" && |
||||||
|
"h-full w-2.5 border-l border-l-transparent p-[1px]", |
||||||
|
orientation === "horizontal" && |
||||||
|
"h-2.5 flex-col border-t border-t-transparent p-[1px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" /> |
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar> |
||||||
|
)) |
||||||
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName |
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar } |
||||||
@ -0,0 +1,159 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as SelectPrimitive from "@radix-ui/react-select" |
||||||
|
import { Check, ChevronDown, ChevronUp } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Select = SelectPrimitive.Root |
||||||
|
|
||||||
|
const SelectGroup = SelectPrimitive.Group |
||||||
|
|
||||||
|
const SelectValue = SelectPrimitive.Value |
||||||
|
|
||||||
|
const SelectTrigger = React.forwardRef< |
||||||
|
React.ElementRef<typeof SelectPrimitive.Trigger>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> |
||||||
|
>(({ className, children, ...props }, ref) => ( |
||||||
|
<SelectPrimitive.Trigger |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children} |
||||||
|
<SelectPrimitive.Icon asChild> |
||||||
|
<ChevronDown className="h-4 w-4 opacity-50" /> |
||||||
|
</SelectPrimitive.Icon> |
||||||
|
</SelectPrimitive.Trigger> |
||||||
|
)) |
||||||
|
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName |
||||||
|
|
||||||
|
const SelectScrollUpButton = React.forwardRef< |
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SelectPrimitive.ScrollUpButton |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex cursor-default items-center justify-center py-1", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ChevronUp className="h-4 w-4" /> |
||||||
|
</SelectPrimitive.ScrollUpButton> |
||||||
|
)) |
||||||
|
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName |
||||||
|
|
||||||
|
const SelectScrollDownButton = React.forwardRef< |
||||||
|
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SelectPrimitive.ScrollDownButton |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex cursor-default items-center justify-center py-1", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ChevronDown className="h-4 w-4" /> |
||||||
|
</SelectPrimitive.ScrollDownButton> |
||||||
|
)) |
||||||
|
SelectScrollDownButton.displayName = |
||||||
|
SelectPrimitive.ScrollDownButton.displayName |
||||||
|
|
||||||
|
const SelectContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof SelectPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> |
||||||
|
>(({ className, children, position = "popper", ...props }, ref) => ( |
||||||
|
<SelectPrimitive.Portal> |
||||||
|
<SelectPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", |
||||||
|
position === "popper" && |
||||||
|
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", |
||||||
|
className |
||||||
|
)} |
||||||
|
position={position} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<SelectScrollUpButton /> |
||||||
|
<SelectPrimitive.Viewport |
||||||
|
className={cn( |
||||||
|
"p-1", |
||||||
|
position === "popper" && |
||||||
|
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]" |
||||||
|
)} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</SelectPrimitive.Viewport> |
||||||
|
<SelectScrollDownButton /> |
||||||
|
</SelectPrimitive.Content> |
||||||
|
</SelectPrimitive.Portal> |
||||||
|
)) |
||||||
|
SelectContent.displayName = SelectPrimitive.Content.displayName |
||||||
|
|
||||||
|
const SelectLabel = React.forwardRef< |
||||||
|
React.ElementRef<typeof SelectPrimitive.Label>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SelectPrimitive.Label |
||||||
|
ref={ref} |
||||||
|
className={cn("px-2 py-1.5 text-sm font-semibold", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SelectLabel.displayName = SelectPrimitive.Label.displayName |
||||||
|
|
||||||
|
const SelectItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof SelectPrimitive.Item>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> |
||||||
|
>(({ className, children, ...props }, ref) => ( |
||||||
|
<SelectPrimitive.Item |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center"> |
||||||
|
<SelectPrimitive.ItemIndicator> |
||||||
|
<Check className="h-4 w-4" /> |
||||||
|
</SelectPrimitive.ItemIndicator> |
||||||
|
</span> |
||||||
|
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> |
||||||
|
</SelectPrimitive.Item> |
||||||
|
)) |
||||||
|
SelectItem.displayName = SelectPrimitive.Item.displayName |
||||||
|
|
||||||
|
const SelectSeparator = React.forwardRef< |
||||||
|
React.ElementRef<typeof SelectPrimitive.Separator>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SelectPrimitive.Separator |
||||||
|
ref={ref} |
||||||
|
className={cn("-mx-1 my-1 h-px bg-muted", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SelectSeparator.displayName = SelectPrimitive.Separator.displayName |
||||||
|
|
||||||
|
export { |
||||||
|
Select, |
||||||
|
SelectGroup, |
||||||
|
SelectValue, |
||||||
|
SelectTrigger, |
||||||
|
SelectContent, |
||||||
|
SelectLabel, |
||||||
|
SelectItem, |
||||||
|
SelectSeparator, |
||||||
|
SelectScrollUpButton, |
||||||
|
SelectScrollDownButton, |
||||||
|
} |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator" |
||||||
|
|
||||||
|
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 }, |
||||||
|
ref |
||||||
|
) => ( |
||||||
|
<SeparatorPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
decorative={decorative} |
||||||
|
orientation={orientation} |
||||||
|
className={cn( |
||||||
|
"shrink-0 bg-border", |
||||||
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
) |
||||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName |
||||||
|
|
||||||
|
export { Separator } |
||||||
@ -0,0 +1,140 @@ |
|||||||
|
"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 { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Sheet = SheetPrimitive.Root |
||||||
|
|
||||||
|
const SheetTrigger = SheetPrimitive.Trigger |
||||||
|
|
||||||
|
const SheetClose = SheetPrimitive.Close |
||||||
|
|
||||||
|
const SheetPortal = SheetPrimitive.Portal |
||||||
|
|
||||||
|
const SheetOverlay = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Overlay>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> |
||||||
|
>(({ 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", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
ref={ref} |
||||||
|
/> |
||||||
|
)) |
||||||
|
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=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", |
||||||
|
{ |
||||||
|
variants: { |
||||||
|
side: { |
||||||
|
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", |
||||||
|
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", |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultVariants: { |
||||||
|
side: "right", |
||||||
|
}, |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
interface SheetContentProps |
||||||
|
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, |
||||||
|
VariantProps<typeof sheetVariants> {} |
||||||
|
|
||||||
|
const SheetContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Content>, |
||||||
|
SheetContentProps |
||||||
|
>(({ side = "right", className, children, ...props }, ref) => ( |
||||||
|
<SheetPortal> |
||||||
|
<SheetOverlay /> |
||||||
|
<SheetPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className={cn(sheetVariants({ side }), className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<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> |
||||||
|
{children} |
||||||
|
</SheetPrimitive.Content> |
||||||
|
</SheetPortal> |
||||||
|
)) |
||||||
|
SheetContent.displayName = SheetPrimitive.Content.displayName |
||||||
|
|
||||||
|
const SheetHeader = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col space-y-2 text-center sm:text-left", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
SheetHeader.displayName = "SheetHeader" |
||||||
|
|
||||||
|
const SheetFooter = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
SheetFooter.displayName = "SheetFooter" |
||||||
|
|
||||||
|
const SheetTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SheetPrimitive.Title |
||||||
|
ref={ref} |
||||||
|
className={cn("text-lg font-semibold text-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SheetTitle.displayName = SheetPrimitive.Title.displayName |
||||||
|
|
||||||
|
const SheetDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SheetPrimitive.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SheetDescription.displayName = SheetPrimitive.Description.displayName |
||||||
|
|
||||||
|
export { |
||||||
|
Sheet, |
||||||
|
SheetPortal, |
||||||
|
SheetOverlay, |
||||||
|
SheetTrigger, |
||||||
|
SheetClose, |
||||||
|
SheetContent, |
||||||
|
SheetHeader, |
||||||
|
SheetFooter, |
||||||
|
SheetTitle, |
||||||
|
SheetDescription, |
||||||
|
} |
||||||
@ -0,0 +1,764 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import { Slot } from "@radix-ui/react-slot" |
||||||
|
import { VariantProps, cva } from "class-variance-authority" |
||||||
|
import { PanelLeft } from "lucide-react" |
||||||
|
|
||||||
|
import { useIsMobile } from "@/hooks/use-mobile" |
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { Button } from "@/components/ui/button" |
||||||
|
import { Input } from "@/components/ui/input" |
||||||
|
import { Separator } from "@/components/ui/separator" |
||||||
|
import { Sheet, SheetContent } from "@/components/ui/sheet" |
||||||
|
import { Skeleton } from "@/components/ui/skeleton" |
||||||
|
import { |
||||||
|
Tooltip, |
||||||
|
TooltipContent, |
||||||
|
TooltipProvider, |
||||||
|
TooltipTrigger, |
||||||
|
} from "@/components/ui/tooltip" |
||||||
|
|
||||||
|
const SIDEBAR_COOKIE_NAME = "sidebar:state" |
||||||
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 |
||||||
|
const SIDEBAR_WIDTH = "16rem" |
||||||
|
const SIDEBAR_WIDTH_MOBILE = "18rem" |
||||||
|
const SIDEBAR_WIDTH_ICON = "3rem" |
||||||
|
const SIDEBAR_KEYBOARD_SHORTCUT = "b" |
||||||
|
|
||||||
|
type SidebarContext = { |
||||||
|
state: "expanded" | "collapsed" |
||||||
|
open: boolean |
||||||
|
setOpen: (open: boolean) => void |
||||||
|
openMobile: boolean |
||||||
|
setOpenMobile: (open: boolean) => void |
||||||
|
isMobile: boolean |
||||||
|
toggleSidebar: () => void |
||||||
|
} |
||||||
|
|
||||||
|
const SidebarContext = React.createContext<SidebarContext | null>(null) |
||||||
|
|
||||||
|
function useSidebar() { |
||||||
|
const context = React.useContext(SidebarContext) |
||||||
|
if (!context) { |
||||||
|
throw new Error("useSidebar must be used within a SidebarProvider. from sidebar") |
||||||
|
} |
||||||
|
|
||||||
|
return context |
||||||
|
} |
||||||
|
|
||||||
|
const SidebarProvider = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> & { |
||||||
|
defaultOpen?: boolean |
||||||
|
open?: boolean |
||||||
|
onOpenChange?: (open: boolean) => void |
||||||
|
} |
||||||
|
>( |
||||||
|
( |
||||||
|
{ |
||||||
|
defaultOpen = true, |
||||||
|
open: openProp, |
||||||
|
onOpenChange: setOpenProp, |
||||||
|
className, |
||||||
|
style, |
||||||
|
children, |
||||||
|
...props |
||||||
|
}, |
||||||
|
ref |
||||||
|
) => { |
||||||
|
const isMobile = useIsMobile() |
||||||
|
const [openMobile, setOpenMobile] = React.useState(false) |
||||||
|
|
||||||
|
// This is the internal state of the sidebar.
|
||||||
|
// We use openProp and setOpenProp for control from outside the component.
|
||||||
|
const [_open, _setOpen] = React.useState(defaultOpen) |
||||||
|
const open = openProp ?? _open |
||||||
|
const setOpen = React.useCallback( |
||||||
|
(value: boolean | ((value: boolean) => boolean)) => { |
||||||
|
const openState = typeof value === "function" ? value(open) : value |
||||||
|
if (setOpenProp) { |
||||||
|
setOpenProp(openState) |
||||||
|
} else { |
||||||
|
_setOpen(openState) |
||||||
|
} |
||||||
|
|
||||||
|
// This sets the cookie to keep the sidebar state.
|
||||||
|
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` |
||||||
|
}, |
||||||
|
[setOpenProp, open] |
||||||
|
) |
||||||
|
|
||||||
|
// Helper to toggle the sidebar.
|
||||||
|
const toggleSidebar = React.useCallback(() => { |
||||||
|
return isMobile |
||||||
|
? setOpenMobile((open) => !open) |
||||||
|
: setOpen((open) => !open) |
||||||
|
}, [isMobile, setOpen, setOpenMobile]) |
||||||
|
|
||||||
|
// Adds a keyboard shortcut to toggle the sidebar.
|
||||||
|
React.useEffect(() => { |
||||||
|
const handleKeyDown = (event: KeyboardEvent) => { |
||||||
|
if ( |
||||||
|
event.key === SIDEBAR_KEYBOARD_SHORTCUT && |
||||||
|
(event.metaKey || event.ctrlKey) |
||||||
|
) { |
||||||
|
event.preventDefault() |
||||||
|
toggleSidebar() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
window.addEventListener("keydown", handleKeyDown) |
||||||
|
return () => window.removeEventListener("keydown", handleKeyDown) |
||||||
|
}, [toggleSidebar]) |
||||||
|
|
||||||
|
|
||||||
|
// We add a state so that we can do data-state="expanded" or "collapsed".
|
||||||
|
// This makes it easier to style the sidebar with Tailwind classes.
|
||||||
|
const state = open ? "expanded" : "collapsed" |
||||||
|
|
||||||
|
const contextValue = React.useMemo<SidebarContext>( |
||||||
|
() => ({ |
||||||
|
state, |
||||||
|
open, |
||||||
|
setOpen, |
||||||
|
isMobile, |
||||||
|
openMobile, |
||||||
|
setOpenMobile, |
||||||
|
toggleSidebar, |
||||||
|
}), |
||||||
|
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar] |
||||||
|
) |
||||||
|
|
||||||
|
return ( |
||||||
|
<SidebarContext.Provider value={contextValue}> |
||||||
|
<TooltipProvider delayDuration={0}> |
||||||
|
<div |
||||||
|
style={ |
||||||
|
{ |
||||||
|
"--sidebar-width": SIDEBAR_WIDTH, |
||||||
|
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON, |
||||||
|
...style, |
||||||
|
} as React.CSSProperties |
||||||
|
} |
||||||
|
className={cn( |
||||||
|
"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", |
||||||
|
className |
||||||
|
)} |
||||||
|
ref={ref} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</TooltipProvider> |
||||||
|
</SidebarContext.Provider> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
SidebarProvider.displayName = "SidebarProvider" |
||||||
|
|
||||||
|
const Sidebar = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> & { |
||||||
|
side?: "left" | "right" |
||||||
|
variant?: "sidebar" | "floating" | "inset" |
||||||
|
collapsible?: "offcanvas" | "icon" | "none" |
||||||
|
} |
||||||
|
>( |
||||||
|
( |
||||||
|
{ |
||||||
|
side = "left", |
||||||
|
variant = "sidebar", |
||||||
|
collapsible = "offcanvas", |
||||||
|
className, |
||||||
|
children, |
||||||
|
...props |
||||||
|
}, |
||||||
|
ref |
||||||
|
) => { |
||||||
|
const { isMobile, state, openMobile, setOpenMobile } = useSidebar() |
||||||
|
|
||||||
|
if (collapsible === "none") { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", |
||||||
|
className |
||||||
|
)} |
||||||
|
ref={ref} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
if (isMobile) { |
||||||
|
return ( |
||||||
|
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}> |
||||||
|
<SheetContent |
||||||
|
data-sidebar="sidebar" |
||||||
|
data-mobile="true" |
||||||
|
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden" |
||||||
|
style={ |
||||||
|
{ |
||||||
|
"--sidebar-width": SIDEBAR_WIDTH_MOBILE, |
||||||
|
} as React.CSSProperties |
||||||
|
} |
||||||
|
side={side} |
||||||
|
> |
||||||
|
<div className="flex h-full w-full flex-col">{children}</div> |
||||||
|
</SheetContent> |
||||||
|
</Sheet> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
className="group peer hidden md:block text-sidebar-foreground" |
||||||
|
data-state={state} |
||||||
|
data-collapsible={state === "collapsed" ? collapsible : ""} |
||||||
|
data-variant={variant} |
||||||
|
data-side={side} |
||||||
|
> |
||||||
|
{/* This is what handles the sidebar gap on desktop */} |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear", |
||||||
|
"group-data-[collapsible=offcanvas]:w-0", |
||||||
|
"group-data-[side=right]:rotate-180", |
||||||
|
variant === "floating" || variant === "inset" |
||||||
|
? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]" |
||||||
|
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]" |
||||||
|
)} |
||||||
|
/> |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex", |
||||||
|
side === "left" |
||||||
|
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" |
||||||
|
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]", |
||||||
|
// Adjust the padding for floating and inset variants.
|
||||||
|
variant === "floating" || variant === "inset" |
||||||
|
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]" |
||||||
|
: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<div |
||||||
|
data-sidebar="sidebar" |
||||||
|
className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow" |
||||||
|
> |
||||||
|
{children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
Sidebar.displayName = "Sidebar" |
||||||
|
|
||||||
|
const SidebarTrigger = React.forwardRef< |
||||||
|
React.ElementRef<typeof Button>, |
||||||
|
React.ComponentProps<typeof Button> |
||||||
|
>(({ className, onClick, ...props }, ref) => { |
||||||
|
const { toggleSidebar } = useSidebar() |
||||||
|
|
||||||
|
return ( |
||||||
|
<Button |
||||||
|
ref={ref} |
||||||
|
data-sidebar="trigger" |
||||||
|
variant="ghost" |
||||||
|
size="icon" |
||||||
|
className={cn("h-7 w-7", className)} |
||||||
|
onClick={(event) => { |
||||||
|
onClick?.(event) |
||||||
|
toggleSidebar() |
||||||
|
}} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<PanelLeft /> |
||||||
|
<span className="sr-only">Toggle Sidebar</span> |
||||||
|
</Button> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarTrigger.displayName = "SidebarTrigger" |
||||||
|
|
||||||
|
const SidebarRail = React.forwardRef< |
||||||
|
HTMLButtonElement, |
||||||
|
React.ComponentProps<"button"> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
const { toggleSidebar } = useSidebar() |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
ref={ref} |
||||||
|
data-sidebar="rail" |
||||||
|
aria-label="Toggle Sidebar" |
||||||
|
tabIndex={-1} |
||||||
|
onClick={toggleSidebar} |
||||||
|
title="Toggle Sidebar" |
||||||
|
className={cn( |
||||||
|
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex", |
||||||
|
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize", |
||||||
|
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", |
||||||
|
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar", |
||||||
|
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", |
||||||
|
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarRail.displayName = "SidebarRail" |
||||||
|
|
||||||
|
const SidebarInset = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"main"> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<main |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"relative flex min-h-svh flex-1 flex-col bg-background", |
||||||
|
"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarInset.displayName = "SidebarInset" |
||||||
|
|
||||||
|
const SidebarInput = React.forwardRef< |
||||||
|
React.ElementRef<typeof Input>, |
||||||
|
React.ComponentProps<typeof Input> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<Input |
||||||
|
ref={ref} |
||||||
|
data-sidebar="input" |
||||||
|
className={cn( |
||||||
|
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarInput.displayName = "SidebarInput" |
||||||
|
|
||||||
|
const SidebarHeader = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
data-sidebar="header" |
||||||
|
className={cn("flex flex-col gap-2 p-2", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarHeader.displayName = "SidebarHeader" |
||||||
|
|
||||||
|
const SidebarFooter = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
data-sidebar="footer" |
||||||
|
className={cn("flex flex-col gap-2 p-2", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarFooter.displayName = "SidebarFooter" |
||||||
|
|
||||||
|
const SidebarSeparator = React.forwardRef< |
||||||
|
React.ElementRef<typeof Separator>, |
||||||
|
React.ComponentProps<typeof Separator> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<Separator |
||||||
|
ref={ref} |
||||||
|
data-sidebar="separator" |
||||||
|
className={cn("mx-2 w-auto bg-sidebar-border", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarSeparator.displayName = "SidebarSeparator" |
||||||
|
|
||||||
|
const SidebarContent = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
data-sidebar="content" |
||||||
|
className={cn( |
||||||
|
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarContent.displayName = "SidebarContent" |
||||||
|
|
||||||
|
const SidebarGroup = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
data-sidebar="group" |
||||||
|
className={cn("relative flex w-full min-w-0 flex-col p-2", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarGroup.displayName = "SidebarGroup" |
||||||
|
|
||||||
|
const SidebarGroupLabel = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> & { asChild?: boolean } |
||||||
|
>(({ className, asChild = false, ...props }, ref) => { |
||||||
|
const Comp = asChild ? Slot : "div" |
||||||
|
|
||||||
|
return ( |
||||||
|
<Comp |
||||||
|
ref={ref} |
||||||
|
data-sidebar="group-label" |
||||||
|
className={cn( |
||||||
|
"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", |
||||||
|
"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarGroupLabel.displayName = "SidebarGroupLabel" |
||||||
|
|
||||||
|
const SidebarGroupAction = React.forwardRef< |
||||||
|
HTMLButtonElement, |
||||||
|
React.ComponentProps<"button"> & { asChild?: boolean } |
||||||
|
>(({ className, asChild = false, ...props }, ref) => { |
||||||
|
const Comp = asChild ? Slot : "button" |
||||||
|
|
||||||
|
return ( |
||||||
|
<Comp |
||||||
|
ref={ref} |
||||||
|
data-sidebar="group-action" |
||||||
|
className={cn( |
||||||
|
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", |
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 after:md:hidden", |
||||||
|
"group-data-[collapsible=icon]:hidden", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarGroupAction.displayName = "SidebarGroupAction" |
||||||
|
|
||||||
|
const SidebarGroupContent = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
data-sidebar="group-content" |
||||||
|
className={cn("w-full text-sm", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SidebarGroupContent.displayName = "SidebarGroupContent" |
||||||
|
|
||||||
|
const SidebarMenu = React.forwardRef< |
||||||
|
HTMLUListElement, |
||||||
|
React.ComponentProps<"ul"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ul |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu" |
||||||
|
className={cn("flex w-full min-w-0 flex-col gap-1", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SidebarMenu.displayName = "SidebarMenu" |
||||||
|
|
||||||
|
const SidebarMenuItem = React.forwardRef< |
||||||
|
HTMLLIElement, |
||||||
|
React.ComponentProps<"li"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<li |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu-item" |
||||||
|
className={cn("group/menu-item relative", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SidebarMenuItem.displayName = "SidebarMenuItem" |
||||||
|
|
||||||
|
const sidebarMenuButtonVariants = cva( |
||||||
|
"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", |
||||||
|
{ |
||||||
|
variants: { |
||||||
|
variant: { |
||||||
|
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground", |
||||||
|
outline: |
||||||
|
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]", |
||||||
|
}, |
||||||
|
size: { |
||||||
|
default: "h-8 text-sm", |
||||||
|
sm: "h-7 text-xs", |
||||||
|
lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0", |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultVariants: { |
||||||
|
variant: "default", |
||||||
|
size: "default", |
||||||
|
}, |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
const SidebarMenuButton = React.forwardRef< |
||||||
|
HTMLButtonElement, |
||||||
|
React.ComponentProps<"button"> & { |
||||||
|
asChild?: boolean |
||||||
|
isActive?: boolean |
||||||
|
tooltip?: string | React.ComponentProps<typeof TooltipContent> |
||||||
|
} & VariantProps<typeof sidebarMenuButtonVariants> |
||||||
|
>( |
||||||
|
( |
||||||
|
{ |
||||||
|
asChild = false, |
||||||
|
isActive = false, |
||||||
|
variant = "default", |
||||||
|
size = "default", |
||||||
|
tooltip, |
||||||
|
className, |
||||||
|
...props |
||||||
|
}, |
||||||
|
ref |
||||||
|
) => { |
||||||
|
const Comp = asChild ? Slot : "button" |
||||||
|
const { isMobile, state } = useSidebar() |
||||||
|
|
||||||
|
const button = ( |
||||||
|
<Comp |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu-button" |
||||||
|
data-size={size} |
||||||
|
data-active={isActive} |
||||||
|
className={cn(sidebarMenuButtonVariants({ variant, size }), className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
|
||||||
|
if (!tooltip) { |
||||||
|
return button |
||||||
|
} |
||||||
|
|
||||||
|
if (typeof tooltip === "string") { |
||||||
|
tooltip = { |
||||||
|
children: tooltip, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<Tooltip> |
||||||
|
<TooltipTrigger asChild>{button}</TooltipTrigger> |
||||||
|
<TooltipContent |
||||||
|
side="right" |
||||||
|
align="center" |
||||||
|
hidden={state !== "collapsed" || isMobile} |
||||||
|
{...tooltip} |
||||||
|
/> |
||||||
|
</Tooltip> |
||||||
|
) |
||||||
|
} |
||||||
|
) |
||||||
|
SidebarMenuButton.displayName = "SidebarMenuButton" |
||||||
|
|
||||||
|
const SidebarMenuAction = React.forwardRef< |
||||||
|
HTMLButtonElement, |
||||||
|
React.ComponentProps<"button"> & { |
||||||
|
asChild?: boolean |
||||||
|
showOnHover?: boolean |
||||||
|
} |
||||||
|
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => { |
||||||
|
const Comp = asChild ? Slot : "button" |
||||||
|
|
||||||
|
return ( |
||||||
|
<Comp |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu-action" |
||||||
|
className={cn( |
||||||
|
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0", |
||||||
|
// Increases the hit area of the button on mobile.
|
||||||
|
"after:absolute after:-inset-2 after:md:hidden", |
||||||
|
"peer-data-[size=sm]/menu-button:top-1", |
||||||
|
"peer-data-[size=default]/menu-button:top-1.5", |
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5", |
||||||
|
"group-data-[collapsible=icon]:hidden", |
||||||
|
showOnHover && |
||||||
|
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarMenuAction.displayName = "SidebarMenuAction" |
||||||
|
|
||||||
|
const SidebarMenuBadge = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu-badge" |
||||||
|
className={cn( |
||||||
|
"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none", |
||||||
|
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", |
||||||
|
"peer-data-[size=sm]/menu-button:top-1", |
||||||
|
"peer-data-[size=default]/menu-button:top-1.5", |
||||||
|
"peer-data-[size=lg]/menu-button:top-2.5", |
||||||
|
"group-data-[collapsible=icon]:hidden", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SidebarMenuBadge.displayName = "SidebarMenuBadge" |
||||||
|
|
||||||
|
const SidebarMenuSkeleton = React.forwardRef< |
||||||
|
HTMLDivElement, |
||||||
|
React.ComponentProps<"div"> & { |
||||||
|
showIcon?: boolean |
||||||
|
} |
||||||
|
>(({ className, showIcon = false, ...props }, ref) => { |
||||||
|
// Random width between 50 to 90%.
|
||||||
|
const width = React.useMemo(() => { |
||||||
|
return `${Math.floor(Math.random() * 40) + 50}%` |
||||||
|
}, []) |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu-skeleton" |
||||||
|
className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{showIcon && ( |
||||||
|
<Skeleton |
||||||
|
className="size-4 rounded-md" |
||||||
|
data-sidebar="menu-skeleton-icon" |
||||||
|
/> |
||||||
|
)} |
||||||
|
<Skeleton |
||||||
|
className="h-4 flex-1 max-w-[--skeleton-width]" |
||||||
|
data-sidebar="menu-skeleton-text" |
||||||
|
style={ |
||||||
|
{ |
||||||
|
"--skeleton-width": width, |
||||||
|
} as React.CSSProperties |
||||||
|
} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton" |
||||||
|
|
||||||
|
const SidebarMenuSub = React.forwardRef< |
||||||
|
HTMLUListElement, |
||||||
|
React.ComponentProps<"ul"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ul |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu-sub" |
||||||
|
className={cn( |
||||||
|
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5", |
||||||
|
"group-data-[collapsible=icon]:hidden", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SidebarMenuSub.displayName = "SidebarMenuSub" |
||||||
|
|
||||||
|
const SidebarMenuSubItem = React.forwardRef< |
||||||
|
HTMLLIElement, |
||||||
|
React.ComponentProps<"li"> |
||||||
|
>(({ ...props }, ref) => <li ref={ref} {...props} />) |
||||||
|
SidebarMenuSubItem.displayName = "SidebarMenuSubItem" |
||||||
|
|
||||||
|
const SidebarMenuSubButton = React.forwardRef< |
||||||
|
HTMLAnchorElement, |
||||||
|
React.ComponentProps<"a"> & { |
||||||
|
asChild?: boolean |
||||||
|
size?: "sm" | "md" |
||||||
|
isActive?: boolean |
||||||
|
} |
||||||
|
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => { |
||||||
|
const Comp = asChild ? Slot : "a" |
||||||
|
|
||||||
|
return ( |
||||||
|
<Comp |
||||||
|
ref={ref} |
||||||
|
data-sidebar="menu-sub-button" |
||||||
|
data-size={size} |
||||||
|
data-active={isActive} |
||||||
|
className={cn( |
||||||
|
"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", |
||||||
|
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", |
||||||
|
size === "sm" && "text-xs", |
||||||
|
size === "md" && "text-sm", |
||||||
|
"group-data-[collapsible=icon]:hidden", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
SidebarMenuSubButton.displayName = "SidebarMenuSubButton" |
||||||
|
|
||||||
|
export { |
||||||
|
Sidebar, |
||||||
|
SidebarContent, |
||||||
|
SidebarFooter, |
||||||
|
SidebarGroup, |
||||||
|
SidebarGroupAction, |
||||||
|
SidebarGroupContent, |
||||||
|
SidebarGroupLabel, |
||||||
|
SidebarHeader, |
||||||
|
SidebarInput, |
||||||
|
SidebarInset, |
||||||
|
SidebarMenu, |
||||||
|
SidebarMenuAction, |
||||||
|
SidebarMenuBadge, |
||||||
|
SidebarMenuButton, |
||||||
|
SidebarMenuItem, |
||||||
|
SidebarMenuSkeleton, |
||||||
|
SidebarMenuSub, |
||||||
|
SidebarMenuSubButton, |
||||||
|
SidebarMenuSubItem, |
||||||
|
SidebarProvider, |
||||||
|
SidebarRail, |
||||||
|
SidebarSeparator, |
||||||
|
SidebarTrigger, |
||||||
|
useSidebar, |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
function Skeleton({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn("animate-pulse rounded-md bg-primary/10", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export { Skeleton } |
||||||
@ -0,0 +1,111 @@ |
|||||||
|
import React, { useRef } from "react"; |
||||||
|
import { cn } from "@/lib/utils"; |
||||||
|
import { Check } from "lucide-react"; |
||||||
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; |
||||||
|
|
||||||
|
interface Step { |
||||||
|
number: number; |
||||||
|
label: string; |
||||||
|
} |
||||||
|
|
||||||
|
interface StepperProps { |
||||||
|
steps: Step[]; |
||||||
|
currentStep: number; |
||||||
|
onStepClick: (stepNumber: number) => void; |
||||||
|
} |
||||||
|
|
||||||
|
const Stepper: React.FC<StepperProps> = ({ |
||||||
|
steps, |
||||||
|
currentStep, |
||||||
|
onStepClick, |
||||||
|
}) => { |
||||||
|
const scrollAreaRef = useRef<HTMLDivElement | null>(null); |
||||||
|
|
||||||
|
const scrollToCurrentStep = (stepIndex: number) => { |
||||||
|
const scrollArea = scrollAreaRef.current; |
||||||
|
if (scrollArea && scrollArea.children.length) { |
||||||
|
const stepElement = scrollArea.children[stepIndex] as HTMLElement; |
||||||
|
|
||||||
|
if (stepElement) { |
||||||
|
stepElement.scrollIntoView({ |
||||||
|
behavior: "smooth", |
||||||
|
block: "center", |
||||||
|
inline: "center", |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
React.useEffect(() => { |
||||||
|
scrollToCurrentStep(currentStep - 1); |
||||||
|
}, [currentStep]); |
||||||
|
|
||||||
|
return ( |
||||||
|
<ScrollArea |
||||||
|
className="w-full whitespace-nowrap rounded-md antialiased py-4" |
||||||
|
dir="ltr" |
||||||
|
style={{ |
||||||
|
WebkitFontSmoothing: 'antialiased', |
||||||
|
MozOsxFontSmoothing: 'grayscale', |
||||||
|
textRendering: 'optimizeLegibility' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div className="flex items-center justify-center" ref={scrollAreaRef}> |
||||||
|
{steps.map((step, index) => ( |
||||||
|
<div |
||||||
|
key={step.number} |
||||||
|
className="flex flex-col items-center" |
||||||
|
> |
||||||
|
<div className="flex items-center"> |
||||||
|
<div className="flex flex-col items-center justify-center"> |
||||||
|
<div |
||||||
|
onClick={() => onStepClick(step.number)} |
||||||
|
className={cn( |
||||||
|
"w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold cursor-pointer transform-gpu", |
||||||
|
step.number === currentStep |
||||||
|
? "bg-primary text-primary-foreground shadow-sm" |
||||||
|
: step.number < currentStep |
||||||
|
? "bg-primary text-primary-foreground" |
||||||
|
: "bg-secondary text-secondary-foreground" |
||||||
|
)} |
||||||
|
// style={{
|
||||||
|
// backfaceVisibility: 'hidden'
|
||||||
|
// }}
|
||||||
|
> |
||||||
|
{step.number < currentStep ? ( |
||||||
|
<Check className="w-6 h-6" /> |
||||||
|
) : ( |
||||||
|
step.number |
||||||
|
)} |
||||||
|
</div> |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"mt-2 text-xs text-center w-20 antialiased", |
||||||
|
step.number === currentStep |
||||||
|
? "text-black dark:text-primary font-bold" |
||||||
|
: "text-black dark:text-primary" |
||||||
|
)} |
||||||
|
> |
||||||
|
{step.label} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{index < steps.length - 1 && ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"w-16 h-[2px] mb-5 -mx-5", |
||||||
|
step.number <= currentStep |
||||||
|
? "bg-primary" |
||||||
|
: "bg-slate-200" |
||||||
|
)} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
<ScrollBar orientation="horizontal" /> |
||||||
|
</ScrollArea> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Stepper; |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as SwitchPrimitives from "@radix-ui/react-switch" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Switch = React.forwardRef< |
||||||
|
React.ElementRef<typeof SwitchPrimitives.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SwitchPrimitives.Root |
||||||
|
className={cn( |
||||||
|
"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
ref={ref} |
||||||
|
> |
||||||
|
<SwitchPrimitives.Thumb |
||||||
|
className={cn( |
||||||
|
"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" |
||||||
|
)} |
||||||
|
/> |
||||||
|
</SwitchPrimitives.Root> |
||||||
|
)) |
||||||
|
Switch.displayName = SwitchPrimitives.Root.displayName |
||||||
|
|
||||||
|
export { Switch } |
||||||
@ -0,0 +1,120 @@ |
|||||||
|
import * as React from "react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Table = React.forwardRef< |
||||||
|
HTMLTableElement, |
||||||
|
React.HTMLAttributes<HTMLTableElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div className="relative w-full overflow-y-scroll table-scroll"> |
||||||
|
<table |
||||||
|
ref={ref} |
||||||
|
className={cn("w-full caption-bottom text-sm", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)) |
||||||
|
Table.displayName = "Table" |
||||||
|
|
||||||
|
const TableHeader = React.forwardRef< |
||||||
|
HTMLTableSectionElement, |
||||||
|
React.HTMLAttributes<HTMLTableSectionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} /> |
||||||
|
)) |
||||||
|
TableHeader.displayName = "TableHeader" |
||||||
|
|
||||||
|
const TableBody = React.forwardRef< |
||||||
|
HTMLTableSectionElement, |
||||||
|
React.HTMLAttributes<HTMLTableSectionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<tbody |
||||||
|
ref={ref} |
||||||
|
className={cn("[&_tr:last-child]:border-0", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableBody.displayName = "TableBody" |
||||||
|
|
||||||
|
const TableFooter = React.forwardRef< |
||||||
|
HTMLTableSectionElement, |
||||||
|
React.HTMLAttributes<HTMLTableSectionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<tfoot |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableFooter.displayName = "TableFooter" |
||||||
|
|
||||||
|
const TableRow = React.forwardRef< |
||||||
|
HTMLTableRowElement, |
||||||
|
React.HTMLAttributes<HTMLTableRowElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<tr |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableRow.displayName = "TableRow" |
||||||
|
|
||||||
|
const TableHead = React.forwardRef< |
||||||
|
HTMLTableCellElement, |
||||||
|
React.ThHTMLAttributes<HTMLTableCellElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<th |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableHead.displayName = "TableHead" |
||||||
|
|
||||||
|
const TableCell = React.forwardRef< |
||||||
|
HTMLTableCellElement, |
||||||
|
React.TdHTMLAttributes<HTMLTableCellElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<td |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableCell.displayName = "TableCell" |
||||||
|
|
||||||
|
const TableCaption = React.forwardRef< |
||||||
|
HTMLTableCaptionElement, |
||||||
|
React.HTMLAttributes<HTMLTableCaptionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<caption |
||||||
|
ref={ref} |
||||||
|
className={cn("mt-4 text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableCaption.displayName = "TableCaption" |
||||||
|
|
||||||
|
export { |
||||||
|
Table, |
||||||
|
TableHeader, |
||||||
|
TableBody, |
||||||
|
TableFooter, |
||||||
|
TableHead, |
||||||
|
TableRow, |
||||||
|
TableCell, |
||||||
|
TableCaption, |
||||||
|
} |
||||||
@ -0,0 +1,55 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as TabsPrimitive from "@radix-ui/react-tabs" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Tabs = TabsPrimitive.Root |
||||||
|
|
||||||
|
const TabsList = React.forwardRef< |
||||||
|
React.ElementRef<typeof TabsPrimitive.List>, |
||||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<TabsPrimitive.List |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TabsList.displayName = TabsPrimitive.List.displayName |
||||||
|
|
||||||
|
const TabsTrigger = React.forwardRef< |
||||||
|
React.ElementRef<typeof TabsPrimitive.Trigger>, |
||||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<TabsPrimitive.Trigger |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName |
||||||
|
|
||||||
|
const TabsContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof TabsPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<TabsPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TabsContent.displayName = TabsPrimitive.Content.displayName |
||||||
|
|
||||||
|
export { Tabs, TabsList, TabsTrigger, TabsContent } |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import * as React from "react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Textarea = React.forwardRef< |
||||||
|
HTMLTextAreaElement, |
||||||
|
React.ComponentProps<"textarea"> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<textarea |
||||||
|
className={cn( |
||||||
|
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", |
||||||
|
className |
||||||
|
)} |
||||||
|
ref={ref} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
Textarea.displayName = "Textarea" |
||||||
|
|
||||||
|
export { Textarea } |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
export const PageHeading: React.FC<{children : React.ReactNode}> = ({ |
||||||
|
children |
||||||
|
}) => { |
||||||
|
return( |
||||||
|
<>
|
||||||
|
<h2 className="text-3xl mb-1 font-semibold capitalize">{children}</h2> |
||||||
|
</> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,131 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as ToastPrimitives from "@radix-ui/react-toast" |
||||||
|
import { cva, type VariantProps } from "class-variance-authority" |
||||||
|
import { X } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const ToastProvider = ToastPrimitives.Provider |
||||||
|
|
||||||
|
const ToastViewport = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Viewport>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Viewport |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName |
||||||
|
|
||||||
|
const toastVariants = cva( |
||||||
|
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", |
||||||
|
{ |
||||||
|
variants: { |
||||||
|
variant: { |
||||||
|
default: "border bg-background text-foreground", |
||||||
|
destructive: |
||||||
|
"destructive group border-destructive bg-red-500 text-white", |
||||||
|
success : 'success group border-green-500 bg-green-500 text-white' |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultVariants: { |
||||||
|
variant: "default", |
||||||
|
}, |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
const Toast = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & |
||||||
|
VariantProps<typeof toastVariants> |
||||||
|
>(({ className, variant, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<ToastPrimitives.Root |
||||||
|
ref={ref} |
||||||
|
className={cn(toastVariants({ variant }), className)} |
||||||
|
duration={2000} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
Toast.displayName = ToastPrimitives.Root.displayName |
||||||
|
|
||||||
|
const ToastAction = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Action>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Action |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastAction.displayName = ToastPrimitives.Action.displayName |
||||||
|
|
||||||
|
const ToastClose = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Close>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Close |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", |
||||||
|
className |
||||||
|
)} |
||||||
|
toast-close="" |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<X className="h-4 w-4" /> |
||||||
|
</ToastPrimitives.Close> |
||||||
|
)) |
||||||
|
ToastClose.displayName = ToastPrimitives.Close.displayName |
||||||
|
|
||||||
|
const ToastTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Title |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm font-semibold [&+div]:text-xs", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastTitle.displayName = ToastPrimitives.Title.displayName |
||||||
|
|
||||||
|
const ToastDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm opacity-90", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastDescription.displayName = ToastPrimitives.Description.displayName |
||||||
|
|
||||||
|
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast> |
||||||
|
|
||||||
|
type ToastActionElement = React.ReactElement<typeof ToastAction> |
||||||
|
|
||||||
|
export { |
||||||
|
type ToastProps, |
||||||
|
type ToastActionElement, |
||||||
|
ToastProvider, |
||||||
|
ToastViewport, |
||||||
|
Toast, |
||||||
|
ToastTitle, |
||||||
|
ToastDescription, |
||||||
|
ToastClose, |
||||||
|
ToastAction, |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import { useToast } from "@/hooks/use-toast" |
||||||
|
import { |
||||||
|
Toast, |
||||||
|
ToastClose, |
||||||
|
ToastDescription, |
||||||
|
ToastProvider, |
||||||
|
ToastTitle, |
||||||
|
ToastViewport, |
||||||
|
} from "@/components/ui/toast" |
||||||
|
|
||||||
|
export function Toaster() { |
||||||
|
const { toasts } = useToast() |
||||||
|
|
||||||
|
return ( |
||||||
|
<ToastProvider> |
||||||
|
{toasts.map(function ({ id, title, description, action, ...props }) { |
||||||
|
return ( |
||||||
|
<Toast key={id} {...props}> |
||||||
|
<div className="grid gap-1"> |
||||||
|
{title && <ToastTitle>{title}</ToastTitle>} |
||||||
|
{description && ( |
||||||
|
<ToastDescription>{description}</ToastDescription> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{action} |
||||||
|
<ToastClose /> |
||||||
|
</Toast> |
||||||
|
) |
||||||
|
})} |
||||||
|
<ToastViewport /> |
||||||
|
</ToastProvider> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const TooltipProvider = TooltipPrimitive.Provider |
||||||
|
|
||||||
|
const Tooltip = TooltipPrimitive.Root |
||||||
|
|
||||||
|
const TooltipTrigger = TooltipPrimitive.Trigger |
||||||
|
|
||||||
|
const TooltipContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof TooltipPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> |
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => ( |
||||||
|
<TooltipPrimitive.Portal> |
||||||
|
<TooltipPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
sideOffset={sideOffset} |
||||||
|
className={cn( |
||||||
|
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground 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} |
||||||
|
/> |
||||||
|
</TooltipPrimitive.Portal> |
||||||
|
)) |
||||||
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName |
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } |
||||||
@ -0,0 +1,141 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { buttonVariants } from "@/components/ui/button" |
||||||
|
|
||||||
|
const AlertDialog = AlertDialogPrimitive.Root |
||||||
|
|
||||||
|
const AlertDialogTrigger = AlertDialogPrimitive.Trigger |
||||||
|
|
||||||
|
const AlertDialogPortal = AlertDialogPrimitive.Portal |
||||||
|
|
||||||
|
const AlertDialogOverlay = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Overlay>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.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", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
ref={ref} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName |
||||||
|
|
||||||
|
const AlertDialogContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPortal> |
||||||
|
<AlertDialogOverlay /> |
||||||
|
<AlertDialogPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</AlertDialogPortal> |
||||||
|
)) |
||||||
|
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName |
||||||
|
|
||||||
|
const AlertDialogHeader = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col space-y-2 text-center sm:text-left", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
AlertDialogHeader.displayName = "AlertDialogHeader" |
||||||
|
|
||||||
|
const AlertDialogFooter = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
AlertDialogFooter.displayName = "AlertDialogFooter" |
||||||
|
|
||||||
|
const AlertDialogTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Title |
||||||
|
ref={ref} |
||||||
|
className={cn("text-lg font-semibold", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName |
||||||
|
|
||||||
|
const AlertDialogDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogDescription.displayName = |
||||||
|
AlertDialogPrimitive.Description.displayName |
||||||
|
|
||||||
|
const AlertDialogAction = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Action>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Action |
||||||
|
ref={ref} |
||||||
|
className={cn(buttonVariants(), className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName |
||||||
|
|
||||||
|
const AlertDialogCancel = React.forwardRef< |
||||||
|
React.ElementRef<typeof AlertDialogPrimitive.Cancel>, |
||||||
|
React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<AlertDialogPrimitive.Cancel |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
buttonVariants({ variant: "outline" }), |
||||||
|
"mt-2 sm:mt-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName |
||||||
|
|
||||||
|
export { |
||||||
|
AlertDialog, |
||||||
|
AlertDialogPortal, |
||||||
|
AlertDialogOverlay, |
||||||
|
AlertDialogTrigger, |
||||||
|
AlertDialogContent, |
||||||
|
AlertDialogHeader, |
||||||
|
AlertDialogFooter, |
||||||
|
AlertDialogTitle, |
||||||
|
AlertDialogDescription, |
||||||
|
AlertDialogAction, |
||||||
|
AlertDialogCancel, |
||||||
|
} |
||||||
@ -0,0 +1,115 @@ |
|||||||
|
import * as React from "react" |
||||||
|
import { Slot } from "@radix-ui/react-slot" |
||||||
|
import { ChevronRight, MoreHorizontal } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Breadcrumb = React.forwardRef< |
||||||
|
HTMLElement, |
||||||
|
React.ComponentPropsWithoutRef<"nav"> & { |
||||||
|
separator?: React.ReactNode |
||||||
|
} |
||||||
|
>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />) |
||||||
|
Breadcrumb.displayName = "Breadcrumb" |
||||||
|
|
||||||
|
const BreadcrumbList = React.forwardRef< |
||||||
|
HTMLOListElement, |
||||||
|
React.ComponentPropsWithoutRef<"ol"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ol |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
BreadcrumbList.displayName = "BreadcrumbList" |
||||||
|
|
||||||
|
const BreadcrumbItem = React.forwardRef< |
||||||
|
HTMLLIElement, |
||||||
|
React.ComponentPropsWithoutRef<"li"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<li |
||||||
|
ref={ref} |
||||||
|
className={cn("inline-flex items-center gap-1.5", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
BreadcrumbItem.displayName = "BreadcrumbItem" |
||||||
|
|
||||||
|
const BreadcrumbLink = React.forwardRef< |
||||||
|
HTMLAnchorElement, |
||||||
|
React.ComponentPropsWithoutRef<"a"> & { |
||||||
|
asChild?: boolean |
||||||
|
} |
||||||
|
>(({ asChild, className, ...props }, ref) => { |
||||||
|
const Comp = asChild ? Slot : "a" |
||||||
|
|
||||||
|
return ( |
||||||
|
<Comp |
||||||
|
ref={ref} |
||||||
|
className={cn("transition-colors hover:text-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
BreadcrumbLink.displayName = "BreadcrumbLink" |
||||||
|
|
||||||
|
const BreadcrumbPage = React.forwardRef< |
||||||
|
HTMLSpanElement, |
||||||
|
React.ComponentPropsWithoutRef<"span"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<span |
||||||
|
ref={ref} |
||||||
|
role="link" |
||||||
|
aria-disabled="true" |
||||||
|
aria-current="page" |
||||||
|
className={cn("font-normal text-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
BreadcrumbPage.displayName = "BreadcrumbPage" |
||||||
|
|
||||||
|
const BreadcrumbSeparator = ({ |
||||||
|
children, |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"li">) => ( |
||||||
|
<li |
||||||
|
role="presentation" |
||||||
|
aria-hidden="true" |
||||||
|
className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
{children ?? <ChevronRight />} |
||||||
|
</li> |
||||||
|
) |
||||||
|
BreadcrumbSeparator.displayName = "BreadcrumbSeparator" |
||||||
|
|
||||||
|
const BreadcrumbEllipsis = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"span">) => ( |
||||||
|
<span |
||||||
|
role="presentation" |
||||||
|
aria-hidden="true" |
||||||
|
className={cn("flex h-9 w-9 items-center justify-center", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<MoreHorizontal className="h-4 w-4" /> |
||||||
|
<span className="sr-only">More</span> |
||||||
|
</span> |
||||||
|
) |
||||||
|
BreadcrumbEllipsis.displayName = "BreadcrumbElipssis" |
||||||
|
|
||||||
|
export { |
||||||
|
Breadcrumb, |
||||||
|
BreadcrumbList, |
||||||
|
BreadcrumbItem, |
||||||
|
BreadcrumbLink, |
||||||
|
BreadcrumbPage, |
||||||
|
BreadcrumbSeparator, |
||||||
|
BreadcrumbEllipsis, |
||||||
|
} |
||||||
@ -0,0 +1,30 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox" |
||||||
|
import { Check } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Checkbox = React.forwardRef< |
||||||
|
React.ElementRef<typeof CheckboxPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<CheckboxPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<CheckboxPrimitive.Indicator |
||||||
|
className={cn("flex items-center justify-center text-current")} |
||||||
|
> |
||||||
|
<Check className="h-4 w-4" /> |
||||||
|
</CheckboxPrimitive.Indicator> |
||||||
|
</CheckboxPrimitive.Root> |
||||||
|
)) |
||||||
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName |
||||||
|
|
||||||
|
export { Checkbox } |
||||||
@ -0,0 +1,11 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible" |
||||||
|
|
||||||
|
const Collapsible = CollapsiblePrimitive.Root |
||||||
|
|
||||||
|
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger |
||||||
|
|
||||||
|
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent |
||||||
|
|
||||||
|
export { Collapsible, CollapsibleTrigger, CollapsibleContent } |
||||||
@ -0,0 +1,122 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog" |
||||||
|
import { X } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root |
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger |
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal |
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close |
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DialogPrimitive.Overlay |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName |
||||||
|
|
||||||
|
const DialogContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> |
||||||
|
>(({ className, children, ...props }, ref) => ( |
||||||
|
<DialogPortal> |
||||||
|
<DialogOverlay /> |
||||||
|
<DialogPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...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> |
||||||
|
</DialogPrimitive.Content> |
||||||
|
</DialogPortal> |
||||||
|
)) |
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName |
||||||
|
|
||||||
|
const DialogHeader = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col space-y-1.5 text-center sm:text-left", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
DialogHeader.displayName = "DialogHeader" |
||||||
|
|
||||||
|
const DialogFooter = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
DialogFooter.displayName = "DialogFooter" |
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DialogPrimitive.Title |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"text-lg font-semibold leading-none tracking-tight", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName |
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<DialogPrimitive.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName |
||||||
|
|
||||||
|
export { |
||||||
|
Dialog, |
||||||
|
DialogPortal, |
||||||
|
DialogOverlay, |
||||||
|
DialogTrigger, |
||||||
|
DialogClose, |
||||||
|
DialogContent, |
||||||
|
DialogHeader, |
||||||
|
DialogFooter, |
||||||
|
DialogTitle, |
||||||
|
DialogDescription, |
||||||
|
} |
||||||
@ -0,0 +1,117 @@ |
|||||||
|
import * as React from "react" |
||||||
|
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
import { ButtonProps, buttonVariants } from "@/components/ui/button" |
||||||
|
|
||||||
|
const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( |
||||||
|
<nav |
||||||
|
role="navigation" |
||||||
|
aria-label="pagination" |
||||||
|
className={cn("mx-auto flex w-full justify-center", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
Pagination.displayName = "Pagination" |
||||||
|
|
||||||
|
const PaginationContent = React.forwardRef< |
||||||
|
HTMLUListElement, |
||||||
|
React.ComponentProps<"ul"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ul |
||||||
|
ref={ref} |
||||||
|
className={cn("flex flex-row items-center gap-1", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
PaginationContent.displayName = "PaginationContent" |
||||||
|
|
||||||
|
const PaginationItem = React.forwardRef< |
||||||
|
HTMLLIElement, |
||||||
|
React.ComponentProps<"li"> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<li ref={ref} className={cn("", className)} {...props} /> |
||||||
|
)) |
||||||
|
PaginationItem.displayName = "PaginationItem" |
||||||
|
|
||||||
|
type PaginationLinkProps = { |
||||||
|
isActive?: boolean |
||||||
|
} & Pick<ButtonProps, "size"> & |
||||||
|
React.ComponentProps<"a"> |
||||||
|
|
||||||
|
const PaginationLink = ({ |
||||||
|
className, |
||||||
|
isActive, |
||||||
|
size = "icon", |
||||||
|
...props |
||||||
|
}: PaginationLinkProps) => ( |
||||||
|
<a |
||||||
|
aria-current={isActive ? "page" : undefined} |
||||||
|
className={cn( |
||||||
|
buttonVariants({ |
||||||
|
variant: isActive ? "outline" : "ghost", |
||||||
|
size, |
||||||
|
}), |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
PaginationLink.displayName = "PaginationLink" |
||||||
|
|
||||||
|
const PaginationPrevious = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof PaginationLink>) => ( |
||||||
|
<PaginationLink |
||||||
|
aria-label="Go to previous page" |
||||||
|
size="default" |
||||||
|
className={cn("gap-1 pl-2.5", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<ChevronLeft className="h-4 w-4" /> |
||||||
|
<span>Previous</span> |
||||||
|
</PaginationLink> |
||||||
|
) |
||||||
|
PaginationPrevious.displayName = "PaginationPrevious" |
||||||
|
|
||||||
|
const PaginationNext = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<typeof PaginationLink>) => ( |
||||||
|
<PaginationLink |
||||||
|
aria-label="Go to next page" |
||||||
|
size="default" |
||||||
|
className={cn("gap-1 pr-2.5", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<span>Next</span> |
||||||
|
<ChevronRight className="h-4 w-4" /> |
||||||
|
</PaginationLink> |
||||||
|
) |
||||||
|
PaginationNext.displayName = "PaginationNext" |
||||||
|
|
||||||
|
const PaginationEllipsis = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.ComponentProps<"span">) => ( |
||||||
|
<span |
||||||
|
aria-hidden |
||||||
|
className={cn("flex h-9 w-9 items-center justify-center", className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<MoreHorizontal className="h-4 w-4" /> |
||||||
|
<span className="sr-only">More pages</span> |
||||||
|
</span> |
||||||
|
) |
||||||
|
PaginationEllipsis.displayName = "PaginationEllipsis" |
||||||
|
|
||||||
|
export { |
||||||
|
Pagination, |
||||||
|
PaginationContent, |
||||||
|
PaginationLink, |
||||||
|
PaginationItem, |
||||||
|
PaginationPrevious, |
||||||
|
PaginationNext, |
||||||
|
PaginationEllipsis, |
||||||
|
} |
||||||
@ -0,0 +1,44 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" |
||||||
|
import { Circle } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const RadioGroup = React.forwardRef< |
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<RadioGroupPrimitive.Root |
||||||
|
className={cn("grid gap-2", className)} |
||||||
|
{...props} |
||||||
|
ref={ref} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName |
||||||
|
|
||||||
|
const RadioGroupItem = React.forwardRef< |
||||||
|
React.ElementRef<typeof RadioGroupPrimitive.Item>, |
||||||
|
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> |
||||||
|
>(({ className, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<RadioGroupPrimitive.Item |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"aspect-square h-4 w-4 rounded-full border border-purple-700 text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<RadioGroupPrimitive.Indicator className="flex items-center justify-center"> |
||||||
|
<Circle className="h-3.5 w-3.5 fill-purple-700/50" /> |
||||||
|
</RadioGroupPrimitive.Indicator> |
||||||
|
</RadioGroupPrimitive.Item> |
||||||
|
) |
||||||
|
}) |
||||||
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName |
||||||
|
|
||||||
|
export { RadioGroup, RadioGroupItem } |
||||||
@ -0,0 +1,31 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as SeparatorPrimitive from "@radix-ui/react-separator" |
||||||
|
|
||||||
|
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 }, |
||||||
|
ref |
||||||
|
) => ( |
||||||
|
<SeparatorPrimitive.Root |
||||||
|
ref={ref} |
||||||
|
decorative={decorative} |
||||||
|
orientation={orientation} |
||||||
|
className={cn( |
||||||
|
"shrink-0 bg-border", |
||||||
|
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
) |
||||||
|
Separator.displayName = SeparatorPrimitive.Root.displayName |
||||||
|
|
||||||
|
export { Separator } |
||||||
@ -0,0 +1,140 @@ |
|||||||
|
"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 { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Sheet = SheetPrimitive.Root |
||||||
|
|
||||||
|
const SheetTrigger = SheetPrimitive.Trigger |
||||||
|
|
||||||
|
const SheetClose = SheetPrimitive.Close |
||||||
|
|
||||||
|
const SheetPortal = SheetPrimitive.Portal |
||||||
|
|
||||||
|
const SheetOverlay = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Overlay>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> |
||||||
|
>(({ 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", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
ref={ref} |
||||||
|
/> |
||||||
|
)) |
||||||
|
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=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", |
||||||
|
{ |
||||||
|
variants: { |
||||||
|
side: { |
||||||
|
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", |
||||||
|
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", |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultVariants: { |
||||||
|
side: "right", |
||||||
|
}, |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
interface SheetContentProps |
||||||
|
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, |
||||||
|
VariantProps<typeof sheetVariants> {} |
||||||
|
|
||||||
|
const SheetContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Content>, |
||||||
|
SheetContentProps |
||||||
|
>(({ side = "right", className, children, ...props }, ref) => ( |
||||||
|
<SheetPortal> |
||||||
|
<SheetOverlay /> |
||||||
|
<SheetPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
className={cn(sheetVariants({ side }), className)} |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<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> |
||||||
|
{children} |
||||||
|
</SheetPrimitive.Content> |
||||||
|
</SheetPortal> |
||||||
|
)) |
||||||
|
SheetContent.displayName = SheetPrimitive.Content.displayName |
||||||
|
|
||||||
|
const SheetHeader = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col space-y-2 text-center sm:text-left", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
SheetHeader.displayName = "SheetHeader" |
||||||
|
|
||||||
|
const SheetFooter = ({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
SheetFooter.displayName = "SheetFooter" |
||||||
|
|
||||||
|
const SheetTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SheetPrimitive.Title |
||||||
|
ref={ref} |
||||||
|
className={cn("text-lg font-semibold text-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SheetTitle.displayName = SheetPrimitive.Title.displayName |
||||||
|
|
||||||
|
const SheetDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof SheetPrimitive.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<SheetPrimitive.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
SheetDescription.displayName = SheetPrimitive.Description.displayName |
||||||
|
|
||||||
|
export { |
||||||
|
Sheet, |
||||||
|
SheetPortal, |
||||||
|
SheetOverlay, |
||||||
|
SheetTrigger, |
||||||
|
SheetClose, |
||||||
|
SheetContent, |
||||||
|
SheetHeader, |
||||||
|
SheetFooter, |
||||||
|
SheetTitle, |
||||||
|
SheetDescription, |
||||||
|
} |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
function Skeleton({ |
||||||
|
className, |
||||||
|
...props |
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn("animate-pulse rounded-md bg-primary/10", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export { Skeleton } |
||||||
@ -0,0 +1,120 @@ |
|||||||
|
import * as React from "react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const Table = React.forwardRef< |
||||||
|
HTMLTableElement, |
||||||
|
React.HTMLAttributes<HTMLTableElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<div className="relative w-full overflow-auto"> |
||||||
|
<table |
||||||
|
ref={ref} |
||||||
|
className={cn("w-full caption-bottom text-sm", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
)) |
||||||
|
Table.displayName = "Table" |
||||||
|
|
||||||
|
const TableHeader = React.forwardRef< |
||||||
|
HTMLTableSectionElement, |
||||||
|
React.HTMLAttributes<HTMLTableSectionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} /> |
||||||
|
)) |
||||||
|
TableHeader.displayName = "TableHeader" |
||||||
|
|
||||||
|
const TableBody = React.forwardRef< |
||||||
|
HTMLTableSectionElement, |
||||||
|
React.HTMLAttributes<HTMLTableSectionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<tbody |
||||||
|
ref={ref} |
||||||
|
className={cn("[&_tr:last-child]:border-0", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableBody.displayName = "TableBody" |
||||||
|
|
||||||
|
const TableFooter = React.forwardRef< |
||||||
|
HTMLTableSectionElement, |
||||||
|
React.HTMLAttributes<HTMLTableSectionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<tfoot |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableFooter.displayName = "TableFooter" |
||||||
|
|
||||||
|
const TableRow = React.forwardRef< |
||||||
|
HTMLTableRowElement, |
||||||
|
React.HTMLAttributes<HTMLTableRowElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<tr |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableRow.displayName = "TableRow" |
||||||
|
|
||||||
|
const TableHead = React.forwardRef< |
||||||
|
HTMLTableCellElement, |
||||||
|
React.ThHTMLAttributes<HTMLTableCellElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<th |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableHead.displayName = "TableHead" |
||||||
|
|
||||||
|
const TableCell = React.forwardRef< |
||||||
|
HTMLTableCellElement, |
||||||
|
React.TdHTMLAttributes<HTMLTableCellElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<td |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableCell.displayName = "TableCell" |
||||||
|
|
||||||
|
const TableCaption = React.forwardRef< |
||||||
|
HTMLTableCaptionElement, |
||||||
|
React.HTMLAttributes<HTMLTableCaptionElement> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<caption |
||||||
|
ref={ref} |
||||||
|
className={cn("mt-4 text-sm text-muted-foreground", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
TableCaption.displayName = "TableCaption" |
||||||
|
|
||||||
|
export { |
||||||
|
Table, |
||||||
|
TableHeader, |
||||||
|
TableBody, |
||||||
|
TableFooter, |
||||||
|
TableHead, |
||||||
|
TableRow, |
||||||
|
TableCell, |
||||||
|
TableCaption, |
||||||
|
} |
||||||
@ -0,0 +1,131 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as ToastPrimitives from "@radix-ui/react-toast" |
||||||
|
import { cva, type VariantProps } from "class-variance-authority" |
||||||
|
import { X } from "lucide-react" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const ToastProvider = ToastPrimitives.Provider |
||||||
|
|
||||||
|
const ToastViewport = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Viewport>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Viewport |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastViewport.displayName = ToastPrimitives.Viewport.displayName |
||||||
|
|
||||||
|
const toastVariants = cva( |
||||||
|
"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", |
||||||
|
{ |
||||||
|
variants: { |
||||||
|
variant: { |
||||||
|
default: "border bg-background text-foreground", |
||||||
|
destructive: |
||||||
|
"destructive group border-destructive bg-destructive text-destructive-foreground", |
||||||
|
success: |
||||||
|
"green-500 group border-green-500 bg-green-500 text-white", |
||||||
|
}, |
||||||
|
}, |
||||||
|
defaultVariants: { |
||||||
|
variant: "default", |
||||||
|
}, |
||||||
|
} |
||||||
|
) |
||||||
|
|
||||||
|
const Toast = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Root>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & |
||||||
|
VariantProps<typeof toastVariants> |
||||||
|
>(({ className, variant, ...props }, ref) => { |
||||||
|
return ( |
||||||
|
<ToastPrimitives.Root |
||||||
|
ref={ref} |
||||||
|
className={cn(toastVariants({ variant }), className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
) |
||||||
|
}) |
||||||
|
Toast.displayName = ToastPrimitives.Root.displayName |
||||||
|
|
||||||
|
const ToastAction = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Action>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Action |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive", |
||||||
|
className |
||||||
|
)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastAction.displayName = ToastPrimitives.Action.displayName |
||||||
|
|
||||||
|
const ToastClose = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Close>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Close |
||||||
|
ref={ref} |
||||||
|
className={cn( |
||||||
|
"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600", |
||||||
|
className |
||||||
|
)} |
||||||
|
toast-close="" |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<X className="h-4 w-4" /> |
||||||
|
</ToastPrimitives.Close> |
||||||
|
)) |
||||||
|
ToastClose.displayName = ToastPrimitives.Close.displayName |
||||||
|
|
||||||
|
const ToastTitle = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Title>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Title |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm font-semibold [&+div]:text-xs", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastTitle.displayName = ToastPrimitives.Title.displayName |
||||||
|
|
||||||
|
const ToastDescription = React.forwardRef< |
||||||
|
React.ElementRef<typeof ToastPrimitives.Description>, |
||||||
|
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description> |
||||||
|
>(({ className, ...props }, ref) => ( |
||||||
|
<ToastPrimitives.Description |
||||||
|
ref={ref} |
||||||
|
className={cn("text-sm opacity-90", className)} |
||||||
|
{...props} |
||||||
|
/> |
||||||
|
)) |
||||||
|
ToastDescription.displayName = ToastPrimitives.Description.displayName |
||||||
|
|
||||||
|
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast> |
||||||
|
|
||||||
|
type ToastActionElement = React.ReactElement<typeof ToastAction> |
||||||
|
|
||||||
|
export { |
||||||
|
type ToastProps, |
||||||
|
type ToastActionElement, |
||||||
|
ToastProvider, |
||||||
|
ToastViewport, |
||||||
|
Toast, |
||||||
|
ToastTitle, |
||||||
|
ToastDescription, |
||||||
|
ToastClose, |
||||||
|
ToastAction, |
||||||
|
} |
||||||
@ -0,0 +1,35 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import { useToast } from "@/hooks/use-toast" |
||||||
|
import { |
||||||
|
Toast, |
||||||
|
ToastClose, |
||||||
|
ToastDescription, |
||||||
|
ToastProvider, |
||||||
|
ToastTitle, |
||||||
|
ToastViewport, |
||||||
|
} from "@/components/ui/toast" |
||||||
|
|
||||||
|
export function Toaster() { |
||||||
|
const { toasts } = useToast() |
||||||
|
|
||||||
|
return ( |
||||||
|
<ToastProvider> |
||||||
|
{toasts.map(function ({ id, title, description, action, ...props }) { |
||||||
|
return ( |
||||||
|
<Toast key={id} {...props}> |
||||||
|
<div className="grid gap-1"> |
||||||
|
{title && <ToastTitle>{title}</ToastTitle>} |
||||||
|
{description && ( |
||||||
|
<ToastDescription>{description}</ToastDescription> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
{action} |
||||||
|
<ToastClose /> |
||||||
|
</Toast> |
||||||
|
) |
||||||
|
})} |
||||||
|
<ToastViewport /> |
||||||
|
</ToastProvider> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,32 @@ |
|||||||
|
"use client" |
||||||
|
|
||||||
|
import * as React from "react" |
||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip" |
||||||
|
|
||||||
|
import { cn } from "@/lib/utils" |
||||||
|
|
||||||
|
const TooltipProvider = TooltipPrimitive.Provider |
||||||
|
|
||||||
|
const Tooltip = TooltipPrimitive.Root |
||||||
|
|
||||||
|
const TooltipTrigger = TooltipPrimitive.Trigger |
||||||
|
|
||||||
|
const TooltipContent = React.forwardRef< |
||||||
|
React.ElementRef<typeof TooltipPrimitive.Content>, |
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> |
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => ( |
||||||
|
<TooltipPrimitive.Portal> |
||||||
|
<TooltipPrimitive.Content |
||||||
|
ref={ref} |
||||||
|
sideOffset={sideOffset} |
||||||
|
className={cn( |
||||||
|
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground 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} |
||||||
|
/> |
||||||
|
</TooltipPrimitive.Portal> |
||||||
|
)) |
||||||
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName |
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue