58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
import React from "react";
|
|
import { Container } from "../util/container";
|
|
import { Section } from "../util/section";
|
|
import type { Template } from "tinacms";
|
|
import { PageBlocksTitle } from "../../tina/__generated__/types";
|
|
import { tinaField } from "tinacms/dist/react";
|
|
import { PageBlockFunction } from "../blocks-renderer";
|
|
|
|
enum titleSize {
|
|
h1 = "h1",
|
|
h2 = "h2",
|
|
h3 = "h3",
|
|
h4 = "h4"
|
|
}
|
|
|
|
export const Title: PageBlockFunction<PageBlocksTitle> = ({ data }) => {
|
|
return (
|
|
<Section>
|
|
<Container
|
|
className={ `prose default-text-color mt-2 title-block${ data?.size ? ` title-size-${ data.size }` : "" }` }
|
|
|
|
size="custom"
|
|
width="large"
|
|
>
|
|
<div className={ "title-block" }
|
|
data-tina-field={ tinaField(data, "title") }>
|
|
{ data.title }
|
|
</div>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export const titleBlockSchema: Template = {
|
|
name: "title",
|
|
label: "Titre",
|
|
ui: {
|
|
previewSrc: "/blocks/content.png",
|
|
defaultItem: {
|
|
size: Object.values(titleSize)[0],
|
|
title: "Lorem ipsum"
|
|
}
|
|
},
|
|
fields: [
|
|
{
|
|
type: "string",
|
|
label: "Taille",
|
|
name: "size",
|
|
options: Object.values(titleSize)
|
|
},
|
|
{
|
|
type: "string",
|
|
label: "Texte",
|
|
name: "title"
|
|
}
|
|
]
|
|
};
|