File size: 3,010 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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | "use client";
import type { ElementType, ReactNode } from "react";
import { Search, X } from "lucide-react";
export function WorkspaceSearch({
value,
onChange,
placeholder,
}: {
value: string;
onChange: (value: string) => void;
placeholder: string;
}) {
return (
<label className="flex min-h-10 items-center gap-2 rounded-2xl border border-white/[0.08] bg-white/[0.035] px-3 text-white/42 focus-within:border-white/[0.18] focus-within:text-white/70">
<Search className="size-3.5 shrink-0" />
<span className="sr-only">{placeholder}</span>
<input
value={value}
onChange={(event) => onChange(event.target.value)}
placeholder={placeholder}
className="min-w-0 flex-1 bg-transparent text-sm text-white outline-none placeholder:text-white/30"
/>
{value ? (
<button
type="button"
onClick={() => onChange("")}
aria-label="Clear search"
className="grid size-5 shrink-0 place-items-center rounded-full text-white/40 transition hover:bg-white/10 hover:text-white"
>
<X className="size-3.5" />
</button>
) : null}
</label>
);
}
export function ToolCard({
icon: Icon,
label,
description,
onClick,
disabled,
}: {
icon: ElementType;
label: string;
description: string;
onClick: () => void;
disabled?: boolean;
}) {
return (
<button
type="button"
onClick={onClick}
disabled={disabled}
className="group flex min-h-[4.4rem] items-start gap-3 rounded-2xl border border-white/[0.075] bg-white/[0.025] p-3 text-left transition hover:border-white/[0.16] hover:bg-white/[0.05] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-42"
>
<span className="grid size-9 shrink-0 place-items-center rounded-xl border border-white/[0.08] bg-white/[0.035] text-white/62 transition group-hover:text-white">
<Icon className="size-4" />
</span>
<span className="min-w-0">
<span className="block text-sm font-semibold text-white/84">{label}</span>
<span className="mt-1 line-clamp-2 block text-xs leading-5 text-white/38">{description}</span>
</span>
</button>
);
}
export function PanelBlock({
title,
children,
actionLabel,
onAction,
}: {
title: string;
children: ReactNode;
actionLabel?: string;
onAction?: () => void;
}) {
return (
<section className="mb-3 rounded-[1.25rem] border border-white/[0.075] bg-[#080808]/88 p-3">
<div className="mb-3 flex items-center justify-between gap-3">
<p className="text-[11px] font-bold uppercase tracking-[0.16em] text-white/38">{title}</p>
{actionLabel && onAction ? (
<button type="button" onClick={onAction} className="text-[11px] font-bold text-white/62 transition hover:text-white">
{actionLabel}
</button>
) : null}
</div>
{children}
</section>
);
}
|