website refactor

apps/website/ui/NotificationContent.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { Box } from './primitives/Box';
+import { Text } from './Text';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
+
+export interface NotificationStatProps {
+  label: string;
+  value: string | number;
+  intent?: 'primary' | 'success' | 'critical' | 'low';
+}
+
+export const NotificationStat = ({ label, value, intent = 'low' }: NotificationStatProps) => (
+  <Box bg="var(--ui-color-bg-base)" padding={4} style={{ border: '1px solid var(--ui-color-border-default)', borderRadius: 'var(--ui-radius-sm)' }}>
+    <Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>{label}</Text>
+    <Text size="2xl" weight="bold" variant={intent} block>{value}</Text>
+  </Box>
+);
+
+export interface NotificationDeadlineProps {
+  label: string;
+  deadline: string;
+  icon: LucideIcon;
+}
+
+export const NotificationDeadline = ({ label, deadline, icon }: NotificationDeadlineProps) => (
+  <Box marginTop={6} display="flex" alignItems="center" gap={3} paddingX={4} paddingY={3} bg="rgba(255, 190, 77, 0.05)" style={{ border: '1px solid rgba(255, 190, 77, 0.2)', borderRadius: 'var(--ui-radius-sm)' }}>
+    <Icon icon={icon} size={5} intent="warning" />
+    <Box>
+      <Text size="sm" weight="bold" variant="warning" block uppercase>{label}</Text>
+      <Text size="xs" variant="low" block marginTop={0.5}>{deadline}</Text>
+    </Box>
+  </Box>
+);