103 lines
3.7 KiB
TypeScript
103 lines
3.7 KiB
TypeScript
import React from "react";
|
|
import { Container } from "../util/container";
|
|
import { Section } from "../util/section";
|
|
import type { Template } from "tinacms";
|
|
import { PageBlocksTestimonial } from "../../tina/__generated__/types";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
import { PageBlockFunction } from "../blocks-renderer";
|
|
|
|
export const Testimonial: PageBlockFunction<PageBlocksTestimonial> = ({ data }) => {
|
|
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"
|
|
}` }
|
|
/>
|
|
</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" }
|
|
]
|
|
}
|
|
]
|
|
};
|