4d46e6b9a7
45 個 component + 6 個 page 統一從舊 font-mono 遷移到 font-body (DM Mono)，確保設計系統一致性。 font-body = DM Mono (等寬)，視覺效果相同但走新設計 token。 保留: font-heading (Syne)、font-dot-matrix (VT323/DSEG7) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* ComingSoon - 統一的「建設中」佔位元件
|
|
* ======================================
|
|
* 用於尚未實作的路由頁面
|
|
* Nothing.tech 極簡風格
|
|
*
|
|
* @created 2026-04-01 ogt
|
|
*/
|
|
|
|
import { type LucideIcon } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface ComingSoonProps {
|
|
icon?: LucideIcon
|
|
title: string
|
|
description?: string
|
|
className?: string
|
|
}
|
|
|
|
export function ComingSoon({ icon: Icon, title, description, className }: ComingSoonProps) {
|
|
return (
|
|
<div className={cn(
|
|
'flex flex-col items-center justify-center min-h-[60vh] text-center',
|
|
className
|
|
)}>
|
|
{Icon && (
|
|
<div className="w-16 h-16 rounded-2xl bg-nothing-gray-100 flex items-center justify-center mb-5">
|
|
<Icon className="w-8 h-8 text-nothing-gray-400" />
|
|
</div>
|
|
)}
|
|
<h2 className="font-body text-lg font-bold text-nothing-gray-700 tracking-tight mb-2">
|
|
{title}
|
|
</h2>
|
|
{description && (
|
|
<p className="font-body text-sm text-nothing-gray-400 max-w-xs">
|
|
{description}
|
|
</p>
|
|
)}
|
|
<div className="mt-6 flex items-center gap-1.5">
|
|
{[0, 1, 2].map(i => (
|
|
<div
|
|
key={i}
|
|
className="w-1.5 h-1.5 rounded-full bg-nothing-gray-300 animate-pulse"
|
|
style={{ animationDelay: `${i * 200}ms` }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|