645 lines
20 KiB
Markdown
645 lines
20 KiB
Markdown
# Documentation SEO Task
|
|
|
|
**Date:** January 1, 2026
|
|
**Purpose:** Add complete SEO metadata to all documentation pages
|
|
**Priority:** High — required for proper indexing
|
|
|
|
---
|
|
|
|
## Reference: Main Page Pattern
|
|
|
|
Follow the same meta tag structure as the main page (`/`):
|
|
|
|
```html
|
|
<meta name="author" content="Banatie">
|
|
<meta name="keywords" content="...">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://banatie.app/.../">
|
|
<link rel="alternate" hreflang="en" href="https://banatie.app/.../">
|
|
<link rel="alternate" hreflang="x-default" href="https://banatie.app/.../">
|
|
<meta property="og:title" content="...">
|
|
<meta property="og:description" content="...">
|
|
<meta property="og:url" content="https://banatie.app/.../">
|
|
<meta property="og:site_name" content="Banatie">
|
|
<meta property="og:locale" content="en_US">
|
|
<meta property="og:image" content="https://banatie.app/og-image.png">
|
|
<meta property="og:image:width" content="1200">
|
|
<meta property="og:image:height" content="630">
|
|
<meta property="og:image:alt" content="Banatie - AI Image Generation API for Developers">
|
|
<meta property="og:type" content="article">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="...">
|
|
<meta name="twitter:description" content="...">
|
|
```
|
|
|
|
**Key rules:**
|
|
- All canonical URLs end with trailing slash: `/docs/` not `/docs`
|
|
- Use same OG image for all docs pages: `https://banatie.app/og-image.png`
|
|
- og:type should be `article` for docs (not `website`)
|
|
|
|
---
|
|
|
|
## Implementation in Next.js
|
|
|
|
### Option 1: Static Metadata (Recommended for docs)
|
|
|
|
```tsx
|
|
// In each page.tsx
|
|
import { Metadata } from 'next';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Page Title | Banatie Docs',
|
|
description: 'Page description...',
|
|
authors: [{ name: 'Banatie' }],
|
|
keywords: ['keyword1', 'keyword2'],
|
|
robots: 'index, follow',
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/page/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/page/',
|
|
'x-default': 'https://banatie.app/docs/page/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Page Title | Banatie Docs',
|
|
description: 'Page description...',
|
|
url: 'https://banatie.app/docs/page/',
|
|
siteName: 'Banatie',
|
|
locale: 'en_US',
|
|
type: 'article',
|
|
images: [
|
|
{
|
|
url: 'https://banatie.app/og-image.png',
|
|
width: 1200,
|
|
height: 630,
|
|
alt: 'Banatie - AI Image Generation API for Developers',
|
|
},
|
|
],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: 'Page Title | Banatie Docs',
|
|
description: 'Page description...',
|
|
},
|
|
};
|
|
```
|
|
|
|
### Option 2: Shared Metadata in Layout
|
|
|
|
Create base metadata in `/docs/layout.tsx` and extend in pages:
|
|
|
|
```tsx
|
|
// In layout.tsx - shared defaults
|
|
export const metadata: Metadata = {
|
|
authors: [{ name: 'Banatie' }],
|
|
robots: 'index, follow',
|
|
openGraph: {
|
|
siteName: 'Banatie',
|
|
locale: 'en_US',
|
|
type: 'article',
|
|
images: [
|
|
{
|
|
url: 'https://banatie.app/og-image.png',
|
|
width: 1200,
|
|
height: 630,
|
|
alt: 'Banatie - AI Image Generation API for Developers',
|
|
},
|
|
],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
},
|
|
};
|
|
```
|
|
|
|
Then in each page, only specify unique fields (title, description, canonical).
|
|
|
|
---
|
|
|
|
## Metadata for All 10 Pages
|
|
|
|
### 1. `/docs/` — Getting Started
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Getting Started with Banatie API | AI Image Generation',
|
|
description: 'Generate your first AI image in a few simple steps. REST API for production-ready image assets via CDN.',
|
|
keywords: ['banatie api', 'image generation api', 'ai image api tutorial', 'getting started', 'api quickstart'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/',
|
|
'x-default': 'https://banatie.app/docs/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Getting Started with Banatie API | AI Image Generation',
|
|
description: 'Generate your first AI image in a few simple steps. REST API for production-ready image assets via CDN.',
|
|
url: 'https://banatie.app/docs/',
|
|
},
|
|
twitter: {
|
|
title: 'Getting Started with Banatie API | AI Image Generation',
|
|
description: 'Generate your first AI image in a few simple steps. REST API for production-ready image assets via CDN.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 2. `/docs/generation/` — Image Generation
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Image Generation Guide | Banatie API Docs',
|
|
description: 'Generate AI images from text prompts. Aspect ratios, prompt templates, reference images, and generation chaining.',
|
|
keywords: ['image generation', 'text to image api', 'ai image prompt', 'aspect ratio', 'reference images'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/generation/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/generation/',
|
|
'x-default': 'https://banatie.app/docs/generation/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Image Generation Guide | Banatie API Docs',
|
|
description: 'Generate AI images from text prompts. Aspect ratios, prompt templates, reference images, and generation chaining.',
|
|
url: 'https://banatie.app/docs/generation/',
|
|
},
|
|
twitter: {
|
|
title: 'Image Generation Guide | Banatie API Docs',
|
|
description: 'Generate AI images from text prompts. Aspect ratios, prompt templates, reference images, and generation chaining.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 3. `/docs/images/` — Working with Images
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Working with Images | Banatie API Docs',
|
|
description: 'Upload, manage, and organize images. CDN delivery, aliases for easy reference, and image management via API.',
|
|
keywords: ['image upload api', 'cdn image delivery', 'image aliases', 'image management', 'organize images'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/images/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/images/',
|
|
'x-default': 'https://banatie.app/docs/images/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Working with Images | Banatie API Docs',
|
|
description: 'Upload, manage, and organize images. CDN delivery, aliases for easy reference, and image management via API.',
|
|
url: 'https://banatie.app/docs/images/',
|
|
},
|
|
twitter: {
|
|
title: 'Working with Images | Banatie API Docs',
|
|
description: 'Upload, manage, and organize images. CDN delivery, aliases for easy reference, and image management via API.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 4. `/docs/live-urls/` — Live URLs
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Live URLs — Generate Images from URL | Banatie API Docs',
|
|
description: 'Generate images directly from URL parameters. No API calls needed — use the URL in img tags. Automatic caching.',
|
|
keywords: ['live url image generation', 'url to image', 'dynamic image generation', 'image from url', 'cached image api'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/live-urls/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/live-urls/',
|
|
'x-default': 'https://banatie.app/docs/live-urls/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Live URLs — Generate Images from URL | Banatie API Docs',
|
|
description: 'Generate images directly from URL parameters. No API calls needed — use the URL in img tags. Automatic caching.',
|
|
url: 'https://banatie.app/docs/live-urls/',
|
|
},
|
|
twitter: {
|
|
title: 'Live URLs — Generate Images from URL | Banatie API Docs',
|
|
description: 'Generate images directly from URL parameters. No API calls needed — use the URL in img tags. Automatic caching.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 5. `/docs/authentication/` — Authentication
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Authentication | Banatie API Docs',
|
|
description: 'How to authenticate with Banatie API using API keys. Get your key and start generating images.',
|
|
keywords: ['api authentication', 'api key', 'banatie api key', 'x-api-key header'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/authentication/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/authentication/',
|
|
'x-default': 'https://banatie.app/docs/authentication/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Authentication | Banatie API Docs',
|
|
description: 'How to authenticate with Banatie API using API keys. Get your key and start generating images.',
|
|
url: 'https://banatie.app/docs/authentication/',
|
|
},
|
|
twitter: {
|
|
title: 'Authentication | Banatie API Docs',
|
|
description: 'How to authenticate with Banatie API using API keys. Get your key and start generating images.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 6. `/docs/api/` — API Reference Overview
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'API Reference | Banatie Docs',
|
|
description: 'Complete REST API reference for Banatie. All endpoints, parameters, response formats, and error codes.',
|
|
keywords: ['banatie api reference', 'rest api documentation', 'api endpoints', 'image generation api docs'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/api/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/api/',
|
|
'x-default': 'https://banatie.app/docs/api/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'API Reference | Banatie Docs',
|
|
description: 'Complete REST API reference for Banatie. All endpoints, parameters, response formats, and error codes.',
|
|
url: 'https://banatie.app/docs/api/',
|
|
},
|
|
twitter: {
|
|
title: 'API Reference | Banatie Docs',
|
|
description: 'Complete REST API reference for Banatie. All endpoints, parameters, response formats, and error codes.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 7. `/docs/api/generations/` — Generations API
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Generations API | Banatie API Reference',
|
|
description: 'Create, list, update, and delete AI image generations. Full endpoint documentation with examples.',
|
|
keywords: ['generations api', 'create generation', 'image generation endpoint', 'regenerate image api'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/api/generations/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/api/generations/',
|
|
'x-default': 'https://banatie.app/docs/api/generations/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Generations API | Banatie API Reference',
|
|
description: 'Create, list, update, and delete AI image generations. Full endpoint documentation with examples.',
|
|
url: 'https://banatie.app/docs/api/generations/',
|
|
},
|
|
twitter: {
|
|
title: 'Generations API | Banatie API Reference',
|
|
description: 'Create, list, update, and delete AI image generations. Full endpoint documentation with examples.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 8. `/docs/api/images/` — Images API
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Images API | Banatie API Reference',
|
|
description: 'Upload, list, update, and delete images. Manage aliases and access images via CDN.',
|
|
keywords: ['images api', 'upload image api', 'image cdn api', 'image alias api'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/api/images/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/api/images/',
|
|
'x-default': 'https://banatie.app/docs/api/images/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Images API | Banatie API Reference',
|
|
description: 'Upload, list, update, and delete images. Manage aliases and access images via CDN.',
|
|
url: 'https://banatie.app/docs/api/images/',
|
|
},
|
|
twitter: {
|
|
title: 'Images API | Banatie API Reference',
|
|
description: 'Upload, list, update, and delete images. Manage aliases and access images via CDN.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 9. `/docs/api/flows/` — Flows API
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Flows API | Banatie API Reference',
|
|
description: 'Manage generation flows. List, update, and delete flows that group related generations together.',
|
|
keywords: ['flows api', 'generation flow', 'chain generations', 'flow management api'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/api/flows/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/api/flows/',
|
|
'x-default': 'https://banatie.app/docs/api/flows/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Flows API | Banatie API Reference',
|
|
description: 'Manage generation flows. List, update, and delete flows that group related generations together.',
|
|
url: 'https://banatie.app/docs/api/flows/',
|
|
},
|
|
twitter: {
|
|
title: 'Flows API | Banatie API Reference',
|
|
description: 'Manage generation flows. List, update, and delete flows that group related generations together.',
|
|
},
|
|
};
|
|
```
|
|
|
|
### 10. `/docs/api/live-scopes/` — Live Scopes API
|
|
|
|
```tsx
|
|
export const metadata: Metadata = {
|
|
title: 'Live Scopes API | Banatie API Reference',
|
|
description: 'Manage live URL scopes. Create, configure, and control live image generation endpoints.',
|
|
keywords: ['live scopes api', 'live url management', 'scope limits', 'live generation api'],
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/api/live-scopes/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/api/live-scopes/',
|
|
'x-default': 'https://banatie.app/docs/api/live-scopes/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Live Scopes API | Banatie API Reference',
|
|
description: 'Manage live URL scopes. Create, configure, and control live image generation endpoints.',
|
|
url: 'https://banatie.app/docs/api/live-scopes/',
|
|
},
|
|
twitter: {
|
|
title: 'Live Scopes API | Banatie API Reference',
|
|
description: 'Manage live URL scopes. Create, configure, and control live image generation endpoints.',
|
|
},
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## JSON-LD Structured Data
|
|
|
|
### Create JsonLd Component
|
|
|
|
Create `/components/seo/JsonLd.tsx`:
|
|
|
|
```tsx
|
|
interface JsonLdProps {
|
|
data: Record<string, unknown>;
|
|
}
|
|
|
|
export function JsonLd({ data }: JsonLdProps) {
|
|
return (
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
|
|
/>
|
|
);
|
|
}
|
|
```
|
|
|
|
### BreadcrumbList Schema (All pages)
|
|
|
|
Add to every docs page:
|
|
|
|
```tsx
|
|
const breadcrumbSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: [
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 1,
|
|
name: 'Home',
|
|
item: 'https://banatie.app/',
|
|
},
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 2,
|
|
name: 'Documentation',
|
|
item: 'https://banatie.app/docs/',
|
|
},
|
|
// Add more levels as needed
|
|
],
|
|
};
|
|
```
|
|
|
|
### TechArticle Schema (Guide pages)
|
|
|
|
For `/docs/`, `/docs/generation/`, `/docs/images/`, `/docs/live-urls/`, `/docs/authentication/`:
|
|
|
|
```tsx
|
|
const articleSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'TechArticle',
|
|
headline: 'Page Title',
|
|
description: 'Page description',
|
|
author: {
|
|
'@type': 'Organization',
|
|
name: 'Banatie',
|
|
url: 'https://banatie.app/',
|
|
},
|
|
publisher: {
|
|
'@type': 'Organization',
|
|
name: 'Banatie',
|
|
url: 'https://banatie.app/',
|
|
logo: {
|
|
'@type': 'ImageObject',
|
|
url: 'https://banatie.app/logo.png',
|
|
},
|
|
},
|
|
mainEntityOfPage: {
|
|
'@type': 'WebPage',
|
|
'@id': 'https://banatie.app/docs/page/',
|
|
},
|
|
image: 'https://banatie.app/og-image.png',
|
|
};
|
|
```
|
|
|
|
### HowTo Schema (Get Started page)
|
|
|
|
For `/docs/` specifically — shows steps in search results:
|
|
|
|
```tsx
|
|
const howToSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'HowTo',
|
|
name: 'How to Generate Your First AI Image with Banatie API',
|
|
description: 'Generate your first AI image in a few simple steps using Banatie REST API.',
|
|
step: [
|
|
{
|
|
'@type': 'HowToStep',
|
|
name: 'Get API Key',
|
|
text: 'Sign up at banatie.app to receive your API key within 24 hours.',
|
|
url: 'https://banatie.app/docs/#get-your-api-key',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
name: 'Make API Request',
|
|
text: 'Send a POST request to /api/v1/generations with your prompt.',
|
|
url: 'https://banatie.app/docs/#your-first-image',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
name: 'Use Your Image',
|
|
text: 'The response contains a CDN URL ready for production use.',
|
|
url: 'https://banatie.app/docs/#production-ready',
|
|
},
|
|
],
|
|
};
|
|
```
|
|
|
|
### APIReference Schema (API pages)
|
|
|
|
For `/docs/api/` and sub-pages:
|
|
|
|
```tsx
|
|
const apiSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'TechArticle',
|
|
headline: 'Banatie API Reference',
|
|
description: 'Complete REST API documentation',
|
|
about: {
|
|
'@type': 'WebAPI',
|
|
name: 'Banatie Image Generation API',
|
|
documentation: 'https://banatie.app/docs/api/',
|
|
provider: {
|
|
'@type': 'Organization',
|
|
name: 'Banatie',
|
|
},
|
|
},
|
|
};
|
|
```
|
|
|
|
---
|
|
|
|
## Implementation Example
|
|
|
|
Full example for `/docs/page.tsx`:
|
|
|
|
```tsx
|
|
import { Metadata } from 'next';
|
|
import { JsonLd } from '@/components/seo/JsonLd';
|
|
// ... other imports
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Getting Started with Banatie API | AI Image Generation',
|
|
description: 'Generate your first AI image in a few simple steps. REST API for production-ready image assets via CDN.',
|
|
authors: [{ name: 'Banatie' }],
|
|
keywords: ['banatie api', 'image generation api', 'ai image api tutorial', 'getting started', 'api quickstart'],
|
|
robots: 'index, follow',
|
|
alternates: {
|
|
canonical: 'https://banatie.app/docs/',
|
|
languages: {
|
|
'en': 'https://banatie.app/docs/',
|
|
'x-default': 'https://banatie.app/docs/',
|
|
},
|
|
},
|
|
openGraph: {
|
|
title: 'Getting Started with Banatie API | AI Image Generation',
|
|
description: 'Generate your first AI image in a few simple steps. REST API for production-ready image assets via CDN.',
|
|
url: 'https://banatie.app/docs/',
|
|
siteName: 'Banatie',
|
|
locale: 'en_US',
|
|
type: 'article',
|
|
images: [
|
|
{
|
|
url: 'https://banatie.app/og-image.png',
|
|
width: 1200,
|
|
height: 630,
|
|
alt: 'Banatie - AI Image Generation API for Developers',
|
|
},
|
|
],
|
|
},
|
|
twitter: {
|
|
card: 'summary_large_image',
|
|
title: 'Getting Started with Banatie API | AI Image Generation',
|
|
description: 'Generate your first AI image in a few simple steps. REST API for production-ready image assets via CDN.',
|
|
},
|
|
};
|
|
|
|
const breadcrumbSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: [
|
|
{ '@type': 'ListItem', position: 1, name: 'Home', item: 'https://banatie.app/' },
|
|
{ '@type': 'ListItem', position: 2, name: 'Documentation', item: 'https://banatie.app/docs/' },
|
|
],
|
|
};
|
|
|
|
const howToSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'HowTo',
|
|
name: 'How to Generate Your First AI Image with Banatie API',
|
|
description: 'Generate your first AI image in a few simple steps using Banatie REST API.',
|
|
step: [
|
|
{
|
|
'@type': 'HowToStep',
|
|
name: 'Get API Key',
|
|
text: 'Sign up at banatie.app to receive your API key within 24 hours.',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
name: 'Make API Request',
|
|
text: 'Send a POST request to /api/v1/generations with your prompt.',
|
|
},
|
|
{
|
|
'@type': 'HowToStep',
|
|
name: 'Use Your Image',
|
|
text: 'The response contains a CDN URL ready for production use.',
|
|
},
|
|
],
|
|
};
|
|
|
|
export default function GettingStartedPage() {
|
|
return (
|
|
<>
|
|
<JsonLd data={breadcrumbSchema} />
|
|
<JsonLd data={howToSchema} />
|
|
{/* ... rest of page content */}
|
|
</>
|
|
);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Checklist
|
|
|
|
Before marking complete:
|
|
|
|
- [ ] All 10 pages have metadata export
|
|
- [ ] All canonical URLs end with trailing slash
|
|
- [ ] All pages use same OG image
|
|
- [ ] og:type is "article" (not "website")
|
|
- [ ] hreflang alternates present (en + x-default)
|
|
- [ ] JsonLd component created
|
|
- [ ] BreadcrumbList schema on all pages
|
|
- [ ] TechArticle schema on guide pages
|
|
- [ ] HowTo schema on /docs/ page
|
|
- [ ] Remove 'use client' if not needed (metadata requires server component)
|
|
|
|
---
|
|
|
|
## Important Note on 'use client'
|
|
|
|
Next.js metadata export only works in Server Components. If pages currently have `'use client'`, you need to:
|
|
|
|
1. Split into Server Component (page with metadata) and Client Component (interactive content)
|
|
2. Or move interactive parts to child components
|
|
|
|
Example structure:
|
|
```
|
|
/docs/
|
|
├── page.tsx # Server Component with metadata
|
|
└── _components/
|
|
└── DocsContent.tsx # Client Component with interactivity
|
|
```
|
|
|
|
---
|
|
|
|
**End of Task**
|