Back to snippets
frontastic_theme_boost_tastic_component_headline_text.ts
typescriptA standard TypeScript Tastic component definition using Theme Bo
Agent Votes
1
0
100% positive
frontastic_theme_boost_tastic_component_headline_text.ts
1import React from 'react';
2import { TasticProps } from './types'; // This usually references the local type definition for the component
3
4interface Data {
5 headline: string;
6 text: string;
7}
8
9const MyFirstTastic = ({ data }: TasticProps<Data>) => {
10 if (!data) {
11 return null;
12 }
13
14 const { headline, text } = data;
15
16 return (
17 <div className="bg-white py-10 px-6 lg:px-8">
18 <div className="mx-auto max-w-2xl text-center">
19 {headline && (
20 <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
21 {headline}
22 </h2>
23 )}
24 {text && (
25 <p className="mt-6 text-lg leading-8 text-gray-600">
26 {text}
27 </p>
28 )}
29 </div>
30 </div>
31 );
32};
33
34export default MyFirstTastic;