format

ethanniser · Oct 18, 2024 · 2d50d51 · 2d50d51
1 parent 9801892
commit 2d50d51
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 37 deletions.
diff --git a/src/app/data.ts b/src/app/data.ts
@@ -120,4 +120,4 @@ type Product = {
   description: string;
   img: string;
   highlights: string[];
-}
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -37,7 +37,7 @@ export default function RootLayout({
         className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col antialiased`}
       >
         <div className="flex flex-grow flex-col">
-          <header className="font-futura flex items-center justify-between border-b-2 border-yellow-300 p-4">
+          <header className="flex items-center justify-between border-b-2 border-yellow-300 p-4 font-futura">
             <div className="flex items-center space-x-4">
               <Button variant="ghost" size="icon">
                 <Menu className="h-6 w-6" />
@@ -52,12 +52,18 @@ export default function RootLayout({
                 <Input placeholder="Search" className="w-[300px]" />
                 <Search className="absolute right-2 top-2.5 h-4 w-4 text-muted-foreground" />
               </div>
-              <Button variant="ghost" className="text-lg text-green-800">
+              <Link
+                href="/order"
+                className="text-lg text-green-800 hover:underline"
+              >
                 ORDER
-              </Button>
-              <Button variant="ghost" className="text-lg text-green-800">
+              </Link>
+              <Link
+                href="/order-history"
+                className="text-lg text-green-800 hover:underline"
+              >
                 ORDER HISTORY
-              </Button>
+              </Link>
             </div>
           </header>
           <div className="flex flex-grow font-helvetica-roman">

diff --git a/src/app/products/[category]/[subcategory]/[product]/opengraph-image.tsx b/src/app/products/[category]/[subcategory]/[product]/opengraph-image.tsx
@@ -16,59 +16,85 @@ export const contentType = "image/png";
 export default async function Image() {
   return new ImageResponse(
     (
-        <div
+      <div
         style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          backgroundColor: '#fff',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          backgroundColor: "#fff",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
         }}
       >
         <div
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginBottom: '20px',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginBottom: "20px",
           }}
         >
           <div
             style={{
-              width: '200px',
-              height: '200px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
+              width: "200px",
+              height: "200px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
             }}
           >
             <img
               style={{
-                width: '260px',
-                height: '160px',
+                width: "260px",
+                height: "160px",
               }}
-
               src="https://www.mcmaster.com/mvd/contents/gfx/imagecache/900/90044a123-@halfx_637644589791018819.png?ver=imagenotfound"
             />
           </div>
         </div>
-        <h1 style={{ fontSize: '64px', fontWeight: 'bold', color: '#333', marginBottom: '20px' }}>
+        <h1
+          style={{
+            fontSize: "64px",
+            fontWeight: "bold",
+            color: "#333",
+            marginBottom: "20px",
+          }}
+        >
           Alloy Steel Socket Head Screws
         </h1>
-        <div style={{ display: 'flex', justifyContent: 'space-around', width: '100%' }}>
-          <div style={{ textAlign: 'center', display: 'flex' }}>
-            <p style={{ fontSize: '36px', fontWeight: 'bold', color: '#0066cc' }}>170,000 psi</p>
-            <p style={{ fontSize: '24px', color: '#666' }}>Tensile Strength</p>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-around",
+            width: "100%",
+          }}
+        >
+          <div style={{ textAlign: "center", display: "flex" }}>
+            <p
+              style={{ fontSize: "36px", fontWeight: "bold", color: "#0066cc" }}
+            >
+              170,000 psi
+            </p>
+            <p style={{ fontSize: "24px", color: "#666" }}>Tensile Strength</p>
           </div>
-          <div style={{ textAlign: 'center', display: 'flex' }}>
-            <p style={{ fontSize: '36px', fontWeight: 'bold', color: '#009933' }}>ASTM A574</p>
-            <p style={{ fontSize: '24px', color: '#666' }}>Compliant</p>
+          <div style={{ textAlign: "center", display: "flex" }}>
+            <p
+              style={{ fontSize: "36px", fontWeight: "bold", color: "#009933" }}
+            >
+              ASTM A574
+            </p>
+            <p style={{ fontSize: "24px", color: "#666" }}>Compliant</p>
           </div>
-          <div style={{ textAlign: 'center', display: 'flex' }}>
-            <p style={{ fontSize: '36px', fontWeight: 'bold', color: '#cc3300' }}>Zinc-plated</p>
-            <p style={{ fontSize: '24px', color: '#666' }}>Corrosion Resistant</p>
+          <div style={{ textAlign: "center", display: "flex" }}>
+            <p
+              style={{ fontSize: "36px", fontWeight: "bold", color: "#cc3300" }}
+            >
+              Zinc-plated
+            </p>
+            <p style={{ fontSize: "24px", color: "#666" }}>
+              Corrosion Resistant
+            </p>
           </div>
         </div>
       </div>