Initial commit: redefined-designs storefront

2026-08-13 21:07:54 +00:00
commit 9be4986dd3
38 changed files with 2121 additions and 0 deletions
@@ -0,0 +1,68 @@
+import { useEffect, useState, useCallback } from 'react';
+import { Layout, Typography, Switch, Space, Row, Col, Spin, Button, theme } from 'antd';
+import { Link } from 'react-router-dom';
+import { Item, SiteConfig, fetchItems, fetchConfig } from './api';
+import ItemCard from './components/ItemCard';
+import { useThemeMode } from './theme/ThemeContext';
+import { useCustomerAuth } from './customer/CustomerAuthContext';
+
+const { Header, Content, Footer } = Layout;
+const { Title } = Typography;
+
+export default function App() {
+  const [items, setItems] = useState<Item[]>([]);
+  const [config, setConfig] = useState<SiteConfig | null>(null);
+  const { mode, toggle } = useThemeMode();
+  const { customer } = useCustomerAuth();
+  const { token } = theme.useToken();
+
+  const load = useCallback(() => {
+    fetchItems().then(setItems);
+  }, []);
+
+  useEffect(() => {
+    load();
+    fetchConfig().then(setConfig);
+  }, [load]);
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Header
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: token.colorBgContainer,
+          borderBottom: `1px solid ${token.colorBorderSecondary}`
+        }}
+      >
+        <Title level={3} style={{ color: token.colorText, margin: 0 }}>Redefined Designs</Title>
+        <Space>
+          <Switch checked={mode === 'dark'} onChange={toggle} checkedChildren="Dark" unCheckedChildren="Light" />
+          {customer ? (
+            <Link to="/account"><Button>My Account</Button></Link>
+          ) : (
+            <>
+              <Link to="/login"><Button>Log in</Button></Link>
+              <Link to="/register"><Button type="primary">Sign up</Button></Link>
+            </>
+          )}
+        </Space>
+      </Header>
+      <Content style={{ padding: 24 }}>
+        {!config ? <Spin /> : (
+          <Row gutter={[20, 20]}>
+            {items.map(item => (
+              <Col key={item.id} xs={24} sm={12} md={8} lg={6}>
+                <ItemCard item={item} config={config} onPurchased={load} />
+              </Col>
+            ))}
+          </Row>
+        )}
+      </Content>
+      <Footer style={{ textAlign: 'center', background: token.colorBgContainer }}>
+        <Link to="/privacy">Privacy Policy</Link>
+      </Footer>
+    </Layout>
+  );
+}