Back to snippets

frontastic_theme_boost_tastic_component_headline_text.ts

typescript

A standard TypeScript Tastic component definition using Theme Bo

15d ago34 linesdocs.commercetools.com
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;