website refactor

apps/website/ui/InlineNotice.tsx

@@ -0,0 +1,61 @@
+import { Box } from '@/ui/primitives/Box';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
+import React from 'react';
+
+interface InlineNoticeProps {
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  message: string;
+}
+
+export function InlineNotice({
+  variant = 'info',
+  title,
+  message,
+}: InlineNoticeProps) {
+  const variants = {
+    info: {
+      intent: 'primary' as const,
+      icon: Info,
+    },
+    success: {
+      intent: 'success' as const,
+      icon: CheckCircle,
+    },
+    warning: {
+      intent: 'warning' as const,
+      icon: AlertTriangle,
+    },
+    error: {
+      intent: 'critical' as const,
+      icon: AlertCircle,
+    },
+  };
+
+  const config = variants[variant];
+
+  return (
+    <Box
+      padding={4}
+      rounded="lg"
+      bg="var(--ui-color-bg-surface-muted)"
+      style={{ border: '1px solid var(--ui-color-border-default)' }}
+    >
+      <Box display="flex" gap={3} alignItems="start">
+        <Icon icon={config.icon} size={5} intent={config.intent} />
+        <Box>
+          {title && (
+            <Text weight="bold" variant="high" block marginBottom={1}>
+              {title}
+            </Text>
+          )}
+          <Text size="sm" variant="med" block>
+            {message}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}