before race

2025-12-21 07:51:51 +01:00
parent f2c3b04a88
commit 872e5a1a6a
9 changed files with 340 additions and 55 deletions
--- a/app/components/Drop.tsx
+++ b/app/components/Drop.tsx
@@ -419,8 +419,8 @@ export default function Drop() {
                disabled={processing}
                style={{
                  padding: '12px 24px',
-                  background: 'var(--accent)',
-                  color: '#000',
+                  background: '#0a7931',
+                  color: '#fff',
                  border: 'none',
                  borderRadius: '14px',
                  cursor: processing ? 'not-allowed' : 'pointer',
--- a/app/components/Nav.tsx
+++ b/app/components/Nav.tsx
@@ -54,7 +54,11 @@ export default function Nav() {
  return (
    <>
      <nav>
-        <div className="brand">420Deals.ch</div>
+        <div className="brand">
+          <a href="/" style={{ display: 'inline-block', textDecoration: 'none' }}>
+            <img src="/header.jpg" alt="420Deals.ch" style={{ height: '40px', width: 'auto' }} />
+          </a>
+        </div>
        <div className="links">
          <a href="#drop">Drop</a>
          <a href="#past">Past Drops</a>
@@ -90,8 +94,8 @@ export default function Nav() {
                style={{
                  padding: '8px 16px',
                  fontSize: '14px',
-                  background: 'var(--accent)',
-                  color: '#000',
+                  background: '#0a7931',
+                  color: '#fff',
                  border: 'none',
                  borderRadius: '8px',
                  cursor: 'pointer',
--- a/app/components/PastDrops.tsx
+++ b/app/components/PastDrops.tsx
@@ -15,7 +15,12 @@ interface PastDrop {
  soldOutInHours: number
 }

-export default function PastDrops() {
+interface PastDropsProps {
+  limit?: number
+  showMoreLink?: boolean
+}
+
+export default function PastDrops({ limit, showMoreLink = false }: PastDropsProps = {}) {
  const [drops, setDrops] = useState<PastDrop[]>([])
  const [loading, setLoading] = useState(true)

@@ -55,6 +60,20 @@ export default function PastDrops() {
    }
  }

+  const formatDateAndTime = (dateString: string) => {
+    const date = new Date(dateString)
+    const day = date.getDate()
+    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    const month = monthNames[date.getMonth()]
+    const hours = date.getHours().toString().padStart(2, '0')
+    const minutes = date.getMinutes().toString().padStart(2, '0')
+    return `${day} ${month} · ${hours}:${minutes}`
+  }
+
+  const formatQuantity = (size: number, unit: string) => {
+    return `${size}${unit}`
+  }
+
  if (loading) {
    return (
      <div className="past">
@@ -73,50 +92,72 @@ export default function PastDrops() {
    )
  }

+  const displayedDrops = limit ? drops.slice(0, limit) : drops
+  const hasMore = limit && drops.length > limit
+
  return (
-    <div className="past">
-      {drops.map((drop) => (
-        <div key={drop.id} className="card">
-          {drop.image_url ? (
-            <div style={{ marginBottom: '12px' }}>
-              <Image
-                src={drop.image_url}
-                alt={drop.item}
-                width={300}
-                height={300}
+    <>
+      <div className="past">
+        {displayedDrops.map((drop) => (
+          <div key={drop.id} className="card">
+            {drop.image_url ? (
+              <div style={{ marginBottom: '12px' }}>
+                <Image
+                  src={drop.image_url}
+                  alt={drop.item}
+                  width={300}
+                  height={300}
+                  style={{
+                    width: '100%',
+                    height: '200px',
+                    borderRadius: '12px',
+                    objectFit: 'cover',
+                  }}
+                />
+              </div>
+            ) : (
+              <div
                style={{
                  width: '100%',
-                  maxWidth: '300px',
-                  height: '300px',
+                  height: '200px',
+                  background: 'var(--bg-soft)',
                  borderRadius: '12px',
-                  objectFit: 'cover',
+                  marginBottom: '12px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  color: 'var(--muted)',
                }}
-              />
-            </div>
-          ) : (
-            <div
-              style={{
-                width: '100%',
-                maxWidth: '300px',
-                height: '300px',
-                background: 'var(--bg-soft)',
-                borderRadius: '12px',
-                marginBottom: '12px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'var(--muted)',
-              }}
-            >
-              No Image
-            </div>
-          )}
-          <strong>{drop.item}</strong>
-          <br />
-          <span className="meta">{formatSoldOutTime(drop.soldOutInHours)}</span>
+              >
+                No Image
+              </div>
+            )}
+            <strong>{drop.item}</strong>
+            <br />
+            <span className="meta">{formatSoldOutTime(drop.soldOutInHours)}</span>
+            <br />
+            <span className="meta" style={{ fontSize: '13px', marginTop: '4px', display: 'block' }}>
+              {formatQuantity(drop.size, drop.unit)} · {formatDateAndTime(drop.created_at)}
+            </span>
+          </div>
+        ))}
+      </div>
+      {showMoreLink && hasMore && (
+        <div style={{ textAlign: 'center', marginTop: '30px' }}>
+          <a
+            href="/past-drops"
+            style={{
+              color: 'var(--accent)',
+              textDecoration: 'none',
+              fontSize: '14px',
+              fontWeight: 500,
+            }}
+          >
+            More →
+          </a>
        </div>
-      ))}
-    </div>
+      )}
+    </>
  )
 }

--- a/app/globals.css
+++ b/app/globals.css
@@ -146,8 +146,8 @@ header p {
 .cta {
  margin-top: 30px;
  padding: 16px 28px;
-  background: var(--accent);
-  color: #000;
+  background: #0a7931;
+  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 15px;
@@ -197,8 +197,8 @@ header p {
 .signup button {
  margin-top: 20px;
  padding: 14px 28px;
-  background: var(--accent);
-  color: #000;
+  background: #0a7931;
+  color: #fff;
  border: none;
  border-radius: 14px;
  cursor: pointer;
@@ -206,9 +206,9 @@ header p {

 .past {
  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(400px, 400px));
-  gap: 30px;
-  justify-content: center;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  justify-content: start;
 }

 .past .card {
@@ -216,7 +216,7 @@ header p {
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border);
-  width: 400px;
+  width: 100%;
 }

 .past img {
@@ -237,6 +237,16 @@ footer {
  .drop {
    grid-template-columns: 1fr;
  }
+  
+  .past {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  .past {
+    grid-template-columns: 1fr;
+  }
 }

 /* Admin Panel Styles */
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -56,7 +56,7 @@ export default function Home() {

      <section className="container" id="past">
        <h2>Past Drops</h2>
-        <PastDrops />
+        <PastDrops limit={3} showMoreLink={true} />
      </section>

      <Footer />
--- a/app/past-drops/page.tsx
+++ b/app/past-drops/page.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import Nav from '../components/Nav'
+import PastDrops from '../components/PastDrops'
+import Footer from '../components/Footer'
+
+export default function PastDropsPage() {
+  return (
+    <>
+      <Nav />
+      <section className="container" style={{ paddingTop: '120px' }}>
+        <a
+          href="/"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            color: 'var(--muted)',
+            textDecoration: 'none',
+            fontSize: '14px',
+            marginBottom: '30px',
+            transition: 'color 0.2s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--text)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--muted)'
+          }}
+        >
+          ← Back
+        </a>
+        <h1 style={{ marginBottom: '40px' }}>Past Drops</h1>
+        <PastDrops />
+      </section>
+      <Footer />
+    </>
+  )
+}
+