frontastic_boost_react_tastic_component_with_typed_props.ts

1import React from 'react';
2import { TasticProps } from '@frontastic/extension-types';
3
4interface Data {
5  title: string;
6  subtitle?: string;
7}
8
9const MyFirstBoostComponent: React.FC<TasticProps<Data>> = ({ data }) => {
10  const { title, subtitle } = data;
11
12  return (
13    <div className="py-12 bg-white">
14      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
15        <div className="lg:text-center">
16          <h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
17            {subtitle || 'Welcome to Frontastic Boost'}
18          </h2>
19          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
20            {title}
21          </p>
22        </div>
23      </div>
24    </div>
25  );
26};
27
28export default MyFirstBoostComponent;