102 lines
2.9 KiB
TypeScript
102 lines
2.9 KiB
TypeScript
import React from "react";
|
|
import { Container } from "../util/container";
|
|
import { Section } from "../util/section";
|
|
import type {Template, 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`}
|
|
>
|
|
“
|
|
</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`}
|
|
>
|
|
”
|
|
</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: Template = {
|
|
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" },
|
|
],
|
|
},
|
|
],
|
|
};
|