Initial commit

components/blocks/testimonial.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import type { TinaTemplate } from "tinacms";
+import { PageBlocksTestimonial } from "../../tina/__generated__/types";
+import { tinaField } from "tinacms/dist/react";
+
+export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
+  return (
+    <Section color={data.color}>
+      <Container size="large">
+        <blockquote>
+          <div
+            className={`relative z-10 max-w-3xl mx-auto text-4xl lg:text-5xl font-bold tracking-normal text-center title-font ${
+              data.color === "primary"
+                ? `text-white`
+                : `text-gray-700 dark:text-gray-50`
+            }`}
+          >
+            <span
+              className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-2	-left-4 leading-4 -z-1`}
+            >
+              &ldquo;
+            </span>
+            <p
+              data-tina-field={tinaField(data, `quote`)}
+              className="relative opacity-95"
+            >
+              {data.quote}
+            </p>
+            <span
+              className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-3	-right-4 leading-4 -z-1`}
+            >
+              &rdquo;
+            </span>
+          </div>
+          <div className={`my-8 flex-grow-0`}>
+            <span
+              className={`block mx-auto h-0.5 w-1/6 ${
+                data.color === "primary"
+                  ? `bg-blue-600`
+                  : `bg-gray-200 dark:bg-gray-700`
+              }`}
+            ></span>
+          </div>
+          <footer className="text-center">
+            <p
+              data-tina-field={tinaField(data, `author`)}
+              className={`tracking-wide title-font font-bold text-lg ${
+                data.color === "primary"
+                  ? `text-blue-200`
+                  : `text-blue-500 dark:text-blue-300`
+              }`}
+            >
+              {data.author}
+            </p>
+          </footer>
+        </blockquote>
+      </Container>
+    </Section>
+  );
+};
+
+export const testimonialBlockSchema: TinaTemplate = {
+  name: "testimonial",
+  label: "Testimonial",
+  ui: {
+    previewSrc: "/blocks/testimonial.png",
+    defaultItem: {
+      quote:
+        "There are only two hard things in Computer Science: cache invalidation and naming things.",
+      author: "Phil Karlton",
+      color: "primary",
+    },
+  },
+  fields: [
+    {
+      type: "string",
+      ui: {
+        component: "textarea",
+      },
+      label: "Quote",
+      name: "quote",
+    },
+    {
+      type: "string",
+      label: "Author",
+      name: "author",
+    },
+    {
+      type: "string",
+      label: "Color",
+      name: "color",
+      options: [
+        { label: "Default", value: "default" },
+        { label: "Tint", value: "tint" },
+        { label: "Primary", value: "primary" },
+      ],
+    },
+  ],
+};