File size: 4,058 Bytes
65d68f5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | 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>
);
}
|