Import source: vault/components/privacy-toggle

Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
2026-09-18 23:17:51 +03:30
parent a5d5209dc5
commit 65ae52cdb7
1 changed files with 74 additions and 0 deletions
@@ -0,0 +1,74 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Lock, Link as LinkIcon } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { PrivacyType } from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+interface PrivacyToggleProps {
+  value: PrivacyType;
+  onChange: (value: PrivacyType) => void;
+  password: string;
+  onPasswordChange: (password: string) => void;
+  passwordPlaceholder?: string;
+}
+
+export function PrivacyToggle({
+  value,
+  onChange,
+  password,
+  onPasswordChange,
+  passwordPlaceholder = "Enter a password...",
+}: PrivacyToggleProps) {
+  return (
+    <div>
+      <div className="flex rounded-lg border border-border/50 bg-muted/50 p-1 gap-1">
+        <button
+          type="button"
+          onClick={() => onChange("secret")}
+          className={cn(
+            "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all",
+            value === "secret"
+              ? "bg-primary text-primary-foreground shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          <LinkIcon className="h-3.5 w-3.5" />
+          Secret Link
+        </button>
+        <button
+          type="button"
+          onClick={() => onChange("password")}
+          className={cn(
+            "flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-all",
+            value === "password"
+              ? "bg-amber-500 text-white shadow-sm"
+              : "text-muted-foreground hover:text-foreground"
+          )}
+        >
+          <Lock className="h-3.5 w-3.5" />
+          Password
+        </button>
+      </div>
+
+      {value === "password" && (
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={{ duration: 0.2 }}
+          className="overflow-hidden"
+        >
+          <Input
+            type="text"
+            placeholder={passwordPlaceholder}
+            value={password}
+            onChange={(e) => onPasswordChange(e.target.value)}
+            className="mt-3 h-10 bg-muted/50 border-border/50 focus:border-amber-500/50"
+          />
+        </motion.div>
+      )}
+    </div>
+  );
+}