Components & props

Components are functions that return the ComponentFragment created by html. Props are ordinary objects — there's no compiler transform or special argument position, values are passed exactly as they would be to any other function.

type GreetingProps = { name: string; punctuation?: string };

export const Greeting: PureComponent<GreetingProps> = ({ name, punctuation = '!' }) =>
    html`<h1>Hej, ${name}${punctuation}</h1>`;

Your task

greeting.ts destructures name and punctuation but never uses them, and punctuation has no default. Interpolate both into the <h1>, and give punctuation a default value of "!" so callers can omit it.

Reveal solution

import { html, type PureComponent } from '@grainular/nord';

type GreetingProps = { name: string; punctuation?: string };

export const Greeting: PureComponent<GreetingProps> = ({ name, punctuation = '!' }) => html`
    <h1>Hej, ${name}${punctuation}</h1>
`;

Move on to children to see how a component accepts rendered content, not just plain values.