```astro --- import ThemeToggle from './ThemeToggle.astro'; const pathname = Astro.url.pathname; const navLinks = [ { href: '/explore/', label: 'Explore' }, { href: '/guide/', label: 'Guides' }, { href: '/article/', label: 'Articles' }, ]; function isActive(href) { return pathname.startsWith(href); } --- ```

```html ```

Notice what happened at build time: - **`navLinks.map(...)`** expanded to three `` tags - **`isActive(link.href)`** evaluated to `true` for Guides (we're on a guide page), adding the `active` class - **``** was replaced by its full HTML output (button + SVGs) - **`class:list`** resolved the conditional class to a plain `class` string - **Scoped `data-astro-cid-*`** attributes were added for CSS isolation The component imported another component (`ThemeToggle`), computed which nav link is active, and mapped an array to HTML — all at build time. ## Slots — The "Body" of a Component Sometimes you want a component to wrap other content, not just receive props. That's what `` does: ```astro --- // src/components/Card.astro interface Props { title: string; } const { title } = Astro.props; ---

{title}

``` Usage: ```astro

This paragraph becomes the slot content.

So does this one.

``` :::analogy `` is like `*args` or a callback in Python: ```python def card(title: str, body: str) -> str: return f'

{title}

{body}' ``` Except instead of passing HTML as a string argument, you put it between the opening and closing tags. ::: ## krowdev's Component Map Here's how the actual components in krowdev relate: ```mermaid graph TD accTitle: How krowdev's components relate accDescr: Base.astro composes a content slot, Header (logo, nav, and the client-side ThemeToggle), and Footer. KBEntry extends Base and adds SeriesSidebar, an article slot, and TableOfContents. base["Base.astro (layout)"] base --> bslot["<slot /> — page content"] base --> header["Header.astro"] header --> nav["logo + nav links"] header --> theme["ThemeToggle.astro — only client-side JS"] base --> footer["Footer.astro"] kb["KBEntry.astro (extends Base)"] kb --> sidebar["SeriesSidebar.astro — reads series entries"] kb --> kbslot["<slot /> — article content"] kb --> toc["TableOfContents.astro — reads headings"] ``` ```ascii Base.astro (layout) ├── ← page content goes here ├── Header.astro │ ├── logo + nav links │ └── ThemeToggle.astro ← the only client-side JS └── Footer.astro KBEntry.astro (layout, extends Base) ├── SeriesSidebar.astro ← reads series entries, builds nav ├── ← article content └── TableOfContents.astro ← reads headings array ``` Every component does one thing. Data flows down through props. No hidden dependencies. **Challenge: Build a component** Create a `Callout.astro` component that renders a styled box with a label and slot content. It should accept: - `type` prop: `"info"`, `"warning"`, or `"tip"` - Slot content for the body Expected usage: ```astro

This is a helpful tip!

``` Try writing it in `src/components/Callout.astro` — define the interface, destructure props, use ``, add scoped styles. **One possible solution** ```astro --- interface Props { type: 'info' | 'warning' | 'tip'; } const { type } = Astro.props; const labels = { info: 'Info', warning: 'Warning', tip: 'Tip' }; ---

{labels[type]} ``` --- Previous: [.astro Files](/guide/astro-files/) | Next: [Layouts](/guide/astro-layouts/) ## Sources - Astro Docs, [Components](https://docs.astro.build/en/basics/astro-components/) - Astro Docs, [Component props](https://docs.astro.build/en/basics/astro-components/#component-props) - Astro Docs, [Slots](https://docs.astro.build/en/basics/astro-components/#slots)