864da55cec
- Create GuidePage with responsive layout (sticky TOC sidebar desktop, collapsible accordion mobile) - Add GuideTableOfContents with scroll-based active section tracking - Create GuideScreenshot and GuideTable shared components - Add guideTypes.ts with section metadata for all 10 sections - Add lazy-loaded /guide route in App.tsx with public access - Placeholder section components for all 10 guide sections Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
27 lines
701 B
TypeScript
27 lines
701 B
TypeScript
interface GuideScreenshotProps {
|
|
src: string;
|
|
alt: string;
|
|
caption?: string;
|
|
mobile?: boolean;
|
|
}
|
|
|
|
export const GuideScreenshot = ({ src, alt, caption, mobile }: GuideScreenshotProps) => {
|
|
return (
|
|
<figure className={`my-6 ${mobile ? 'max-w-[375px]' : 'max-w-4xl'} mx-auto`}>
|
|
<div className="rounded-lg overflow-hidden border border-white/10 shadow-lg shadow-black/20">
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
loading="lazy"
|
|
className="w-full h-auto"
|
|
/>
|
|
</div>
|
|
{caption && (
|
|
<figcaption className="mt-2 text-center text-sm text-titanio/70 italic">
|
|
{caption}
|
|
</figcaption>
|
|
)}
|
|
</figure>
|
|
);
|
|
};
|