mirror of
https://github.com/luxfi/forum.git
synced 2026-09-24 00:24:25 +00:00
no utility engine
Tailwind 4 out — the engine import, the `@custom-variant`, and the `@theme inline` wrapper. The tokens inside it were always plain custom properties and are untouched; what goes is the thing that was reading them. Every class attribute now reaches a converter rather than the document: Box for an element, css for an icon, the component itself for anything from @hanzo/ui. The body's ground moves into the sheet, since <body> sits outside the provider and reads no classes. The library's sheets are imported from the LAYOUT rather than @import-ed from the app's CSS: a bare package specifier does not resolve in this pipeline and the failure is silent — the whole file is dropped, so every token goes missing and the page renders on browser defaults. Also on the current toolchain: React 19.2.8, Next 16.3.3, TypeScript 7. Measured at 390px and 1280px: 4/4 page-widths clean, nothing unread. Co-authored-by: Hanzo Dev <[email protected]>
This commit is contained in:
+18
-5
@@ -1,13 +1,15 @@
|
|||||||
/**
|
/**
|
||||||
* Lux Forum Theme
|
* Lux Forum Theme
|
||||||
* Tailwind CSS 4
|
* No utility engine: tokens and rules, read straight by the browser
|
||||||
*/
|
*/
|
||||||
|
|
||||||
@import "tailwindcss";
|
/* The library's sheets are imported from the LAYOUT, not here: a bare package
|
||||||
|
specifier in a plain @import does not resolve in this pipeline, and the
|
||||||
|
failure is silent — the whole file is dropped, so the tokens below never
|
||||||
|
reach the document and every link renders browser-default blue. */
|
||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
|
||||||
|
|
||||||
@theme inline {
|
:root {
|
||||||
--font-sans: var(--font-inter), system-ui, sans-serif;
|
--font-sans: var(--font-inter), system-ui, sans-serif;
|
||||||
--font-mono: ui-monospace, monospace;
|
--font-mono: ui-monospace, monospace;
|
||||||
--radius: 0.5rem;
|
--radius: 0.5rem;
|
||||||
@@ -73,7 +75,7 @@
|
|||||||
--ring: 0 0% 36%;
|
--ring: 0 0% 36%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer base {
|
|
||||||
* {
|
* {
|
||||||
border-color: hsl(var(--border));
|
border-color: hsl(var(--border));
|
||||||
}
|
}
|
||||||
@@ -95,4 +97,15 @@
|
|||||||
.dark ::selection {
|
.dark ::selection {
|
||||||
background: rgba(255, 255, 255, 0.20);
|
background: rgba(255, 255, 255, 0.20);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* The body's ground. Stated here rather than as classes on <body>, which sits
|
||||||
|
outside the provider and so reads none of them. */
|
||||||
|
body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(0, 1fr);
|
||||||
|
min-height: 100vh;
|
||||||
|
background: hsl(var(--background));
|
||||||
|
color: hsl(var(--foreground));
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
}
|
}
|
||||||
|
|||||||
+6
-1
@@ -1,6 +1,9 @@
|
|||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
|
import { Hanzo } from '@hanzo/ui'
|
||||||
import { Inter } from 'next/font/google';
|
import { Inter } from 'next/font/google';
|
||||||
import { ThemeProvider } from 'next-themes';
|
import { ThemeProvider } from 'next-themes';
|
||||||
|
import '@hanzo/ui/theme.css';
|
||||||
|
import '@hanzo/ui/styles.css';
|
||||||
import './global.css';
|
import './global.css';
|
||||||
|
|
||||||
const inter = Inter({
|
const inter = Inter({
|
||||||
@@ -32,7 +35,8 @@ export default function RootLayout({
|
|||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning className={inter.variable}>
|
<html lang="en" suppressHydrationWarning className={inter.variable}>
|
||||||
<body className="min-h-screen bg-background text-foreground antialiased">
|
<body>
|
||||||
|
<Hanzo>
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
attribute="class"
|
attribute="class"
|
||||||
defaultTheme="system"
|
defaultTheme="system"
|
||||||
@@ -41,6 +45,7 @@ export default function RootLayout({
|
|||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
|
</Hanzo>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
+127
-126
@@ -1,4 +1,5 @@
|
|||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import { Box, css } from '@hanzo/ui'
|
||||||
import {
|
import {
|
||||||
MessageSquare,
|
MessageSquare,
|
||||||
Lightbulb,
|
Lightbulb,
|
||||||
@@ -107,204 +108,204 @@ const colorClasses: Record<string, string> = {
|
|||||||
|
|
||||||
export default function ForumPage() {
|
export default function ForumPage() {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col">
|
<Box className="min-h-screen flex flex-col">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
<Box tag="header" className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||||
<div className="container flex h-16 items-center justify-between px-4 md:px-6 mx-auto max-w-6xl">
|
<Box className="container flex h-16 items-center justify-between px-4 md:px-6 mx-auto max-w-6xl">
|
||||||
<Link href="/" className="flex items-center gap-2">
|
<Link href="/" style={css('flex items-center gap-2')}>
|
||||||
<Logo size={28} />
|
<Logo size={28} />
|
||||||
<span className="font-semibold text-lg">Forum</span>
|
<Box tag="span" className="font-semibold text-lg">Forum</Box>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<div className="flex items-center gap-4">
|
<Box className="flex items-center gap-4">
|
||||||
<a
|
<Box tag="a"
|
||||||
href="https://lux.help"
|
href="https://lux.help"
|
||||||
className="hidden sm:flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
className="hidden sm:flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
Help
|
Help
|
||||||
<ExternalLink className="h-3 w-3" />
|
<ExternalLink style={css('h-3 w-3')} />
|
||||||
</a>
|
</Box>
|
||||||
<a
|
<Box tag="a"
|
||||||
href="https://github.com/luxfi/lps/discussions"
|
href="https://github.com/luxfi/lps/discussions"
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
<Github className="h-5 w-5" />
|
<Github style={css('h-5 w-5')} />
|
||||||
</a>
|
</Box>
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</header>
|
</Box>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<main className="flex-1">
|
<Box tag="main" className="flex-1">
|
||||||
{/* Hero */}
|
{/* Hero */}
|
||||||
<section className="py-16 md:py-24 px-4 md:px-6 border-b border-border/50">
|
<Box tag="section" className="py-16 md:py-24 px-4 md:px-6 border-b border-border/50">
|
||||||
<div className="container mx-auto max-w-4xl text-center">
|
<Box className="container mx-auto max-w-4xl text-center">
|
||||||
<div className="inline-flex items-center justify-center p-3 bg-primary/5 rounded-full mb-6">
|
<Box className="inline-flex items-center justify-center p-3 bg-primary/5 rounded-full mb-6">
|
||||||
<Users className="h-8 w-8 text-primary" />
|
<Users style={css('h-8 w-8 text-primary')} />
|
||||||
</div>
|
</Box>
|
||||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
|
<Box tag="h1" className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
|
||||||
Lux Community
|
Lux Community
|
||||||
</h1>
|
</Box>
|
||||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
|
<Box tag="p" className="text-lg text-muted-foreground max-w-2xl mx-auto mb-8">
|
||||||
Join the conversation. Share ideas, ask questions, and connect with developers
|
Join the conversation. Share ideas, ask questions, and connect with developers
|
||||||
building on Lux Network.
|
building on Lux Network.
|
||||||
</p>
|
</Box>
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<Box className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
<a
|
<Box tag="a"
|
||||||
href="https://github.com/luxfi/lps/discussions"
|
href="https://github.com/luxfi/lps/discussions"
|
||||||
className="inline-flex items-center justify-center gap-2 h-12 px-8 rounded-lg bg-primary text-primary-foreground font-medium hover:opacity-90 transition-opacity"
|
className="inline-flex items-center justify-center gap-2 h-12 px-8 rounded-lg bg-primary text-primary-foreground font-medium hover:opacity-90 transition-opacity"
|
||||||
>
|
>
|
||||||
<MessageSquare className="h-5 w-5" />
|
<MessageSquare style={css('h-5 w-5')} />
|
||||||
Open Discussions
|
Open Discussions
|
||||||
<ExternalLink className="h-4 w-4" />
|
<ExternalLink style={css('h-4 w-4')} />
|
||||||
</a>
|
</Box>
|
||||||
<a
|
<Box tag="a"
|
||||||
href="https://github.com/luxfi/lps/discussions/new/choose"
|
href="https://github.com/luxfi/lps/discussions/new/choose"
|
||||||
className="inline-flex items-center justify-center gap-2 h-12 px-8 rounded-lg border border-border font-medium hover:bg-muted transition-colors"
|
className="inline-flex items-center justify-center gap-2 h-12 px-8 rounded-lg border border-border font-medium hover:bg-muted transition-colors"
|
||||||
>
|
>
|
||||||
<Zap className="h-5 w-5" />
|
<Zap style={css('h-5 w-5')} />
|
||||||
Start a Discussion
|
Start a Discussion
|
||||||
</a>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</section>
|
</Box>
|
||||||
|
|
||||||
{/* Categories */}
|
{/* Categories */}
|
||||||
<section className="py-16 px-4 md:px-6">
|
<Box tag="section" className="py-16 px-4 md:px-6">
|
||||||
<div className="container mx-auto max-w-6xl">
|
<Box className="container mx-auto max-w-6xl">
|
||||||
<h2 className="text-2xl font-bold mb-8 text-center">Discussion Categories</h2>
|
<Box tag="h2" className="text-2xl font-bold mb-8 text-center">Discussion Categories</Box>
|
||||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
<Box className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||||
{discussionCategories.map((category) => {
|
{discussionCategories.map((category) => {
|
||||||
const Icon = category.icon;
|
const Icon = category.icon;
|
||||||
return (
|
return (
|
||||||
<a
|
<Box tag="a"
|
||||||
key={category.title}
|
key={category.title}
|
||||||
href={category.href}
|
href={category.href}
|
||||||
className="group p-6 rounded-xl border border-border/50 bg-background hover:border-primary/30 hover:shadow-lg transition-all"
|
className="group p-6 rounded-xl border border-border/50 bg-background hover:border-primary/30 hover:shadow-lg transition-all"
|
||||||
>
|
>
|
||||||
<div className={`inline-flex p-3 rounded-lg ${colorClasses[category.color]} mb-4`}>
|
<Box className={`inline-flex p-3 rounded-lg ${colorClasses[category.color]} mb-4`}>
|
||||||
<Icon className="h-6 w-6" />
|
<Icon style={css('h-6 w-6')} />
|
||||||
</div>
|
</Box>
|
||||||
<h3 className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors">
|
<Box tag="h3" className="text-lg font-semibold mb-2 group-hover:text-primary transition-colors">
|
||||||
{category.title}
|
{category.title}
|
||||||
</h3>
|
</Box>
|
||||||
<p className="text-sm text-muted-foreground mb-4">
|
<Box tag="p" className="text-sm text-muted-foreground mb-4">
|
||||||
{category.description}
|
{category.description}
|
||||||
</p>
|
</Box>
|
||||||
<span className="inline-flex items-center gap-1 text-sm font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity">
|
<Box tag="span" className="inline-flex items-center gap-1 text-sm font-medium text-primary opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
View discussions
|
View discussions
|
||||||
<ArrowRight className="h-4 w-4" />
|
<ArrowRight style={css('h-4 w-4')} />
|
||||||
</span>
|
</Box>
|
||||||
</a>
|
</Box>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</section>
|
</Box>
|
||||||
|
|
||||||
{/* Resources */}
|
{/* Resources */}
|
||||||
<section className="py-16 px-4 md:px-6 bg-muted/30 border-y border-border/50">
|
<Box tag="section" className="py-16 px-4 md:px-6 bg-muted/30 border-y border-border/50">
|
||||||
<div className="container mx-auto max-w-4xl">
|
<Box className="container mx-auto max-w-4xl">
|
||||||
<h2 className="text-2xl font-bold mb-8 text-center">Resources</h2>
|
<Box tag="h2" className="text-2xl font-bold mb-8 text-center">Resources</Box>
|
||||||
<div className="grid gap-4 sm:grid-cols-2">
|
<Box className="grid gap-4 sm:grid-cols-2">
|
||||||
{resources.map((resource) => {
|
{resources.map((resource) => {
|
||||||
const Icon = resource.icon;
|
const Icon = resource.icon;
|
||||||
return (
|
return (
|
||||||
<a
|
<Box tag="a"
|
||||||
key={resource.title}
|
key={resource.title}
|
||||||
href={resource.href}
|
href={resource.href}
|
||||||
className="flex items-center gap-4 p-4 rounded-lg border border-border/50 bg-background hover:border-primary/30 hover:shadow-md transition-all"
|
className="flex items-center gap-4 p-4 rounded-lg border border-border/50 bg-background hover:border-primary/30 hover:shadow-md transition-all"
|
||||||
>
|
>
|
||||||
<div className="p-2 rounded-lg bg-muted">
|
<Box className="p-2 rounded-lg bg-muted">
|
||||||
<Icon className="h-5 w-5" />
|
<Icon style={css('h-5 w-5')} />
|
||||||
</div>
|
</Box>
|
||||||
<div className="flex-1">
|
<Box className="flex-1">
|
||||||
<span className="font-medium block">{resource.title}</span>
|
<Box tag="span" className="font-medium block">{resource.title}</Box>
|
||||||
<span className="text-sm text-muted-foreground">{resource.description}</span>
|
<Box tag="span" className="text-sm text-muted-foreground">{resource.description}</Box>
|
||||||
</div>
|
</Box>
|
||||||
<ExternalLink className="h-4 w-4 text-muted-foreground" />
|
<ExternalLink style={css('h-4 w-4 text-muted-foreground')} />
|
||||||
</a>
|
</Box>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</section>
|
</Box>
|
||||||
|
|
||||||
{/* Guidelines */}
|
{/* Guidelines */}
|
||||||
<section className="py-16 px-4 md:px-6">
|
<Box tag="section" className="py-16 px-4 md:px-6">
|
||||||
<div className="container mx-auto max-w-3xl">
|
<Box className="container mx-auto max-w-3xl">
|
||||||
<h2 className="text-2xl font-bold mb-8 text-center">Community Guidelines</h2>
|
<Box tag="h2" className="text-2xl font-bold mb-8 text-center">Community Guidelines</Box>
|
||||||
<div className="space-y-6">
|
<Box className="space-y-6">
|
||||||
<div className="p-6 rounded-xl border border-border/50 bg-background">
|
<Box className="p-6 rounded-xl border border-border/50 bg-background">
|
||||||
<h3 className="font-semibold mb-2">Be Respectful</h3>
|
<Box tag="h3" className="font-semibold mb-2">Be Respectful</Box>
|
||||||
<p className="text-sm text-muted-foreground">
|
<Box tag="p" className="text-sm text-muted-foreground">
|
||||||
Treat everyone with respect. Healthy discussions require diverse perspectives.
|
Treat everyone with respect. Healthy discussions require diverse perspectives.
|
||||||
</p>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
<div className="p-6 rounded-xl border border-border/50 bg-background">
|
<Box className="p-6 rounded-xl border border-border/50 bg-background">
|
||||||
<h3 className="font-semibold mb-2">Stay On Topic</h3>
|
<Box tag="h3" className="font-semibold mb-2">Stay On Topic</Box>
|
||||||
<p className="text-sm text-muted-foreground">
|
<Box tag="p" className="text-sm text-muted-foreground">
|
||||||
Keep discussions relevant to Lux Network and the broader ecosystem.
|
Keep discussions relevant to Lux Network and the broader ecosystem.
|
||||||
</p>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
<div className="p-6 rounded-xl border border-border/50 bg-background">
|
<Box className="p-6 rounded-xl border border-border/50 bg-background">
|
||||||
<h3 className="font-semibold mb-2">Share Knowledge</h3>
|
<Box tag="h3" className="font-semibold mb-2">Share Knowledge</Box>
|
||||||
<p className="text-sm text-muted-foreground">
|
<Box tag="p" className="text-sm text-muted-foreground">
|
||||||
Help others by sharing your experience and expertise. We grow together.
|
Help others by sharing your experience and expertise. We grow together.
|
||||||
</p>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</section>
|
</Box>
|
||||||
|
|
||||||
{/* CTA */}
|
{/* CTA */}
|
||||||
<section className="py-16 px-4 md:px-6 bg-muted/30 border-t border-border/50">
|
<Box tag="section" className="py-16 px-4 md:px-6 bg-muted/30 border-t border-border/50">
|
||||||
<div className="container mx-auto max-w-4xl text-center">
|
<Box className="container mx-auto max-w-4xl text-center">
|
||||||
<MessageSquare className="h-10 w-10 mx-auto mb-4 text-primary" />
|
<MessageSquare style={css('h-10 w-10 mx-auto mb-4 text-primary')} />
|
||||||
<h2 className="text-2xl font-bold mb-4">Ready to join the conversation?</h2>
|
<Box tag="h2" className="text-2xl font-bold mb-4">Ready to join the conversation?</Box>
|
||||||
<p className="text-muted-foreground mb-6 max-w-xl mx-auto">
|
<Box tag="p" className="text-muted-foreground mb-6 max-w-xl mx-auto">
|
||||||
All discussions happen on GitHub. Sign in with your GitHub account to participate.
|
All discussions happen on GitHub. Sign in with your GitHub account to participate.
|
||||||
</p>
|
</Box>
|
||||||
<a
|
<Box tag="a"
|
||||||
href="https://github.com/luxfi/lps/discussions"
|
href="https://github.com/luxfi/lps/discussions"
|
||||||
className="inline-flex items-center justify-center gap-2 h-12 px-8 rounded-lg bg-primary text-primary-foreground font-medium hover:opacity-90 transition-opacity"
|
className="inline-flex items-center justify-center gap-2 h-12 px-8 rounded-lg bg-primary text-primary-foreground font-medium hover:opacity-90 transition-opacity"
|
||||||
>
|
>
|
||||||
<Github className="h-5 w-5" />
|
<Github style={css('h-5 w-5')} />
|
||||||
Go to Discussions
|
Go to Discussions
|
||||||
<ExternalLink className="h-4 w-4" />
|
<ExternalLink style={css('h-4 w-4')} />
|
||||||
</a>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</section>
|
</Box>
|
||||||
</main>
|
</Box>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="border-t border-border/50 py-8 px-4 md:px-6">
|
<Box tag="footer" className="border-t border-border/50 py-8 px-4 md:px-6">
|
||||||
<div className="container mx-auto max-w-6xl">
|
<Box className="container mx-auto max-w-6xl">
|
||||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
<Box className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||||
<div className="flex items-center gap-2">
|
<Box className="flex items-center gap-2">
|
||||||
<Logo size={20} />
|
<Logo size={20} />
|
||||||
<span className="text-sm text-muted-foreground">
|
<Box tag="span" className="text-sm text-muted-foreground">
|
||||||
BSD-3-Clause © 2020 - {new Date().getFullYear()} Lux Industries Inc.
|
BSD-3-Clause © 2020 - {new Date().getFullYear()} Lux Industries Inc.
|
||||||
</span>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
<div className="flex items-center gap-6">
|
<Box className="flex items-center gap-6">
|
||||||
<a
|
<Box tag="a"
|
||||||
href="https://github.com/luxfi"
|
href="https://github.com/luxfi"
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
<Github className="h-5 w-5" />
|
<Github style={css('h-5 w-5')} />
|
||||||
</a>
|
</Box>
|
||||||
<a
|
<Box tag="a"
|
||||||
href="https://twitter.com/luxfi"
|
href="https://twitter.com/luxfi"
|
||||||
className="text-muted-foreground hover:text-foreground transition-colors"
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
||||||
>
|
>
|
||||||
<Twitter className="h-5 w-5" />
|
<Twitter style={css('h-5 w-5')} />
|
||||||
</a>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</footer>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+13
-12
@@ -1,6 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { getMenuBarSVG, getWhiteSVG, getMonoSVG, getColorSVG } from '@luxfi/logo';
|
import { getMenuBarSVG, getWhiteSVG, getMonoSVG, getColorSVG } from '@luxfi/logo';
|
||||||
|
import { Box } from '@hanzo/ui'
|
||||||
|
|
||||||
interface LogoProps {
|
interface LogoProps {
|
||||||
size?: number;
|
size?: number;
|
||||||
@@ -25,7 +26,7 @@ export function Logo({ size = 24, className = '', variant = 'default' }: LogoPro
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<Box
|
||||||
className={`logo-container inline-block ${className}`}
|
className={`logo-container inline-block ${className}`}
|
||||||
style={{ width: size, height: size }}
|
style={{ width: size, height: size }}
|
||||||
dangerouslySetInnerHTML={{ __html: svg }}
|
dangerouslySetInnerHTML={{ __html: svg }}
|
||||||
@@ -35,28 +36,28 @@ export function Logo({ size = 24, className = '', variant = 'default' }: LogoPro
|
|||||||
|
|
||||||
export function LogoWithText({ size = 24, text = 'Forum' }: { size?: number; text?: string }) {
|
export function LogoWithText({ size = 24, text = 'Forum' }: { size?: number; text?: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2 group logo-with-text">
|
<Box className="flex items-center gap-2 group logo-with-text">
|
||||||
<Logo
|
<Logo
|
||||||
size={size}
|
size={size}
|
||||||
className="transition-transform duration-200 group-hover:scale-110"
|
className="transition-transform duration-200 group-hover:scale-110"
|
||||||
/>
|
/>
|
||||||
<div className="relative h-6">
|
<Box className="relative h-6">
|
||||||
<span className="font-bold text-lg inline-block transition-all duration-300 ease-out group-hover:opacity-0 group-hover:-translate-y-full">
|
<Box tag="span" className="font-bold text-lg inline-block transition-all duration-300 ease-out group-hover:opacity-0 group-hover:-translate-y-full">
|
||||||
{text}
|
{text}
|
||||||
</span>
|
</Box>
|
||||||
<span className="font-bold text-lg absolute left-0 top-0 opacity-0 translate-y-full transition-all duration-300 ease-out group-hover:opacity-100 group-hover:translate-y-0 whitespace-nowrap">
|
<Box tag="span" className="font-bold text-lg absolute left-0 top-0 opacity-0 translate-y-full transition-all duration-300 ease-out group-hover:opacity-100 group-hover:translate-y-0 whitespace-nowrap">
|
||||||
Lux {text}
|
Lux {text}
|
||||||
</span>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
</div>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function LogoStatic({ size = 24, text = 'Forum' }: { size?: number; text?: string }) {
|
export function LogoStatic({ size = 24, text = 'Forum' }: { size?: number; text?: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-2">
|
<Box className="flex items-center gap-2">
|
||||||
<Logo size={size} />
|
<Logo size={size} />
|
||||||
<span className="font-bold text-lg">{text}</span>
|
<Box tag="span" className="font-bold text-lg">{text}</Box>
|
||||||
</div>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useTheme } from 'next-themes';
|
import { useTheme } from 'next-themes';
|
||||||
|
import { Box } from '@hanzo/ui'
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
export function ThemeToggle() {
|
export function ThemeToggle() {
|
||||||
@@ -13,7 +14,7 @@ export function ThemeToggle() {
|
|||||||
|
|
||||||
if (!mounted) {
|
if (!mounted) {
|
||||||
return (
|
return (
|
||||||
<button
|
<Box tag="button"
|
||||||
className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||||
aria-label="Toggle theme"
|
aria-label="Toggle theme"
|
||||||
>
|
>
|
||||||
@@ -21,14 +22,14 @@ export function ThemeToggle() {
|
|||||||
<circle cx="12" cy="12" r="5" />
|
<circle cx="12" cy="12" r="5" />
|
||||||
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
|
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const isDark = resolvedTheme === 'dark';
|
const isDark = resolvedTheme === 'dark';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<Box tag="button"
|
||||||
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
||||||
className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
className="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
|
||||||
aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
|
aria-label={`Switch to ${isDark ? 'light' : 'dark'} theme`}
|
||||||
@@ -43,6 +44,6 @@ export function ThemeToggle() {
|
|||||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</button>
|
</Box>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-8
@@ -13,21 +13,18 @@
|
|||||||
"@luxfi/logo": "^1.0.0",
|
"@luxfi/logo": "^1.0.0",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"lucide-react": "^0.468.0",
|
"lucide-react": "^0.468.0",
|
||||||
"next": "16.0.1",
|
"next": "16.3.3",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"react": "19.2.0",
|
"react": "19.2.8",
|
||||||
"react-dom": "19.2.0",
|
"react-dom": "19.2.8",
|
||||||
"tailwind-merge": "^3.4.0",
|
"tailwind-merge": "^3.4.0",
|
||||||
"tailwindcss": "^4.1.16"
|
"@hanzo/ui": "^8.23.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4.1.16",
|
|
||||||
"@types/node": "^22.10.2",
|
"@types/node": "^22.10.2",
|
||||||
"@types/react": "^19.0.1",
|
"@types/react": "^19.0.1",
|
||||||
"@types/react-dom": "^19.0.2",
|
"@types/react-dom": "^19.0.2",
|
||||||
"autoprefixer": "^10.4.20",
|
"typescript": "^7.0.2"
|
||||||
"postcss": "^8.4.49",
|
|
||||||
"typescript": "^5.7.2"
|
|
||||||
},
|
},
|
||||||
"packageManager": "[email protected]"
|
"packageManager": "[email protected]"
|
||||||
}
|
}
|
||||||
|
|||||||
Generated
+5367
-393
File diff suppressed because it is too large
Load Diff
@@ -1,5 +0,0 @@
|
|||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
'@tailwindcss/postcss': {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
import type { Config } from 'tailwindcss';
|
|
||||||
|
|
||||||
const config: Config = {
|
|
||||||
darkMode: 'class',
|
|
||||||
content: [
|
|
||||||
'./app/**/*.{ts,tsx}',
|
|
||||||
'./components/**/*.{ts,tsx}',
|
|
||||||
],
|
|
||||||
theme: {
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
background: 'hsl(var(--background))',
|
|
||||||
foreground: 'hsl(var(--foreground))',
|
|
||||||
border: 'hsl(var(--border))',
|
|
||||||
muted: {
|
|
||||||
DEFAULT: 'hsl(var(--muted))',
|
|
||||||
foreground: 'hsl(var(--muted-foreground))',
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
DEFAULT: 'hsl(var(--card))',
|
|
||||||
foreground: 'hsl(var(--card-foreground))',
|
|
||||||
},
|
|
||||||
primary: {
|
|
||||||
DEFAULT: 'hsl(var(--primary))',
|
|
||||||
foreground: 'hsl(var(--primary-foreground))',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
Reference in New Issue
Block a user