| import Image from "next/image"; |
| import { MessageCircle, NotebookTabs } from "lucide-react"; |
| import LiquidGlass from "liquid-glass-react"; |
| import { cn } from "@/lib/utils"; |
|
|
| type WorkspaceEmptyStateProps = { |
| className?: string; |
| }; |
|
|
| export function WorkspaceEmptyState({ className }: WorkspaceEmptyStateProps) { |
| return ( |
| <LiquidGlass |
| blurAmount={0.05} |
| saturation={130} |
| elasticity={0.2} |
| displacementScale={35} |
| aberrationIntensity={1.8} |
| cornerRadius={24} |
| mode="standard" |
| className={cn( |
| "relative isolate flex min-h-[370px] items-center justify-center overflow-hidden rounded-[24px] border border-white/[0.075] bg-[radial-gradient(circle_at_50%_18%,rgba(124,58,237,0.24),transparent_30%),radial-gradient(circle_at_16%_78%,rgba(76,29,149,0.16),transparent_34%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.018))] px-5 py-9 shadow-[0_24px_90px_rgba(0,0,0,0.3),inset_0_1px_0_rgba(255,255,255,0.055)] md:h-full md:min-h-0", |
| className, |
| )} |
| > |
| <div className="pointer-events-none absolute left-1/2 top-10 h-52 w-52 -translate-x-1/2 rounded-full bg-violet-500/18 blur-[76px]" aria-hidden="true" /> |
| <div className="pointer-events-none absolute inset-x-8 top-12 h-px bg-gradient-to-r from-transparent via-violet-300/26 to-transparent" aria-hidden="true" /> |
| <div className="pointer-events-none absolute inset-x-10 bottom-10 h-px bg-gradient-to-r from-transparent via-white/8 to-transparent" aria-hidden="true" /> |
| |
| <div className="relative z-10 mx-auto max-w-[560px] text-center"> |
| <div className="relative mx-auto grid size-[78px] place-items-center"> |
| <span className="absolute inset-[-18px] rounded-full border border-violet-300/10" aria-hidden="true" /> |
| <span className="absolute inset-[-9px] rounded-full border border-violet-400/18 shadow-[0_0_30px_rgba(124,58,237,0.28)]" aria-hidden="true" /> |
| <span className="absolute h-[2px] w-[116px] rounded-full bg-gradient-to-r from-transparent via-violet-300/55 to-transparent" aria-hidden="true" /> |
| <div className="relative grid size-[74px] place-items-center rounded-[26px] border border-violet-300/18 bg-violet-400/[0.055] shadow-[0_0_54px_rgba(124,58,237,0.34),inset_0_1px_0_rgba(255,255,255,0.06)]"> |
| <Image |
| src="/docdoe-logo-mark.png" |
| alt="" |
| width={46} |
| height={46} |
| className="object-contain mix-blend-screen" |
| priority |
| /> |
| </div> |
| </div> |
| |
| <h1 className="mt-7 text-[26px] font-semibold leading-tight tracking-[-0.02em] text-white sm:text-[30px]"> |
| Electromagnetic Induction selected. |
| </h1> |
| <p className="mx-auto mt-3 max-w-[500px] text-[14px] leading-6 text-white/55"> |
| Ask DocDoe about this source or unlock Studio tools to generate notes, quizzes, flashcards and exam answers. |
| </p> |
| |
| <div className="mt-7 flex flex-col items-center justify-center gap-3 sm:flex-row"> |
| <button |
| type="button" |
| className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-2xl border border-violet-200/25 bg-gradient-to-r from-violet-600 via-purple-500 to-fuchsia-500 px-5 text-[13px] font-bold text-white shadow-[0_0_34px_rgba(124,58,237,0.36)] transition hover:brightness-110 sm:w-auto" |
| > |
| <MessageCircle className="size-4" strokeWidth={1.9} aria-hidden="true" /> |
| Ask DocDoe |
| </button> |
| <button |
| type="button" |
| className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-2xl border border-violet-300/18 bg-violet-400/[0.08] px-5 text-[13px] font-semibold text-violet-100 transition hover:border-violet-300/32 hover:bg-violet-400/[0.12] sm:w-auto" |
| > |
| <NotebookTabs className="size-4" strokeWidth={1.9} aria-hidden="true" /> |
| Generate Smart Notes |
| </button> |
| </div> |
| </div> |
| </LiquidGlass> |
| ); |
| } |
|
|
