elevate-rehab-v3

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

testimonial.tsx (2942B)

      1 import React from "react";
      2 import { Container } from "../util/container";
      3 import { Section } from "../util/section";
      4 import type { TinaTemplate } from "tinacms";
      5 import { PageBlocksTestimonial } from "../../tina/__generated__/types";
      6 import { tinaField } from "tinacms/dist/react";
      7 
      8 export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
      9   return (
     10     <Section color={data.color}>
     11       <Container size="large">
     12         <blockquote>
     13           <div
     14             className={`relative z-10 max-w-3xl mx-auto text-4xl lg:text-5xl font-bold tracking-normal text-center title-font ${
     15               data.color === "primary"
     16                 ? `text-white`
     17                 : `text-gray-700 dark:text-gray-50`
     18             }`}
     19           >
     20             <span
     21               className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-2	-left-4 leading-4 -z-1`}
     22             >
     23               &ldquo;
     24             </span>
     25             <p
     26               data-tina-field={tinaField(data, `quote`)}
     27               className="relative opacity-95"
     28             >
     29               {data.quote}
     30             </p>
     31             <span
     32               className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-3	-right-4 leading-4 -z-1`}
     33             >
     34               &rdquo;
     35             </span>
     36           </div>
     37           <div className={`my-8 flex-grow-0`}>
     38             <span
     39               className={`block mx-auto h-0.5 w-1/6 ${
     40                 data.color === "primary"
     41                   ? `bg-blue-600`
     42                   : `bg-gray-200 dark:bg-gray-700`
     43               }`}
     44             ></span>
     45           </div>
     46           <footer className="text-center">
     47             <p
     48               data-tina-field={tinaField(data, `author`)}
     49               className={`tracking-wide title-font font-bold text-lg ${
     50                 data.color === "primary"
     51                   ? `text-blue-200`
     52                   : `text-blue-500 dark:text-blue-300`
     53               }`}
     54             >
     55               {data.author}
     56             </p>
     57           </footer>
     58         </blockquote>
     59       </Container>
     60     </Section>
     61   );
     62 };
     63 
     64 export const testimonialBlockSchema: TinaTemplate = {
     65   name: "testimonial",
     66   label: "Testimonial",
     67   ui: {
     68     previewSrc: "/blocks/testimonial.png",
     69     defaultItem: {
     70       quote:
     71         "There are only two hard things in Computer Science: cache invalidation and naming things.",
     72       author: "Phil Karlton",
     73       color: "primary",
     74     },
     75   },
     76   fields: [
     77     {
     78       type: "string",
     79       ui: {
     80         component: "textarea",
     81       },
     82       label: "Quote",
     83       name: "quote",
     84     },
     85     {
     86       type: "string",
     87       label: "Author",
     88       name: "author",
     89     },
     90     {
     91       type: "string",
     92       label: "Color",
     93       name: "color",
     94       options: [
     95         { label: "Default", value: "default" },
     96         { label: "Tint", value: "tint" },
     97         { label: "Primary", value: "primary" },
     98       ],
     99     },
    100   ],
    101 };