feat: inisialisasi project kit v2
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
import React from 'react';
|
||||
|
||||
interface AlertProps {
|
||||
type?: 'info' | 'danger' | 'warning' | 'success';
|
||||
title: string;
|
||||
message: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Alert({ type = 'info', title, message, className = '' }: AlertProps) {
|
||||
const styles = {
|
||||
info: 'bg-[#E3EBE8]/50 border-gray-200 text-[#3D4E4B]',
|
||||
danger: 'bg-red-50 border-red-100 text-red-700',
|
||||
warning: 'bg-amber-50 border-amber-100 text-amber-800',
|
||||
success: 'bg-teal-50 border-teal-100 text-teal-800'
|
||||
};
|
||||
|
||||
const icons = {
|
||||
info: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
|
||||
danger: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>,
|
||||
warning: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>,
|
||||
success: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`p-4 rounded-2xl border flex gap-4 items-start anim-fade font-sans ${styles[type]} ${className}`}>
|
||||
<div className={`shrink-0 mt-0.5 ${type === 'info' ? 'text-[#D4A017]' : ''}`}>{icons[type]}</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-bold tracking-tight leading-tight">{title}</h4>
|
||||
<p className="text-xs font-semibold mt-1 leading-relaxed opacity-70 tracking-tight">{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export default function ApplicationLogo(props) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
viewBox="0 0 316 316"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M305.8 81.125C305.77 80.995 305.69 80.885 305.65 80.755C305.56 80.525 305.49 80.285 305.37 80.075C305.29 79.935 305.17 79.815 305.07 79.685C304.94 79.515 304.83 79.325 304.68 79.175C304.55 79.045 304.39 78.955 304.25 78.845C304.09 78.715 303.95 78.575 303.77 78.475L251.32 48.275C249.97 47.495 248.31 47.495 246.96 48.275L194.51 78.475C194.33 78.575 194.19 78.725 194.03 78.845C193.89 78.955 193.73 79.045 193.6 79.175C193.45 79.325 193.34 79.515 193.21 79.685C193.11 79.815 192.99 79.935 192.91 80.075C192.79 80.285 192.71 80.525 192.63 80.755C192.58 80.875 192.51 80.995 192.48 81.125C192.38 81.495 192.33 81.875 192.33 82.265V139.625L148.62 164.795V52.575C148.62 52.185 148.57 51.805 148.47 51.435C148.44 51.305 148.36 51.195 148.32 51.065C148.23 50.835 148.16 50.595 148.04 50.385C147.96 50.245 147.84 50.125 147.74 49.995C147.61 49.825 147.5 49.635 147.35 49.485C147.22 49.355 147.06 49.265 146.92 49.155C146.76 49.025 146.62 48.885 146.44 48.785L93.99 18.585C92.64 17.805 90.98 17.805 89.63 18.585L37.18 48.785C37 48.885 36.86 49.035 36.7 49.155C36.56 49.265 36.4 49.355 36.27 49.485C36.12 49.635 36.01 49.825 35.88 49.995C35.78 50.125 35.66 50.245 35.58 50.385C35.46 50.595 35.38 50.835 35.3 51.065C35.25 51.185 35.18 51.305 35.15 51.435C35.05 51.805 35 52.185 35 52.575V232.235C35 233.795 35.84 235.245 37.19 236.025L142.1 296.425C142.33 296.555 142.58 296.635 142.82 296.725C142.93 296.765 143.04 296.835 143.16 296.865C143.53 296.965 143.9 297.015 144.28 297.015C144.66 297.015 145.03 296.965 145.4 296.865C145.5 296.835 145.59 296.775 145.69 296.745C145.95 296.655 146.21 296.565 146.45 296.435L251.36 236.035C252.72 235.255 253.55 233.815 253.55 232.245V174.885L303.81 145.945C305.17 145.165 306 143.725 306 142.155V82.265C305.95 81.875 305.89 81.495 305.8 81.125ZM144.2 227.205L100.57 202.515L146.39 176.135L196.66 147.195L240.33 172.335L208.29 190.625L144.2 227.205ZM244.75 114.995V164.795L226.39 154.225L201.03 139.625V89.825L219.39 100.395L244.75 114.995ZM249.12 57.105L292.81 82.265L249.12 107.425L205.43 82.265L249.12 57.105ZM114.49 184.425L96.13 194.995V85.305L121.49 70.705L139.85 60.135V169.815L114.49 184.425ZM91.76 27.425L135.45 52.585L91.76 77.745L48.07 52.585L91.76 27.425ZM43.67 60.135L62.03 70.705L87.39 85.305V202.545V202.555V202.565C87.39 202.735 87.44 202.895 87.46 203.055C87.49 203.265 87.49 203.485 87.55 203.695V203.705C87.6 203.875 87.69 204.035 87.76 204.195C87.84 204.375 87.89 204.575 87.99 204.745C87.99 204.745 87.99 204.755 88 204.755C88.09 204.905 88.22 205.035 88.33 205.175C88.45 205.335 88.55 205.495 88.69 205.635L88.7 205.645C88.82 205.765 88.98 205.855 89.12 205.965C89.28 206.085 89.42 206.225 89.59 206.325C89.6 206.325 89.6 206.325 89.61 206.335C89.62 206.335 89.62 206.345 89.63 206.345L139.87 234.775V285.065L43.67 229.705V60.135ZM244.75 229.705L148.58 285.075V234.775L219.8 194.115L244.75 179.875V229.705ZM297.2 139.625L253.49 164.795V114.995L278.85 100.395L297.21 89.825V139.625H297.2Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { usePage } from '@inertiajs/react';
|
||||
import React from 'react';
|
||||
import { PageProps } from '@/types';
|
||||
|
||||
interface CanProps {
|
||||
ability: string | string[];
|
||||
children: React.ReactNode;
|
||||
fallback?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Can({ ability, children, fallback = null }: CanProps) {
|
||||
const { permissions } = usePage<PageProps>().props.auth;
|
||||
const abilities = Array.isArray(ability) ? ability : [ability];
|
||||
|
||||
const allowed = abilities.some(a => permissions.includes(a));
|
||||
|
||||
return allowed ? <>{children}</> : <>{fallback}</>;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
export default function Checkbox({ className = '', ...props }) {
|
||||
return (
|
||||
<input
|
||||
{...props}
|
||||
type="checkbox"
|
||||
className={
|
||||
'rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 ' +
|
||||
className
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export default function DangerButton({
|
||||
className = '',
|
||||
disabled,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
{...props}
|
||||
className={
|
||||
`inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 active:bg-red-700 ${
|
||||
disabled && 'opacity-25'
|
||||
} ` + className
|
||||
}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { Skeleton } from './Skeleton';
|
||||
|
||||
interface Column<T> {
|
||||
header: string;
|
||||
accessorKey: keyof T | string;
|
||||
sortable?: boolean;
|
||||
cell?: (item: T) => React.ReactNode;
|
||||
}
|
||||
|
||||
interface PaginationMeta {
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
total: number;
|
||||
per_page: number;
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
data: T[];
|
||||
columns: Column<T>[];
|
||||
meta?: PaginationMeta;
|
||||
links?: any[];
|
||||
filters?: any;
|
||||
onFilterChange?: (filters: any) => void;
|
||||
onSort?: (field: string, direction: 'asc' | 'desc') => void;
|
||||
onEdit?: (item: T) => void;
|
||||
onDelete?: (item: T) => void;
|
||||
onRestore?: (item: T) => void;
|
||||
onPermanentDelete?: (item: T) => void;
|
||||
canEdit?: boolean;
|
||||
canDelete?: boolean;
|
||||
isLoading?: boolean;
|
||||
emptyAction?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function DataTable<T extends { id: number | string }>({
|
||||
data,
|
||||
columns,
|
||||
meta,
|
||||
links,
|
||||
filters = {},
|
||||
onSort,
|
||||
onEdit,
|
||||
onDelete,
|
||||
onRestore,
|
||||
onPermanentDelete,
|
||||
canEdit = false,
|
||||
canDelete = false,
|
||||
isLoading = false,
|
||||
emptyAction,
|
||||
selectedIds = [],
|
||||
onSelectionChange,
|
||||
}: DataTableProps<T> & {
|
||||
selectedIds?: (number | string)[],
|
||||
onSelectionChange?: (ids: (number | string)[]) => void
|
||||
}) {
|
||||
|
||||
const toggleAll = () => {
|
||||
if (!onSelectionChange) return;
|
||||
if (selectedIds.length === data.length) {
|
||||
onSelectionChange([]);
|
||||
} else {
|
||||
onSelectionChange(data.map(item => item.id));
|
||||
}
|
||||
};
|
||||
|
||||
const toggleOne = (id: number | string) => {
|
||||
if (!onSelectionChange) return;
|
||||
if (selectedIds.includes(id)) {
|
||||
onSelectionChange(selectedIds.filter(i => i !== id));
|
||||
} else {
|
||||
onSelectionChange([...selectedIds, id]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (field: string) => {
|
||||
if (!onSort) return;
|
||||
const direction = filters.sort_field === field && filters.sort_direction === 'asc' ? 'desc' : 'asc';
|
||||
onSort(field, direction);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="relative bg-white rounded-2xl border border-gray-100 shadow-sm transition-all overflow-hidden">
|
||||
|
||||
|
||||
<div className="overflow-x-auto custom-scrollbar">
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-gray-50/50 border-b border-gray-50">
|
||||
{onSelectionChange && (
|
||||
<th className="pl-8 py-5 w-10">
|
||||
<div className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={data.length > 0 && selectedIds.length === data.length}
|
||||
onChange={toggleAll}
|
||||
className="w-4 h-4 rounded-lg border-gray-200 text-[#D4A017] focus:ring-[#D4A017]/20 transition-all cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
)}
|
||||
{columns.map((col, idx) => (
|
||||
<th
|
||||
key={idx}
|
||||
className={`px-8 py-5 text-sm font-bold text-[#3D4E4B]/40 tracking-tight whitespace-nowrap ${idx === 0 && !onSelectionChange ? 'pl-8' : ''} ${col.sortable ? 'cursor-pointer hover:text-[#D4A017] transition-colors group' : ''}`}
|
||||
onClick={() => col.sortable && handleSort(col.accessorKey as string)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{col.header}
|
||||
{col.sortable && (
|
||||
<div className="flex flex-col opacity-20 group-hover:opacity-100 transition-opacity scale-75">
|
||||
<svg className={`w-3 h-3 ${filters.sort_field === col.accessorKey && filters.sort_direction === 'asc' ? 'text-[#D4A017]' : ''}`} fill="currentColor" viewBox="0 0 24 24"><path d="M12 4l-8 8h16z"/></svg>
|
||||
<svg className={`w-3 h-3 -mt-1.5 ${filters.sort_field === col.accessorKey && filters.sort_direction === 'desc' ? 'text-[#D4A017]' : ''}`} fill="currentColor" viewBox="0 0 24 24"><path d="M12 20l8-8H4z"/></svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
{(canEdit || onDelete || onRestore || onPermanentDelete) && (
|
||||
<th className="px-8 py-5 text-right text-sm font-bold text-[#3D4E4B]/40 tracking-tight">Actions</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-50">
|
||||
{isLoading ? (
|
||||
Array.from({ length: 5 }).map((_, i) => (
|
||||
<tr key={i} className="anim-fade">
|
||||
{onSelectionChange && <td className="pl-8 py-5"><Skeleton width={16} height={16} /></td>}
|
||||
{columns.map((_, idx) => (
|
||||
<td key={idx} className={`px-8 py-5 ${idx === 0 && !onSelectionChange ? 'pl-8' : ''}`}>
|
||||
<Skeleton variant="text" width={idx === 0 ? '60%' : '80%'} />
|
||||
</td>
|
||||
))}
|
||||
{(canEdit || onDelete || onRestore || onPermanentDelete) && (
|
||||
<td className="px-8 py-5 text-right"><Skeleton className="ml-auto" width={80} height={32} /></td>
|
||||
)}
|
||||
</tr>
|
||||
))
|
||||
) : data.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={columns.length + (onSelectionChange ? 1 : 0) + 1} className="px-8 py-12 text-center">
|
||||
<div className="flex flex-col items-center gap-3 anim-up">
|
||||
<div className="w-12 h-12 rounded-2xl bg-gray-50 flex items-center justify-center text-gray-300">
|
||||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0l-8 4-8-4" /></svg>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-gray-400">No data found</p>
|
||||
{emptyAction && <div className="mt-1">{emptyAction}</div>}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : data.map((item) => (
|
||||
<tr key={item.id} className={`hover:bg-gray-50/30 transition-colors group ${selectedIds.includes(item.id) ? 'bg-[#D4A017]/5' : ''}`}>
|
||||
{onSelectionChange && (
|
||||
<td className="pl-8 py-5">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedIds.includes(item.id)}
|
||||
onChange={() => toggleOne(item.id)}
|
||||
className="w-4 h-4 rounded-lg border-gray-200 text-[#D4A017] focus:ring-[#D4A017]/20 transition-all cursor-pointer"
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
{columns.map((col, colIndex) => (
|
||||
<td key={colIndex} className={`px-8 py-5 whitespace-nowrap ${colIndex === 0 && !onSelectionChange ? 'pl-8' : ''}`}>
|
||||
{col.cell ? col.cell(item) : (
|
||||
<span className="text-xs font-bold text-[#3D4E4B]">{String(item[col.accessorKey as keyof T] || '-')}</span>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
{(canEdit || onDelete || onRestore || onPermanentDelete) && (
|
||||
<td className="px-8 py-5 whitespace-nowrap text-right">
|
||||
<div className="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-all translate-x-2 group-hover:translate-x-0">
|
||||
{onRestore && (
|
||||
<button onClick={() => onRestore(item)} className="p-2 rounded-xl text-gray-400 hover:text-[#21A59F] hover:bg-[#21A59F]/5 transition-all" title="Restore">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
|
||||
</button>
|
||||
)}
|
||||
{canEdit && onEdit && (
|
||||
<button onClick={() => onEdit(item)} className="p-2 rounded-xl text-gray-400 hover:text-[#D4A017] hover:bg-[#D4A017]/5 transition-all" title="Edit">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
|
||||
</button>
|
||||
)}
|
||||
{onDelete && (
|
||||
<button onClick={() => onDelete(item)} className="p-2 rounded-xl text-gray-400 hover:text-red-500 hover:bg-red-50 transition-all" title="Archive">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
|
||||
</button>
|
||||
)}
|
||||
{onPermanentDelete && (
|
||||
<button onClick={() => onPermanentDelete(item)} className="p-2 rounded-xl text-red-300 hover:text-red-600 hover:bg-red-50 transition-all" title="Delete permanently">
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pagination - Professional Flat Style */}
|
||||
{meta && links && (
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<div className="text-sm font-bold text-[#3D4E4B]/40 tracking-tight">
|
||||
Showing <span className="text-[#3D4E4B]">{data.length}</span> of <span className="text-[#3D4E4B]">{meta.total}</span> entries
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{links.map((link, idx) => {
|
||||
if (link.label.includes('Previous')) {
|
||||
return (
|
||||
<Link key={idx} href={link.url || '#'} preserveState className={`px-4 py-2 rounded-xl text-sm font-bold tracking-tight transition-all ${!link.url ? 'text-gray-300 pointer-events-none' : 'text-[#3D4E4B] hover:bg-white hover:shadow-sm'}`}>Prev</Link>
|
||||
);
|
||||
}
|
||||
if (link.label.includes('Next')) {
|
||||
return (
|
||||
<Link key={idx} href={link.url || '#'} preserveState className={`px-4 py-2 rounded-xl text-sm font-bold tracking-tight transition-all ${!link.url ? 'text-gray-300 pointer-events-none' : 'text-[#3D4E4B] hover:bg-white hover:shadow-sm'}`}>Next</Link>
|
||||
);
|
||||
}
|
||||
if (link.label.includes('...') || /^\d+$/.test(link.label)) {
|
||||
return (
|
||||
<Link
|
||||
key={idx} href={link.url || '#'} preserveState
|
||||
className={`w-9 h-9 flex items-center justify-center rounded-xl text-sm font-bold transition-all
|
||||
${link.active
|
||||
? 'bg-[#3D4E4B] text-white'
|
||||
: 'text-[#3D4E4B] hover:bg-white hover:shadow-sm'
|
||||
}`}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { Transition } from '@headlessui/react';
|
||||
import { Link } from '@inertiajs/react';
|
||||
import { createContext, useContext, useState } from 'react';
|
||||
|
||||
const DropDownContext = createContext();
|
||||
|
||||
const Dropdown = ({ children }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const toggleOpen = () => {
|
||||
setOpen((previousState) => !previousState);
|
||||
};
|
||||
|
||||
return (
|
||||
<DropDownContext.Provider value={{ open, setOpen, toggleOpen }}>
|
||||
<div className="relative">{children}</div>
|
||||
</DropDownContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
const Trigger = ({ children }) => {
|
||||
const { open, setOpen, toggleOpen } = useContext(DropDownContext);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div onClick={toggleOpen}>{children}</div>
|
||||
|
||||
{open && (
|
||||
<div
|
||||
className="fixed inset-0 z-40"
|
||||
onClick={() => setOpen(false)}
|
||||
></div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Content = ({
|
||||
align = 'right',
|
||||
width = '48',
|
||||
contentClasses = 'py-1 bg-white',
|
||||
children,
|
||||
}) => {
|
||||
const { open, setOpen } = useContext(DropDownContext);
|
||||
|
||||
let alignmentClasses = 'origin-top';
|
||||
|
||||
if (align === 'left') {
|
||||
alignmentClasses = 'ltr:origin-top-left rtl:origin-top-right start-0';
|
||||
} else if (align === 'right') {
|
||||
alignmentClasses = 'ltr:origin-top-right rtl:origin-top-left end-0';
|
||||
}
|
||||
|
||||
let widthClasses = '';
|
||||
|
||||
if (width === '48') {
|
||||
widthClasses = 'w-48';
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Transition
|
||||
show={open}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<div
|
||||
className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
`rounded-md ring-1 ring-black ring-opacity-5 ` +
|
||||
contentClasses
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownLink = ({ className = '', children, ...props }) => {
|
||||
return (
|
||||
<Link
|
||||
{...props}
|
||||
className={
|
||||
'block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 focus:bg-gray-100 focus:outline-none ' +
|
||||
className
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
Dropdown.Trigger = Trigger;
|
||||
Dropdown.Content = Content;
|
||||
Dropdown.Link = DropdownLink;
|
||||
|
||||
export default Dropdown;
|
||||
@@ -0,0 +1,10 @@
|
||||
export default function InputError({ message, className = '', ...props }) {
|
||||
return message ? (
|
||||
<p
|
||||
{...props}
|
||||
className={'text-sm text-red-600 ' + className}
|
||||
>
|
||||
{message}
|
||||
</p>
|
||||
) : null;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
export default function InputLabel({
|
||||
value,
|
||||
className = '',
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<label
|
||||
{...props}
|
||||
className={
|
||||
`block text-sm font-medium text-gray-700 ` +
|
||||
className
|
||||
}
|
||||
>
|
||||
{value ? value : children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogPanel,
|
||||
Transition,
|
||||
TransitionChild,
|
||||
} from '@headlessui/react';
|
||||
|
||||
export default function Modal({
|
||||
children,
|
||||
show = false,
|
||||
maxWidth = '2xl',
|
||||
closeable = true,
|
||||
onClose = () => {},
|
||||
}) {
|
||||
const close = () => {
|
||||
if (closeable) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const maxWidthClass = {
|
||||
sm: 'sm:max-w-sm',
|
||||
md: 'sm:max-w-md',
|
||||
lg: 'sm:max-w-lg',
|
||||
xl: 'sm:max-w-xl',
|
||||
'2xl': 'sm:max-w-2xl',
|
||||
}[maxWidth];
|
||||
|
||||
return (
|
||||
<Transition show={show} leave="duration-200">
|
||||
<Dialog
|
||||
as="div"
|
||||
id="modal"
|
||||
className="fixed inset-0 z-50 flex transform items-center overflow-y-auto px-4 py-6 transition-all sm:px-0"
|
||||
onClose={close}
|
||||
>
|
||||
<TransitionChild
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gray-500/75" />
|
||||
</TransitionChild>
|
||||
|
||||
<TransitionChild
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
enterTo="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
|
||||
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
||||
>
|
||||
<DialogPanel
|
||||
className={`mb-6 transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:mx-auto sm:w-full ${maxWidthClass}`}
|
||||
>
|
||||
{children}
|
||||
</DialogPanel>
|
||||
</TransitionChild>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Link } from '@inertiajs/react';
|
||||
|
||||
export default function NavLink({
|
||||
active = false,
|
||||
className = '',
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
{...props}
|
||||
className={
|
||||
'inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium leading-5 transition duration-150 ease-in-out focus:outline-none ' +
|
||||
(active
|
||||
? 'border-indigo-400 text-gray-900 focus:border-indigo-700'
|
||||
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 focus:border-gray-300 focus:text-gray-700') +
|
||||
className
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
export function Portal({ children }: { children: React.ReactNode }) {
|
||||
return createPortal(children, document.body);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
export default function PrimaryButton({
|
||||
className = '',
|
||||
disabled,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
{...props}
|
||||
className={
|
||||
`inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-bold tracking-tight text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900 ${
|
||||
disabled && 'opacity-25'
|
||||
} ` + className
|
||||
}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { Link } from '@inertiajs/react';
|
||||
|
||||
export default function ResponsiveNavLink({
|
||||
active = false,
|
||||
className = '',
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
{...props}
|
||||
className={`flex w-full items-start border-l-4 py-2 pe-4 ps-3 ${
|
||||
active
|
||||
? 'border-indigo-400 bg-indigo-50 text-indigo-700 focus:border-indigo-700 focus:bg-indigo-100 focus:text-indigo-800'
|
||||
: 'border-transparent text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800 focus:border-gray-300 focus:bg-gray-50 focus:text-gray-800'
|
||||
} text-base font-medium transition duration-150 ease-in-out focus:outline-none ${className}`}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
import { router } from '@inertiajs/react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
|
||||
export function RouterProgress() {
|
||||
const [progress, setProgress] = useState<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
let timer: ReturnType<typeof setTimeout>;
|
||||
|
||||
const offStart = router.on('start', () => {
|
||||
setProgress(0);
|
||||
// Animate to ~80% quickly, then slow down while waiting for response
|
||||
timer = setTimeout(() => setProgress(30), 50);
|
||||
timer = setTimeout(() => setProgress(60), 300);
|
||||
timer = setTimeout(() => setProgress(80), 800);
|
||||
});
|
||||
|
||||
const offFinish = router.on('finish', () => {
|
||||
clearTimeout(timer);
|
||||
setProgress(100);
|
||||
// Remove bar after fade-out
|
||||
setTimeout(() => setProgress(null), 400);
|
||||
});
|
||||
|
||||
return () => { offStart(); offFinish(); clearTimeout(timer); };
|
||||
}, []);
|
||||
|
||||
if (progress === null) return null;
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed top-0 left-0 z-[9999] h-[3px] pointer-events-none"
|
||||
style={{
|
||||
width: `${progress}%`,
|
||||
background: 'linear-gradient(90deg, #D4A017, #f0c040)',
|
||||
boxShadow: '0 0 8px rgba(212,160,23,0.6)',
|
||||
transition: progress === 100
|
||||
? 'width 0.15s ease-out, opacity 0.3s ease 0.15s'
|
||||
: 'width 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
opacity: progress === 100 ? 0 : 1,
|
||||
}}
|
||||
/>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
export default function SecondaryButton({
|
||||
type = 'button',
|
||||
className = '',
|
||||
disabled,
|
||||
children,
|
||||
...props
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
{...props}
|
||||
type={type}
|
||||
className={
|
||||
`inline-flex items-center rounded-xl border border-gray-200 bg-white px-4 py-2 text-sm font-bold tracking-tight text-[#3D4E4B] transition-all hover:bg-gray-50 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#D4A017] focus:ring-offset-2 disabled:opacity-25 ${
|
||||
disabled && 'opacity-25'
|
||||
} ` + className
|
||||
}
|
||||
disabled={disabled}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
|
||||
interface SkeletonProps {
|
||||
className?: string;
|
||||
variant?: 'circle' | 'rect' | 'text';
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
}
|
||||
|
||||
export function Skeleton({
|
||||
className = '',
|
||||
variant = 'rect',
|
||||
width,
|
||||
height
|
||||
}: SkeletonProps) {
|
||||
const baseClasses = "anim-shimmer rounded";
|
||||
|
||||
const variantClasses = {
|
||||
circle: "rounded-full",
|
||||
rect: "rounded-lg",
|
||||
text: "rounded h-4 w-full"
|
||||
};
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
width: typeof width === 'number' ? `${width}px` : width,
|
||||
height: typeof height === 'number' ? `${height}px` : height,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${className}`}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
|
||||
|
||||
export default forwardRef(function TextInput(
|
||||
{ type = 'text', className = '', isFocused = false, ...props },
|
||||
ref,
|
||||
) {
|
||||
const localRef = useRef(null);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
focus: () => localRef.current?.focus(),
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
if (isFocused) {
|
||||
localRef.current?.focus();
|
||||
}
|
||||
}, [isFocused]);
|
||||
|
||||
return (
|
||||
<input
|
||||
{...props}
|
||||
type={type}
|
||||
className={
|
||||
'rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ' +
|
||||
className
|
||||
}
|
||||
ref={localRef}
|
||||
/>
|
||||
);
|
||||
});
|
||||
Reference in New Issue
Block a user