Building your very own custom components allows you to create reusable building blocks for Redpoint projects with TSX files to write HTML-like syntax. This approach offers immense flexibility, enabling you to construct everything from just minor HTML snippets like buttons to complex, site-side components like headers and sidebars.

To get started, you define your component as a TypeScript function that return user interface elements and save it to a .tsx file. As your projects grows, these components can accept dynamic inputs called props, which you define using TypeScript interfaces to ensure data flows predictabliy. This modular style will ensure your codebase remains clean, maintainable, and easy to scalea syour compose elements into sophisticated web experiences.

Let's build a small card component, create a Card.tsx file in the src/components directory. Then we can either define it as default or as `Card:

export default ({Title, Content}) =>  (
    <div class="Card">
        <h2>{Title}</h2>
        <p>{Content}</p>
    </div>
)

// or export as Card:
export const Card = ({Title, Content}) => (
    <div class="Card">
        <h2>{Title}</h2>
        <p>{Content}</p>
    </div>
)

You can also define the type for each property for type safety: ({Title: string, Content: string}) or also you can define it with an interface too:

interface CardProps {
    Title: string
    Content: string
}

export default ({CardProps}) =>  (
    <div class="Card">
        <h2>{CardProps.Title}</h2>
        <p>{CardProps.Content}</p>
    </div>
)

Using the component on a page is straight-forward with a simple import of the component, on any of your pages, import Card. Use Card if you defined it as default or {Card} if defined as Card:

import Card from "@components/Card.tsx"
// or when you export as "Card" in Card.tsx:
import {Card} from "@components/Card.tsx"

export default () => (
    <Card
        Title="Card Heading"
        Content="Card Content"
    />
)

If you need to setup your component where you can add anything into it such as a slot, you'll use the children property.

export default ({Title, children}) =>  (
    <div class="Card">
        <h2>{Title}</h2>
        {children}
    </div>
)