website refactor

apps/website/components/shared/ux/InlineNotice.tsx

@@ -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>
+  );
+}