Alexis
a07bd3146e
- Add Tailwind CSS dependencies and configure Vite to use Tailwind - Implement routing with React Router for Landing and Dashboard pages - Remove unused App.css file and refactor App component to utilize new structure - Update global styles in index.css to incorporate Tailwind's utility classes
105 lines
2.9 KiB
React
105 lines
2.9 KiB
React
/**
|
|
* Centralised collection of inline SVG icons used across the app. Keeping
|
|
* them here avoids pulling a full icon library for ~10 glyphs while still
|
|
* letting consumers style them via `className` (stroke inherits from
|
|
* `currentColor`).
|
|
*/
|
|
|
|
const base = {
|
|
width: 16,
|
|
height: 16,
|
|
viewBox: "0 0 24 24",
|
|
fill: "none",
|
|
stroke: "currentColor",
|
|
strokeWidth: 1.8,
|
|
strokeLinecap: "round",
|
|
strokeLinejoin: "round",
|
|
"aria-hidden": true,
|
|
};
|
|
|
|
export function DocumentIcon({ size = 36, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} className={className}>
|
|
<path d="M9 12h6M9 16h6M9 8h2" />
|
|
<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z" />
|
|
<path d="M13 2v5a2 2 0 002 2h5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function LayersIcon({ size = 18, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} className={className}>
|
|
<path d="M12 3L2 8l10 5 10-5-10-5zM2 13l10 5 10-5M2 18l10 5 10-5" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function ArrowLeftIcon({ size = 14, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} strokeWidth={2} className={className}>
|
|
<path d="M19 12H5M12 5l-7 7 7 7" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function ClockIcon({ size = 13, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} strokeWidth={1.5} className={className}>
|
|
<circle cx="12" cy="12" r="9" />
|
|
<path d="M12 7v5l3 3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function CheckIcon({ size = 15, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} strokeWidth={2} className={className}>
|
|
<path d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function RefreshIcon({ size = 15, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} strokeWidth={2} className={className}>
|
|
<path d="M1 4v6h6M23 20v-6h-6" />
|
|
<path d="M20.49 9A9 9 0 005.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 013.51 15" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function DownloadIcon({ size = 15, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} className={className}>
|
|
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function ChevronDownIcon({ size = 12, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} strokeWidth={2} className={className}>
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function SearchIcon({ size = 14, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} strokeWidth={2} className={className}>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<path d="M21 21l-4.35-4.35" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export function AlertIcon({ size = 16, className = "" }) {
|
|
return (
|
|
<svg {...base} width={size} height={size} className={className}>
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" />
|
|
<path d="M12 9v4M12 17h.01" />
|
|
</svg>
|
|
);
|
|
}
|