website refactor

apps/website/ui/RenewalItem.tsx

@@ -0,0 +1,57 @@
+
+
+import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Button } from './Button';
+import { Icon } from './Icon';
+import { Stack } from './Stack';
+import { Text } from './Text';
+
+interface RenewalItemProps {
+  name: string;
+  renewDateLabel: string;
+  priceLabel: string;
+  icon: LucideIcon;
+  onRenew?: () => void;
+}
+
+export function RenewalItem({
+  name,
+  renewDateLabel,
+  priceLabel,
+  icon,
+  onRenew,
+}: RenewalItemProps) {
+  return (
+    <Stack 
+      direction="row" 
+      align="center" 
+      justify="between" 
+      p={3} 
+      rounded="lg" 
+      bg="bg-warning-amber/10" 
+      border 
+      borderColor="border-warning-amber/30"
+    >
+      <Stack direction="row" align="center" gap={3}>
+        <Icon icon={icon} size={4} color="rgb(245, 158, 11)" />
+        <Box>
+          <Text size="sm" color="text-white" block>{name}</Text>
+          <Text size="xs" color="text-gray-400">Renews {renewDateLabel}</Text>
+        </Box>
+      </Stack>
+      <Box textAlign="right">
+        <Text size="sm" weight="semibold" color="text-white" block>{priceLabel}</Text>
+        <Button 
+          variant="secondary" 
+          size="sm" 
+          mt={1} 
+          onClick={onRenew}
+          style={{ minHeight: 0, padding: '0.25rem 0.5rem', fontSize: '0.75rem' }}
+        >
+          Renew
+        </Button>
+      </Box>
+    </Stack>
+  );
+}