} return ( ) } ``` - [ ] **Step 3: Verify the component compiles** ```bash npx tsc --noEmit ``` Expected: no errors in `ThemeToggle.tsx`. - [ ] **Step 4: Commit** ```bash git add src/components/ThemeToggle.tsx package.json package-lock.json git commit -m "feat: add ThemeToggle component with next-themes" ``` --- ### Task 5: Restyle LanguageSwitcher **Files:** - Modify: `src/components/LanguageSwitcher.tsx` **Interfaces:** - Consumes: `/public/flags/{locale}.svg` (from Task 3) - Produces: `export function LanguageSwitcher()` -- same signature as before, now uses `` flags - [ ] **Step 1: Rewrite LanguageSwitcher.tsx** ```tsx 'use client' import { useLocale } from 'next-intl' import { useRouter, usePathname } from '@/navigation' import { routing } from '@/i18n/routing' const FLAG_LABELS: Record = { en: 'English', fr: 'Francais', es: 'Espanol', it: 'Italiano', } export function LanguageSwitcher() { const locale = useLocale() const router = useRouter() const pathname = usePathname() return (

{routing.locales.map((loc) => ( ))}

) } ``` - [ ] **Step 2: Verify** ```bash npx tsc --noEmit ``` Open `http://localhost:3000/fr`. The header should show 4 flag images. The active flag has a violet ring; others are dimmed. - [ ] **Step 3: Commit** ```bash git add src/components/LanguageSwitcher.tsx git commit -m "feat: replace emoji flags with SVG flag images in LanguageSwitcher" ``` --- ### Task 6: Header component **Files:** - Create: `src/components/Header.tsx` **Interfaces:** - Consumes: `ThemeToggle` (Task 4), `LanguageSwitcher` (Task 5) - Produces: `export function Header()` -- sticky header with logo, theme toggle, language switcher - [ ] **Step 1: Create Header.tsx** ```tsx import { ThemeToggle } from '@/components/ThemeToggle' import { LanguageSwitcher } from '@/components/LanguageSwitcher' export function Header() { return (

Ombrora

) } ``` - [ ] **Step 2: Verify** ```bash npx tsc --noEmit ``` Expected: no errors. - [ ] **Step 3: Commit** ```bash git add src/components/Header.tsx git commit -m "feat: add Header component with logo, theme toggle, and language switcher" ``` --- ### Task 7: Locale layout update **Files:** - Modify: `src/app/[locale]/layout.tsx` **Interfaces:** - Consumes: `Header` (Task 6), `globals.css` (Task 1), translation keys `meta.*` and `footer.*` (Task 2) - Produces: full page shell with Inter font, ThemeProvider, SEO metadata, JSON-LD, Header, footer - [ ] **Step 1: Rewrite src/app/[locale]/layout.tsx** ```tsx import type { Metadata } from 'next' import { Inter } from 'next/font/google' import { NextIntlClientProvider } from 'next-intl' import { getTranslations, getMessages } from 'next-intl/server' import { notFound } from 'next/navigation' import { ThemeProvider } from 'next-themes' import { routing } from '@/i18n/routing' import { Header } from '@/components/Header' import '../globals.css' const inter = Inter({ subsets: ['latin', 'latin-ext'] }) export async function generateMetadata({ params, }: { params: Promise<{ locale: string }> }): Promise { const { locale } = await params const t = await getTranslations({ locale, namespace: 'meta' }) const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? '' return { title: t('title'), description: t('description'), robots: { index: true, follow: true }, openGraph: { title: t('title'), description: t('description'), url: `${baseUrl}/${locale}`, siteName: 'Ombrora', locale, }, alternates: { canonical: `${baseUrl}/${locale}`, languages: Object.fromEntries( routing.locales.map((l) => [l, `/${l}`]) ), }, } } export default async function LocaleLayout({ children, params, }: { children: React.ReactNode params: Promise<{ locale: string }> }) { const { locale } = await params if (!(routing.locales as readonly string[]).includes(locale)) { notFound() } const messages = await getMessages() const t = await getTranslations({ locale, namespace: 'footer' }) const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? '' const jsonLd = { '@context': 'https://schema.org', '@type': 'WebApplication', name: 'Ombrora', url: baseUrl, description: 'Free, fast, private video downloader.', applicationCategory: 'MultimediaApplication', operatingSystem: 'Web', offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR', }, } return (