Model.Unit.tsx

Model.Unit.tsx files are presentational components responsible for rendering a model's summary view, primarily as Cards or List Items. They provide a standard way to display model instances across the application.

File Location and Naming Convention

Unit files are located alongside other model definitions:

Core Interface: ModelProps

The @akanjs/client package provides generic props for uniform Unit component implementation.

Basic Usage pattern

Standard Card Component

The most common export is 'Card'. It should accept 'href' for navigation and 'className' for external styling.

Advanced Patterns

Handling Actions & State

Units can contain interactive elements like toggle buttons or status indicators.

Integration with Load.Units

Load.Units is a powerful utility component from @akanjs/ui that handles data fetching, pagination, and list rendering for models. It is the primary way to display lists of Unit components.

Key Props

Option	Type	Default	Description
init	ClientInit<T, L>	-	The initial data source token.
renderItem	(model, idx) => ReactNode	-	Render function for each item.
renderList	(list) => ReactNode	-	Alternative to renderItem. Gives full control.
renderEmpty	() => ReactNode	-	Component to render when empty.
pagination	boolean	true	Whether to enable pagination.
filter	(item, idx) => boolean	-	Client-side filter function.
sort	(a, b) => number	-	Client-side sort function.
className	string	-	Class for the container.

Real-world Implementation Examples

1. Inside a Zone Component

Zone components often wrap Load.Units to provide a complete 'section' of the UI managed by a store slice.

2. Direct List Rendering (without Load.Units)

For static lists or when data is already available as an array, map over the data and render Unit components directly. This pattern is highly effective for SSR (Server-Side Rendering) where data is pre-fetched and passed as props, avoiding client-side loading states.

Best Practices

🎨Consistent Styling

Use 'clsx' for merging external className props to allow easy overrides.

🔗Proper Navigation

Use <Link> from @akanjs/ui for internal navigation to ensure efficient routing.

⚡Performance First

Use 'Light' types (cnst.LightModel) for performance in lists. Avoid loading full heavy models in Units.

🧩Logic Separation

Keep logic minimal in Unit components. Delegate complex interactions (like buttons) to separate Utility components.

♿Accessibility

Ensure standard HTML semantics (headings, lists) for accessibility.

Integration with Load.Units

Real-world Implementation Examples

Best Practices

Model.Template.tsx

Model.Util.tsx

Model.Unit.tsx

File Location and Naming Convention

Unit files are located alongside other model definitions:

Core Interface: ModelProps

The @akanjs/client package provides generic props for uniform Unit component implementation.

Basic Usage pattern

Standard Card Component

The most common export is 'Card'. It should accept 'href' for navigation and 'className' for external styling.

Advanced Patterns

Handling Actions & State

Units can contain interactive elements like toggle buttons or status indicators.

Integration with Load.Units

Load.Units is a powerful utility component from @akanjs/ui that handles data fetching, pagination, and list rendering for models. It is the primary way to display lists of Unit components.

Key Props

Option	Type	Default	Description
init	ClientInit<T, L>	-	The initial data source token.
renderItem	(model, idx) => ReactNode	-	Render function for each item.
renderList	(list) => ReactNode	-	Alternative to renderItem. Gives full control.
renderEmpty	() => ReactNode	-	Component to render when empty.
pagination	boolean	true	Whether to enable pagination.
filter	(item, idx) => boolean	-	Client-side filter function.
sort	(a, b) => number	-	Client-side sort function.
className	string	-	Class for the container.