From 6eefe763e381fd5212d8d956ec0e7fc3c909a434 Mon Sep 17 00:00:00 2001
From: "Jaron (aider)" <jaron@fishhat.dev>
Date: Sun, 23 Feb 2025 00:42:07 -0600
Subject: [PATCH] refactor: Update Section and PackageManager components for
 improved type safety and consistency

This commit includes the following changes:
- Refactored PackageManager to use a more type-safe approach
- Updated Section component to use semantic `<section>` tag
- Adjusted background prop types and default values
- Simplified type definitions
- Improved code readability and maintainability
---
 website/src/components/PackageManager.tsx | 72 ++++++++++++-----------
 website/src/components/Section.module.css | 10 +++-
 website/src/components/Section.tsx        |  8 +--
 3 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/website/src/components/PackageManager.tsx b/website/src/components/PackageManager.tsx
index a5b1932..42434f5 100644
--- a/website/src/components/PackageManager.tsx
+++ b/website/src/components/PackageManager.tsx
@@ -3,40 +3,46 @@
 import { useState } from 'react';
 import styles from './PackageManager.module.css';
 
-const PACKAGE_MANAGERS = {
-  npm: 'npm install unicord',
-  yarn: 'yarn add unicord',
-  pnpm: 'pnpm add unicord',
-  bun: 'bun add unicord'
-} as const;
+const PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm', 'bun'] as const;
+type PackageManager = typeof PACKAGE_MANAGERS[number];
 
 export function PackageManager() {
-  const [activeTab, setActiveTab] = useState<keyof typeof PACKAGE_MANAGERS>('npm');
+    const [activeTab, setActiveTab] = useState<PackageManager>('npm');
 
-  return (
-    <div className={styles.container}>
-      <div className={styles.tabs}>
-        {Object.keys(PACKAGE_MANAGERS).map(pm => (
-          <button 
-            key={pm}
-            className={`${styles.tab} ${activeTab === pm ? styles.active : ''}`}
-            onClick={() => setActiveTab(pm as keyof typeof PACKAGE_MANAGERS)}
-          >
-            {pm}
-          </button>
-        ))}
-      </div>
-      <div className={styles.commandWrapper}>
-        <code className={styles.command}>
-          {PACKAGE_MANAGERS[activeTab]}
-        </code>
-        <button 
-          className={styles.copyButton}
-          onClick={() => navigator.clipboard.writeText(PACKAGE_MANAGERS[activeTab])}
-        >
-          Copy
-        </button>
-      </div>
-    </div>
-  );
+    const getInstallCommand = (pm: PackageManager) => {
+        const commands = {
+            npm: 'npm install unicord',
+            yarn: 'yarn add unicord',
+            pnpm: 'pnpm add unicord',
+            bun: 'bun add unicord'
+        };
+        return commands[pm];
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.tabs}>
+                {PACKAGE_MANAGERS.map(pm => (
+                    <button 
+                        key={pm}
+                        className={`${styles.tab} ${activeTab === pm ? styles.active : ''}`}
+                        onClick={() => setActiveTab(pm)}
+                    >
+                        {pm}
+                    </button>
+                ))}
+            </div>
+            <div className={styles.commandWrapper}>
+                <code className={styles.command}>
+                    {getInstallCommand(activeTab)}
+                </code>
+                <button 
+                    className={styles.copyButton}
+                    onClick={() => navigator.clipboard.writeText(getInstallCommand(activeTab))}
+                >
+                    Copy
+                </button>
+            </div>
+        </div>
+    );
 }
diff --git a/website/src/components/Section.module.css b/website/src/components/Section.module.css
index f204694..ad86f53 100644
--- a/website/src/components/Section.module.css
+++ b/website/src/components/Section.module.css
@@ -1,19 +1,23 @@
 .section {
-  padding: var(--section-padding-desktop);
+  padding: 6rem 12em;
   min-height: 50vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
-  border-top: 1px solid var(--gray-alpha-200);
 }
 
 .dark {
   background: var(--gray-alpha-100);
+  border-top: 1px solid var(--gray-alpha-200);
+}
+
+.light {
+  border-top: 1px solid var(--gray-alpha-200);
 }
 
 @media (max-width: 1200px) {
   .section {
-    padding: var(--section-padding-mobile);
+    padding: 4rem 2rem;
   }
 }
diff --git a/website/src/components/Section.tsx b/website/src/components/Section.tsx
index 9e2d02f..782b118 100644
--- a/website/src/components/Section.tsx
+++ b/website/src/components/Section.tsx
@@ -2,14 +2,14 @@ import styles from './Section.module.css';
 
 type SectionProps = {
   children: React.ReactNode;
-  background?: 'default' | 'dark';
+  background?: 'light' | 'dark';
   className?: string;
 };
 
-export function Section({ children, background = 'default', className = '' }: SectionProps) {
+export function Section({ children, background = 'light', className = '' }: SectionProps) {
   return (
-    <div className={`${styles.section} ${styles[background]} ${className}`}>
+    <section className={`${styles.section} ${styles[background]} ${className}`}>
       {children}
-    </div>
+    </section>
   );
 }