♻️ [Demo] Add some demo UI

beefchimi · Dec 3, 2024 · b1ea453 · b1ea453
1 parent e491756
commit b1ea453
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/src/App.module.css b/src/App.module.css
@@ -3,3 +3,23 @@
   grid-template-rows: auto 1fr auto;
   min-height: 100%;
 }
+
+.Layout {
+  display: grid;
+  gap: 20px;
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+.Card {
+  margin: 0 auto;
+  padding: 10px;
+  border-radius: var(--radius);
+  color: var(--color-text);
+  background-color: var(--shade-light-20);
+}
+
+.invert {
+  color: var(--color-bg);
+  background-color: var(--color-text);
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,18 +1,43 @@
+import {clx} from 'beeftools';
+
 import {BreakpointProvider} from '@src/providers/BreakpointProvider.tsx';
 import {ThemeProvider} from '@src/providers/ThemeProvider.tsx';
 
 import {Footer} from '@src/components/sections/Footer/Footer.tsx';
 import {Header} from '@src/components/sections/Header/Header.tsx';
 import {Main} from '@src/components/sections/Main/Main.tsx';
 
+import {AccordionTest} from '@src/components/ui/Accordion/Accordion.test.tsx';
+import {ButtonTest} from '@src/components/ui/Button/Button.test.tsx';
+
 import styles from './App.module.css';
 
 function AppContent() {
   // Separated from `<App />` to allow use of hooks available via "app providers".
   return (
     <div className={styles.App}>
       <Header />
-      <Main />
+
+      <Main>
+        <div className={styles.Layout}>
+          <div
+            className={clx(styles.Card, {
+              [styles.invert]: false,
+            })}
+          >
+            <AccordionTest />
+          </div>
+
+          <div
+            className={clx(styles.Card, {
+              [styles.invert]: false,
+            })}
+          >
+            <ButtonTest />
+          </div>
+        </div>
+      </Main>
+
       <Footer />
     </div>
   );