work on new best parmi component

bradystroud · Oct 1, 2024 · a9af5a3 · a9af5a3
1 parent ddfd698
commit a9af5a3
Show file tree

Hide file tree

Showing 10 changed files with 776 additions and 512 deletions.
diff --git a/components/blocks-renderer.tsx b/components/blocks-renderer.tsx
@@ -3,6 +3,7 @@ import type { Page } from "../tina/__generated__/types";
 import { Content } from "./blocks/content";
 import { Features } from "./blocks/features";
 import { Hero } from "./blocks/hero";
+import { BestParmi } from "./blocks/best-parmi";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
   return (
@@ -37,6 +38,15 @@ export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
                     <Features data={block} parentField={`blocks.${i}`} />
                   </div>
                 );
+              case "PageBlocksBestParmi":
+                return (
+                  <div
+                    data-tinafield={`blocks.${i}`}
+                    key={i + block.__typename}
+                  >
+                    <BestParmi data={block} parentField={`blocks.${i}`} />
+                  </div>
+                );
               default:
                 return null;
             }

diff --git a/components/blocks/best-parmi.tsx b/components/blocks/best-parmi.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import { Template } from "tinacms";
+
+export const BestParmi = ({ data, parentField }) => {
+  return (
+    <Section>
+      <Container
+        size="large"
+        className="grid grid-cols-1 lg:grid-cols-5 gap-14 items-center justify-center"
+      >
+        <h2 className="text-3xl font-semibold">Best Parmi</h2>
+        <p>
+          {data?.restaurant?.name} - {data.score}
+        </p>
+      </Container>
+    </Section>
+  );
+};
+
+export const bestParmiBlockSchema: Template = {
+  name: "bestParmi",
+  label: "Best Parmi",
+  ui: {
+    previewSrc: "/blocks/content.png",
+  },
+  fields: [
+    {
+      type: "boolean",
+      label: "Data Driven?",
+      name: "isDataDriven",
+    },
+    {
+      type: "reference",
+      label: "Restaurant",
+      name: "restaurant",
+      collections: ["restaurant"],
+    },
+    {
+      type: "number",
+      label: "Score",
+      name: "score",
+    },
+  ],
+};
diff --git a/content/pages/home.md b/content/pages/home.md
@@ -1,8 +1,8 @@
 ---
+cannonicalUrl: 'https://parmipicks.com'
 title: Parmi Picks Home
-cannonicalUrl: https://parmipicks.com
 blocks:
-  - tagline: ""
+  - tagline: ''
     headline: Parmi Picks
     text: >
       Welcome to ParmiPicks! This is my personal list of every parmi I've tried
@@ -25,3 +25,4 @@ blocks:
     color: default
     _template: hero
 ---
+
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/package.json b/package.json
@@ -11,34 +11,34 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.0.1",
-    "@tinacms/cli": "^1.6.1",
+    "@tinacms/cli": "^1.6.8",
     "@types/js-cookie": "^3.0.3",
-    "@types/node": "^22.5.1",
-    "@types/react": "^18.3.4",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.5",
     "@types/styled-components": "^5.1.15",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.5.0",
+    "@typescript-eslint/parser": "^8.5.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "next-sitemap": "^4.2.3",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.47",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.0"
   },
   "dependencies": {
     "@giscus/react": "^3.0.0",
-    "@headlessui/react": "2.1.3",
+    "@headlessui/react": "2.1.8",
     "@tailwindcss/typography": "^0.5.15",
-    "next": "^14.2.7",
+    "next": "^14.2.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "sharp": "^0.33.5",
-    "tailwindcss": "^3.4.10",
-    "tinacms": "^2.2.1",
-    "typescript": "^5.5.4"
+    "tailwindcss": "^3.4.11",
+    "tinacms": "^2.2.8",
+    "typescript": "^5.6.2"
   },
   "resolutions": {
     "final-form": "4.20.1"
   }
-}
+}
diff --git a/pages/[filename].tsx b/pages/[filename].tsx
@@ -28,27 +28,6 @@ export default function HomePage(
         <title>ParmiPicks</title>
       </Head>
       <Blocks {...data.page} />
-      <Section className="m-auto">
-        <Link href={bestParmiReviewUrl} className="hidden sm:block">
-          <div className="badge">
-            <svg width="300" height="50" className="best">
-              {" "}
-              <path
-                id="curve"
-                d="M100,25 A140,85 0 0 1 290,120"
-                fill="transparent"
-              />
-              <text fill="white" style={{ fontSize: "20px" }}>
-                <textPath href="#curve">BEST PARMI</textPath>
-              </text>
-            </svg>
-            <div className="flex flex-col items-center pt-4">
-              <div className="score">{bestParmi.score}</div>
-              <div className="text-xl">{bestParmi.restaurant.name}</div>
-            </div>
-          </div>
-        </Link>
-      </Section>
     </Layout>
   );
 }

diff --git a/styles.css b/styles.css
@@ -1,46 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-.badge {
-  position: relative;
-  width: 500px; /* Adjust size as needed */
-  height: 500px; /* Adjust size as needed */
-  border-radius: 50%;
-  background-color: #262e4c;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  font-size: 16px;
-  padding: 1rem;
-  margin-bottom: 3rem;
-}
-
-/* Yellow middle ring */
-.badge::after {
-  content: "";
-  position: absolute;
-  top: -5px;
-  left: -5px;
-  right: -5px;
-  bottom: -5px;
-  border-radius: 50%;
-  border: 40px solid #ffce00;
-}
-
-/* Score text */
-.score {
-  font-weight: bold;
-  font-size: 8rem; /* Adjust size as needed */
-  z-index: 1;
-  color: #ffce00;
-}
-
-.best {
-  font-size: 6rem; /* Adjust size as needed */
-  z-index: 1;
-  color: #ffce00;
-  margin-top: -100px;
-}
diff --git a/tina/config.tsx b/tina/config.tsx
@@ -3,6 +3,10 @@ import { defineConfig } from "tinacms";
 import { contentBlockSchema } from "../components/blocks/content";
 import { featureBlockSchema } from "../components/blocks/features";
 import { heroBlockSchema } from "../components/blocks/hero";
+import {
+  BestParmi,
+  bestParmiBlockSchema,
+} from "../components/blocks/best-parmi";
 
 const config = defineConfig({
   clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
@@ -277,6 +281,7 @@ const config = defineConfig({
               // @ts-ignore
               featureBlockSchema,
               contentBlockSchema,
+              bestParmiBlockSchema,
             ],
           },
         ],

diff --git a/tina/tina-lock.json b/tina/tina-lock.json