mirror of
https://github.com/luxfi/docs-template.git
synced 2026-10-30 16:58:41 +00:00
Reusable documentation template for Lux Network projects. Features: - Fumadocs UI with Next.js 15 - Dark mode with system preference - Pre-configured social links (Lux, Discord, X, Warpcast) - SITE_CONFIG and DOCS_CONFIG for easy customization - @luxfi/logo integration - Tailwind CSS with typography plugin Usage: 1. Copy template to new directory 2. Edit SITE_CONFIG in app/layout.tsx 3. Edit DOCS_CONFIG in app/docs/layout.tsx 4. Add MDX content in content/docs/ 5. pnpm dev
38 lines
802 B
TypeScript
38 lines
802 B
TypeScript
'use client'
|
|
|
|
import { getMenuBarSVG } from '@luxfi/logo'
|
|
|
|
interface LogoProps {
|
|
size?: number
|
|
className?: string
|
|
}
|
|
|
|
export function Logo({ size = 24, className = '' }: LogoProps) {
|
|
const svg = getMenuBarSVG()
|
|
|
|
return (
|
|
<div
|
|
className={`logo-container inline-block ${className}`}
|
|
style={{ width: size, height: size }}
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
interface LogoWithTextProps {
|
|
size?: number
|
|
name?: string
|
|
}
|
|
|
|
export function LogoWithText({ size = 24, name = 'Docs' }: LogoWithTextProps) {
|
|
return (
|
|
<div className="flex items-center gap-2 group">
|
|
<Logo
|
|
size={size}
|
|
className="transition-transform duration-200 group-hover:scale-110"
|
|
/>
|
|
<span className="font-bold text-lg">{name}</span>
|
|
</div>
|
|
)
|
|
}
|