Bio UI Components
Relevant source files
The following files were used as context for generating this wiki page:
Bio UI Components display a user's professional identity on the Thoth public website. These components render information such as the user's name, headline, and detailed biography. They are primarily used on the home page to present a profile to visitors.
Sources: apps/web/spec/web.md:8-10, apps/web/src/app/page.tsx:11-16
Architecture and Data Flow
The Bio UI system follows a modular structure where components are exported through a feature index and consumed by the main application page. The data flows from an API call to the top-level page component, which then passes the Bio data object as a prop to specialized presentation components.
The diagram shows the top-down data flow from the API to the individual UI components via the main page.
Sources: apps/web/src/app/page.tsx:7-16, apps/web/src/features/bio/index.ts:1-3
Component Specifications
| Component | Description | Properties |
|---|---|---|
Hero | Renders the primary identity section including name and headline. | bio: Bio |
About | Renders the detailed narrative or biography section. | bio: Bio |
Sources: apps/web/src/features/bio/components/hero.tsx:3, apps/web/src/features/bio/components/about.tsx:3
Data Structure
UI components rely on a strictly validated Bio schema. This schema ensures that all required text fields are present and non-blank before rendering, preventing build failures or UI inconsistencies.
| Field | Type | Validation | Description |
|---|---|---|---|
name | string | Trimmed, Min 1 char | The full name of the user. |
headline | string | Trimmed, Min 1 char | A short professional summary. |
about | string | Trimmed, Min 1 char | A long-form biographical description. |
Sources: apps/web/src/features/bio/bio.schema.ts:3-9
Component Implementation
Hero Component
The Hero component serves as the header for the bio section. It uses a header tag and applies responsive typography for the name and muted foreground colors for the headline.
export function Hero({ bio }: { bio: Bio }) {
return (
<header className="flex flex-col gap-2">
<h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
{bio.name}
</h1>
<p className="text-lg text-muted-foreground">{bio.headline}</p>
</header>
);
}
Sources: apps/web/src/features/bio/components/hero.tsx:3-12
About Component
The About component displays the detailed biography within a section element. It utilizes the aria-label="About" attribute for accessibility and applies leading-relaxed line height for readability.
export function About({ bio }: { bio: Bio }) {
return (
<section aria-label="About">
<p className="max-w-prose leading-relaxed">{bio.about}</p>
</section>
);
}
Sources: apps/web/src/features/bio/components/about.tsx:3-9
Page Integration
The components are integrated into the main application layout (apps/web/src/app/page.tsx). The page fetchs bio data during the build process or via revalidation every 300 seconds.
The sequence shows how the server component orchestrates data fetching before passing it to child components.
Sources: apps/web/src/app/page.tsx:1-18, apps/web/spec/web.md:21-21
Conclusion
Bio UI Components provide a clean and accessible interface for presenting user profiles. By enforcing a strict schema and utilizing modular React components, the system ensures that user information is displayed consistently and reliably across the platform.