website refactor
This commit is contained in:
70
apps/website/components/shared/ux/ConfirmDialog.tsx
Normal file
70
apps/website/components/shared/ux/ConfirmDialog.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Modal } from '@/ui/Modal';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { AlertCircle } from 'lucide-react';
|
||||
|
||||
interface ConfirmDialogProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
onConfirm: () => void;
|
||||
title: string;
|
||||
description: string;
|
||||
confirmLabel?: string;
|
||||
cancelLabel?: string;
|
||||
variant?: 'danger' | 'primary';
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export function ConfirmDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
title,
|
||||
description,
|
||||
confirmLabel = 'Confirm',
|
||||
cancelLabel = 'Cancel',
|
||||
variant = 'primary',
|
||||
isLoading = false,
|
||||
}: ConfirmDialogProps) {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onOpenChange={(open) => !open && onClose()} title={title}>
|
||||
<Box p={6}>
|
||||
<Stack direction="row" gap={4} align="start">
|
||||
{variant === 'danger' && (
|
||||
<Box p={2} rounded="full" bg="bg-racing-red/10">
|
||||
<AlertCircle className="w-6 h-6 text-racing-red" />
|
||||
</Box>
|
||||
)}
|
||||
<Box flexGrow={1}>
|
||||
<Heading level={3} fontSize="lg" weight="semibold" mb={2}>
|
||||
{title}
|
||||
</Heading>
|
||||
<Text color="text-gray-400" size="sm" block mb={6}>
|
||||
{description}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Box display="flex" justifyContent="end" gap={3}>
|
||||
<Button variant="secondary" onClick={onClose} disabled={isLoading}>
|
||||
{cancelLabel}
|
||||
</Button>
|
||||
<Button
|
||||
variant={variant === 'danger' ? 'primary' : 'primary'}
|
||||
onClick={onConfirm}
|
||||
disabled={isLoading}
|
||||
className={variant === 'danger' ? 'bg-racing-red hover:bg-racing-red/90 border-racing-red' : ''}
|
||||
>
|
||||
{isLoading ? 'Processing...' : confirmLabel}
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
76
apps/website/components/shared/ux/InlineNotice.tsx
Normal file
76
apps/website/components/shared/ux/InlineNotice.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { AlertCircle, CheckCircle, Info, AlertTriangle } from 'lucide-react';
|
||||
|
||||
interface InlineNoticeProps {
|
||||
variant?: 'info' | 'success' | 'warning' | 'error';
|
||||
title?: string;
|
||||
message: string;
|
||||
mb?: number;
|
||||
}
|
||||
|
||||
export function InlineNotice({
|
||||
variant = 'info',
|
||||
title,
|
||||
message,
|
||||
mb,
|
||||
}: InlineNoticeProps) {
|
||||
const variants = {
|
||||
info: {
|
||||
bg: 'bg-primary-blue/10',
|
||||
border: 'border-primary-blue/30',
|
||||
text: 'text-primary-blue',
|
||||
icon: Info,
|
||||
},
|
||||
success: {
|
||||
bg: 'bg-performance-green/10',
|
||||
border: 'border-performance-green/30',
|
||||
text: 'text-performance-green',
|
||||
icon: CheckCircle,
|
||||
},
|
||||
warning: {
|
||||
bg: 'bg-warning-amber/10',
|
||||
border: 'border-warning-amber/30',
|
||||
text: 'text-warning-amber',
|
||||
icon: AlertTriangle,
|
||||
},
|
||||
error: {
|
||||
bg: 'bg-racing-red/10',
|
||||
border: 'border-racing-red/30',
|
||||
text: 'text-racing-red',
|
||||
icon: AlertCircle,
|
||||
},
|
||||
};
|
||||
|
||||
const config = variants[variant];
|
||||
const Icon = config.icon;
|
||||
|
||||
return (
|
||||
<Box
|
||||
p={4}
|
||||
rounded="lg"
|
||||
bg={config.bg}
|
||||
border
|
||||
borderColor={config.border}
|
||||
mb={mb}
|
||||
>
|
||||
<Stack direction="row" gap={3} align="start">
|
||||
<Icon className={`w-5 h-5 ${config.text} mt-0.5`} />
|
||||
<Box>
|
||||
{title && (
|
||||
<Text weight="semibold" color="text-white" block mb={1}>
|
||||
{title}
|
||||
</Text>
|
||||
)}
|
||||
<Text size="sm" color="text-gray-300" block>
|
||||
{message}
|
||||
</Text>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
38
apps/website/components/shared/ux/ProgressLine.tsx
Normal file
38
apps/website/components/shared/ux/ProgressLine.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { Box } from '@/ui/Box';
|
||||
|
||||
interface ProgressLineProps {
|
||||
isLoading: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ProgressLine({ isLoading, className = '' }: ProgressLineProps) {
|
||||
if (!isLoading) return null;
|
||||
|
||||
return (
|
||||
<Box
|
||||
w="full"
|
||||
h="0.5"
|
||||
bg="bg-iron-gray"
|
||||
overflow="hidden"
|
||||
className={`relative ${className}`}
|
||||
>
|
||||
<motion.div
|
||||
className="absolute top-0 left-0 h-full bg-primary-blue"
|
||||
initial={{ width: '0%', left: '0%' }}
|
||||
animate={{
|
||||
width: ['20%', '50%', '20%'],
|
||||
left: ['-20%', '100%', '-20%'],
|
||||
}}
|
||||
transition={{
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
123
apps/website/components/shared/ux/Toast.tsx
Normal file
123
apps/website/components/shared/ux/Toast.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, createContext, useContext } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { CheckCircle, AlertCircle, Info, X } from 'lucide-react';
|
||||
|
||||
interface Toast {
|
||||
id: string;
|
||||
message: string;
|
||||
variant: 'success' | 'error' | 'info';
|
||||
}
|
||||
|
||||
interface ToastContextType {
|
||||
showToast: (message: string, variant: 'success' | 'error' | 'info') => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextType | undefined>(undefined);
|
||||
|
||||
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
||||
const [toasts, setToasts] = useState<Toast[]>([]);
|
||||
|
||||
const showToast = (message: string, variant: 'success' | 'error' | 'info') => {
|
||||
const id = Math.random().toString(36).substring(2, 9);
|
||||
setToasts((prev) => [...prev, { id, message, variant }]);
|
||||
setTimeout(() => {
|
||||
setToasts((prev) => prev.filter((t) => t.id !== id));
|
||||
}, 5000);
|
||||
};
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ showToast }}>
|
||||
{children}
|
||||
<Box
|
||||
position="fixed"
|
||||
bottom={6}
|
||||
right={6}
|
||||
zIndex={50}
|
||||
className="pointer-events-none space-y-3"
|
||||
>
|
||||
<AnimatePresence>
|
||||
{toasts.map((toast) => (
|
||||
<ToastItem
|
||||
key={toast.id}
|
||||
toast={toast}
|
||||
onClose={() => setToasts((prev) => prev.filter((t) => t.id !== toast.id))}
|
||||
/>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</Box>
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useToast() {
|
||||
const context = useContext(ToastContext);
|
||||
if (!context) {
|
||||
throw new Error('useToast must be used within a ToastProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
|
||||
const variants = {
|
||||
success: {
|
||||
bg: 'bg-deep-graphite',
|
||||
border: 'border-performance-green/30',
|
||||
icon: CheckCircle,
|
||||
iconColor: 'text-performance-green',
|
||||
},
|
||||
error: {
|
||||
bg: 'bg-deep-graphite',
|
||||
border: 'border-racing-red/30',
|
||||
icon: AlertCircle,
|
||||
iconColor: 'text-racing-red',
|
||||
},
|
||||
info: {
|
||||
bg: 'bg-deep-graphite',
|
||||
border: 'border-primary-blue/30',
|
||||
icon: Info,
|
||||
iconColor: 'text-primary-blue',
|
||||
},
|
||||
};
|
||||
|
||||
const config = variants[toast.variant];
|
||||
const Icon = config.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20, scale: 0.95 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
className="pointer-events-auto"
|
||||
>
|
||||
<Box
|
||||
px={4}
|
||||
py={3}
|
||||
rounded="lg"
|
||||
bg={config.bg}
|
||||
border
|
||||
borderColor={config.border}
|
||||
shadow="xl"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={3}
|
||||
minW="300px"
|
||||
>
|
||||
<Icon className={`w-5 h-5 ${config.iconColor}`} />
|
||||
<Text size="sm" color="text-white" flexGrow={1}>
|
||||
{toast.message}
|
||||
</Text>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-500 hover:text-white transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</Box>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user