egecankomur
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import { Buildings, User } from '@/lib/icons';
|
||
|
||
import { Label } from "@/components/ui/label";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
type Scope = "company" | "personal";
|
||
|
||
export function ScopeToggle({
|
||
name = "scope",
|
||
defaultValue = "company",
|
||
label = "Kapsam",
|
||
description,
|
||
}: {
|
||
name?: string;
|
||
defaultValue?: Scope;
|
||
label?: string;
|
||
description?: string;
|
||
}) {
|
||
const [value, setValue] = useState<Scope>(defaultValue);
|
||
return (
|
||
<div className="grid gap-2">
|
||
<Label>{label}</Label>
|
||
<input type="hidden" name={name} value={value} />
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={() => setValue("company")}
|
||
className={cn(
|
||
"border-input flex flex-col items-start gap-1 rounded-md border p-3 text-left transition-colors",
|
||
value === "company"
|
||
? "border-primary bg-primary/5"
|
||
: "hover:bg-muted/50",
|
||
)}
|
||
>
|
||
<div className="flex items-center gap-2 text-sm font-medium">
|
||
<Buildings className="size-4" />
|
||
Şirket
|
||
</div>
|
||
<p className="text-muted-foreground text-xs">
|
||
Ekipteki herkes görür ve düzenleyebilir.
|
||
</p>
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setValue("personal")}
|
||
className={cn(
|
||
"border-input flex flex-col items-start gap-1 rounded-md border p-3 text-left transition-colors",
|
||
value === "personal"
|
||
? "border-primary bg-primary/5"
|
||
: "hover:bg-muted/50",
|
||
)}
|
||
>
|
||
<div className="flex items-center gap-2 text-sm font-medium">
|
||
<User className="size-4" />
|
||
Bireysel
|
||
</div>
|
||
<p className="text-muted-foreground text-xs">
|
||
Yalnızca siz görürsünüz, ekibe yansımaz.
|
||
</p>
|
||
</button>
|
||
</div>
|
||
{description && <p className="text-muted-foreground text-xs">{description}</p>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function ScopeBadge({ scope }: { scope?: Scope }) {
|
||
if (scope === "personal") {
|
||
return (
|
||
<span className="bg-violet-500/15 text-violet-700 dark:text-violet-300 border-violet-500/30 inline-flex items-center gap-1 rounded-md border px-1.5 py-0.5 text-[10px] font-medium">
|
||
<User className="size-2.5" />
|
||
Bireysel
|
||
</span>
|
||
);
|
||
}
|
||
return null; // Company is default — no badge needed
|
||
}
|