|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import React, { useState } from "react"; |
| 4 | +import { |
| 5 | + AppShell, |
| 6 | + Header, |
| 7 | + Footer, |
| 8 | + FooterItem, |
| 9 | + Content, |
| 10 | + HeaderNav, |
| 11 | + HeaderNavItem, |
| 12 | + Sidebar, |
| 13 | + NavGroup, |
| 14 | + NavItem, |
| 15 | + cn, |
| 16 | +} from "appshell-react"; |
| 17 | +import { |
| 18 | + Home, |
| 19 | + Search, |
| 20 | + PlusSquare, |
| 21 | + Heart, |
| 22 | + User, |
| 23 | + Menu, |
| 24 | + Bell, |
| 25 | + Settings, |
| 26 | + Mail, |
| 27 | + Share2, |
| 28 | + Bookmark, |
| 29 | + MoreHorizontal, |
| 30 | + ChevronRight, |
| 31 | + Zap, |
| 32 | + Layout, |
| 33 | + Smartphone, |
| 34 | + Shield, |
| 35 | + Palette, |
| 36 | + Sparkles, |
| 37 | +} from "lucide-react"; |
| 38 | + |
| 39 | +export default function KitchenSinkPage() { |
| 40 | + const [activeTab, setActiveTab] = useState("home"); |
| 41 | + const [sidebarOpen, setSidebarOpen] = useState(false); |
| 42 | + const [theme, setTheme] = useState<"light" | "dark" | "primary">("light"); |
| 43 | + |
| 44 | + const logo = ( |
| 45 | + <div className="flex items-center gap-2 font-bold tracking-tight"> |
| 46 | + <div className="size-8 rounded-xl bg-primary flex items-center justify-center shadow-lg shadow-primary/20 ring-1 ring-white/20"> |
| 47 | + <Zap className="size-5 text-primary-foreground fill-primary-foreground" /> |
| 48 | + </div> |
| 49 | + <span className="hidden sm:inline-block">AppShell Pro</span> |
| 50 | + </div> |
| 51 | + ); |
| 52 | + |
| 53 | + const actions = ( |
| 54 | + <div className="flex items-center gap-1 sm:gap-2"> |
| 55 | + <button className="p-2 rounded-full hover:bg-accent/50 transition-colors relative"> |
| 56 | + <Bell className="size-5" /> |
| 57 | + <span className="absolute top-2 right-2 size-2 bg-destructive rounded-full border-2 border-background" /> |
| 58 | + </button> |
| 59 | + <button className="hidden sm:flex p-2 rounded-full hover:bg-accent/50 transition-colors"> |
| 60 | + <Settings className="size-5" /> |
| 61 | + </button> |
| 62 | + <div className="size-8 rounded-full bg-gradient-to-tr from-primary to-purple-500 border-2 border-background shadow-sm ml-1" /> |
| 63 | + </div> |
| 64 | + ); |
| 65 | + |
| 66 | + const nav = ( |
| 67 | + <HeaderNav> |
| 68 | + <HeaderNavItem label="Feed" active /> |
| 69 | + <HeaderNavItem label="Discover" /> |
| 70 | + <HeaderNavItem label="Community" /> |
| 71 | + </HeaderNav> |
| 72 | + ); |
| 73 | + |
| 74 | + const mobileMenu = ( |
| 75 | + <div className="grid gap-4 py-4"> |
| 76 | + <div className="flex flex-col gap-2"> |
| 77 | + <h4 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Menu</h4> |
| 78 | + <NavItem icon={<Home className="size-4" />} label="Home" active /> |
| 79 | + <NavItem icon={<Search className="size-4" />} label="Search" /> |
| 80 | + <NavItem icon={<Bell className="size-4" />} label="Notifications" /> |
| 81 | + <NavItem icon={<Mail className="size-4" />} label="Messages" /> |
| 82 | + </div> |
| 83 | + <div className="flex flex-col gap-2"> |
| 84 | + <h4 className="px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Theme</h4> |
| 85 | + <div className="flex gap-2 p-2"> |
| 86 | + {(["light", "dark", "primary"] as const).map((t) => ( |
| 87 | + <button |
| 88 | + key={t} |
| 89 | + onClick={() => setTheme(t)} |
| 90 | + className={cn( |
| 91 | + "flex-1 py-2 text-xs font-medium rounded-lg border capitalize transition-all", |
| 92 | + theme === t ? "bg-primary text-primary-foreground border-primary shadow-sm" : "bg-muted/50 hover:bg-muted" |
| 93 | + )} |
| 94 | + > |
| 95 | + {t} |
| 96 | + </button> |
| 97 | + ))} |
| 98 | + </div> |
| 99 | + </div> |
| 100 | + </div> |
| 101 | + ); |
| 102 | + |
| 103 | + return ( |
| 104 | + <AppShell safeArea className="bg-background"> |
| 105 | + <Header |
| 106 | + logo={logo} |
| 107 | + actions={actions} |
| 108 | + nav={nav} |
| 109 | + theme={theme} |
| 110 | + behavior="reveal-nav-context" |
| 111 | + title="Experience the Future" |
| 112 | + subtitle="The most powerful app shell for React applications." |
| 113 | + searchContent={ |
| 114 | + <div className="relative"> |
| 115 | + <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" /> |
| 116 | + <input |
| 117 | + type="text" |
| 118 | + placeholder="Search anything..." |
| 119 | + className="w-full h-10 pl-10 pr-4 rounded-xl border bg-muted/50 focus:bg-background focus:ring-2 focus:ring-primary/20 transition-all outline-none" |
| 120 | + /> |
| 121 | + </div> |
| 122 | + } |
| 123 | + mobileMenu={mobileMenu} |
| 124 | + /> |
| 125 | + |
| 126 | + <Sidebar |
| 127 | + open={sidebarOpen} |
| 128 | + onClose={() => setSidebarOpen(false)} |
| 129 | + side="left" |
| 130 | + className="border-r" |
| 131 | + > |
| 132 | + <div className="p-4 space-y-6"> |
| 133 | + <div className="flex items-center gap-3 px-2"> |
| 134 | + <div className="size-10 rounded-2xl bg-primary/10 flex items-center justify-center text-primary"> |
| 135 | + <Zap className="size-6 fill-primary" /> |
| 136 | + </div> |
| 137 | + <div> |
| 138 | + <h3 className="font-bold">AppShell Pro</h3> |
| 139 | + <p className="text-xs text-muted-foreground">Premium Edition</p> |
| 140 | + </div> |
| 141 | + </div> |
| 142 | + |
| 143 | + <NavGroup title="Main"> |
| 144 | + <NavItem icon={<Home className="size-5" />} label="Dashboard" active /> |
| 145 | + <NavItem icon={<Layout className="size-5" />} label="Layouts" badge={12} /> |
| 146 | + <NavItem icon={<Smartphone className="size-5" />} label="Mobile" /> |
| 147 | + </NavGroup> |
| 148 | + |
| 149 | + <NavGroup title="Features"> |
| 150 | + <NavItem icon={<Shield className="size-5" />} label="Security" /> |
| 151 | + <NavItem icon={<Palette className="size-5" />} label="Themes" /> |
| 152 | + <NavItem icon={<Sparkles className="size-5" />} label="Animations" /> |
| 153 | + </NavGroup> |
| 154 | + </div> |
| 155 | + </Sidebar> |
| 156 | + |
| 157 | + <Content className="max-w-4xl mx-auto px-4 py-8"> |
| 158 | + <div className="space-y-10"> |
| 159 | + {/* Welcome Card */} |
| 160 | + <div className="relative overflow-hidden rounded-3xl bg-primary p-8 text-primary-foreground shadow-2xl shadow-primary/20"> |
| 161 | + <div className="relative z-10 max-w-md"> |
| 162 | + <h2 className="text-3xl font-bold tracking-tight">Welcome to the Pro Showcase</h2> |
| 163 | + <p className="mt-4 text-primary-foreground/80 leading-relaxed"> |
| 164 | + This example demonstrates all the power of appshell-react: |
| 165 | + reveal animations, spring-based motion, safe areas, and |
| 166 | + premium UI components working in harmony. |
| 167 | + </p> |
| 168 | + <button className="mt-6 inline-flex items-center gap-2 bg-white px-5 py-2.5 rounded-xl text-primary font-bold shadow-lg hover:scale-105 active:scale-95 transition-transform"> |
| 169 | + Get Started |
| 170 | + <ChevronRight className="size-4" /> |
| 171 | + </button> |
| 172 | + </div> |
| 173 | + {/* Abstract Background Shapes */} |
| 174 | + <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 size-64 bg-white/10 rounded-full blur-3xl" /> |
| 175 | + <div className="absolute bottom-0 left-0 translate-y-1/4 -translate-x-1/4 size-96 bg-black/10 rounded-full blur-3xl" /> |
| 176 | + </div> |
| 177 | + |
| 178 | + {/* Feature Grid */} |
| 179 | + <div className="grid gap-6 sm:grid-cols-2"> |
| 180 | + {[ |
| 181 | + { |
| 182 | + icon: Home, |
| 183 | + title: "Responsive Sidebar", |
| 184 | + desc: "Touch-optimized sidebar with seamless transitions.", |
| 185 | + color: "bg-blue-500/10 text-blue-500" |
| 186 | + }, |
| 187 | + { |
| 188 | + icon: Layout, |
| 189 | + title: "Reveal Headers", |
| 190 | + desc: "Intelligent headers that hide on scroll and reveal on up-swipe.", |
| 191 | + color: "bg-purple-500/10 text-purple-500" |
| 192 | + }, |
| 193 | + { |
| 194 | + icon: Smartphone, |
| 195 | + title: "Safe Area Support", |
| 196 | + desc: "Perfect layout on devices with notches and home indicators.", |
| 197 | + color: "bg-emerald-500/10 text-emerald-500" |
| 198 | + }, |
| 199 | + { |
| 200 | + icon: Sparkles, |
| 201 | + title: "Premium Motion", |
| 202 | + desc: "Powered by Framer Motion for that high-end interactive feel.", |
| 203 | + color: "bg-orange-500/10 text-orange-500" |
| 204 | + }, |
| 205 | + ].map((f, i) => ( |
| 206 | + <div key={i} className="group p-6 rounded-2xl border bg-card hover:bg-accent/50 transition-all hover:shadow-xl hover:shadow-black/5"> |
| 207 | + <div className={cn("size-12 rounded-xl flex items-center justify-center mb-4 transition-transform group-hover:scale-110", f.color)}> |
| 208 | + <f.icon className="size-6" /> |
| 209 | + </div> |
| 210 | + <h3 className="text-lg font-bold mb-2">{f.title}</h3> |
| 211 | + <p className="text-sm text-muted-foreground leading-relaxed">{f.desc}</p> |
| 212 | + </div> |
| 213 | + ))} |
| 214 | + </div> |
| 215 | + |
| 216 | + {/* Long Content for Scroll Testing */} |
| 217 | + <div className="space-y-8 pb-20"> |
| 218 | + <h3 className="text-2xl font-bold tracking-tight px-2">Recent Activity</h3> |
| 219 | + {[1, 2, 3, 4, 5, 6].map((i) => ( |
| 220 | + <div key={i} className="flex gap-4 p-4 rounded-2xl border bg-muted/30"> |
| 221 | + <div className="size-12 rounded-full bg-muted shrink-0" /> |
| 222 | + <div className="flex-1 space-y-2"> |
| 223 | + <div className="h-4 w-1/3 bg-muted rounded" /> |
| 224 | + <div className="h-3 w-full bg-muted/60 rounded" /> |
| 225 | + <div className="h-3 w-2/3 bg-muted/60 rounded" /> |
| 226 | + </div> |
| 227 | + </div> |
| 228 | + ))} |
| 229 | + </div> |
| 230 | + </div> |
| 231 | + </Content> |
| 232 | + |
| 233 | + <Footer behavior="auto-hide" variant="tab-bar"> |
| 234 | + <FooterItem |
| 235 | + icon={<Home className="size-6" />} |
| 236 | + label="Home" |
| 237 | + active={activeTab === "home"} |
| 238 | + onClick={() => setActiveTab("home")} |
| 239 | + /> |
| 240 | + <FooterItem |
| 241 | + icon={<Search className="size-6" />} |
| 242 | + label="Explore" |
| 243 | + active={activeTab === "explore"} |
| 244 | + onClick={() => setActiveTab("explore")} |
| 245 | + /> |
| 246 | + <FooterItem |
| 247 | + icon={<PlusSquare className="size-6" />} |
| 248 | + label="Create" |
| 249 | + active={activeTab === "create"} |
| 250 | + onClick={() => setActiveTab("create")} |
| 251 | + /> |
| 252 | + <FooterItem |
| 253 | + icon={<Heart className="size-6" />} |
| 254 | + label="Activity" |
| 255 | + active={activeTab === "activity"} |
| 256 | + onClick={() => setActiveTab("activity")} |
| 257 | + badge={5} |
| 258 | + /> |
| 259 | + <FooterItem |
| 260 | + icon={<Menu className="size-6" />} |
| 261 | + label="Menu" |
| 262 | + active={sidebarOpen} |
| 263 | + onClick={() => setSidebarOpen(true)} |
| 264 | + /> |
| 265 | + </Footer> |
| 266 | + </AppShell> |
| 267 | + ); |
| 268 | +} |
0 commit comments