CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-13 21:01:21 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add editable text component for account settings.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Developing-Gamer 2026-05-27 12:47:45 -07:00
parent 8a09b16c26
commit 3083967301
1 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
apps/dashboard/src/components/dashboard-account-settings/editable-text.tsx Normal file
View File

@ -0,0 +1,58 @@
'use client';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { PencilSimple } from "@phosphor-icons/react";
import { useState } from "react";
export function EditableText(props: { value: string, onSave?: (value: string) => void | Promise<void> }) {
const [editing, setEditing] = useState(false);
const [editingValue, setEditingValue] = useState(props.value);
return (
<div className='flex items-center gap-2'>
{editing ? (
<>
<Input
value={editingValue}
onChange={(e) => setEditingValue(e.target.value)}
className="bg-white dark:bg-zinc-900 border-black/[0.08] dark:border-white/[0.08] rounded-xl px-3 py-2 shadow-sm focus-visible:ring-black/[0.06] dark:focus-visible:ring-white/[0.06] min-w-[200px]"
/>
<Button
size='sm'
onClick={async () => {
await props.onSave?.(editingValue);
setEditing(false);
}}
className="bg-black text-white hover:bg-zinc-800 dark:bg-white dark:text-black dark:hover:bg-zinc-200 rounded-xl px-4 transition-colors duration-150"
>
Save
</Button>
<Button
size='sm'
variant='outline'
onClick={() => {
setEditingValue(props.value);
setEditing(false);
}}
className="border-black/[0.08] dark:border-white/[0.08] hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded-xl px-4 transition-colors duration-150"
>
Cancel
</Button>
</>
) : (
<>
<span className="text-base font-medium text-foreground">{props.value}</span>
<Button
onClick={() => setEditing(true)}
size='icon'
variant='ghost'
className="rounded-lg text-muted-foreground hover:text-foreground hover:bg-zinc-100 dark:hover:bg-zinc-900 h-8 w-8 p-0 transition-colors duration-150"
>
<PencilSimple className="w-4 h-4" />
</Button>
</>
)}
</div>
);
}