File size: 2,460 Bytes
00a912e | 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 | import { useState } from 'react'
import { UserRound } from 'lucide-react'
import { LIMITS } from '@music-together/shared'
import {
ResponsiveDialog,
ResponsiveDialogBody,
ResponsiveDialogContent,
ResponsiveDialogDescription,
ResponsiveDialogHeader,
ResponsiveDialogTitle,
} from '@/components/ui/responsive-dialog'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { storage } from '@/lib/storage'
interface NicknameDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onConfirm: (nickname: string) => void
}
export function NicknameDialog({ open, onOpenChange, onConfirm }: NicknameDialogProps) {
const [nickname, setNickname] = useState(storage.getNickname())
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault()
const trimmed = nickname.trim()
if (!trimmed) return
storage.setNickname(trimmed)
onConfirm(trimmed)
}
// Sync from storage every time the dialog opens
const handleOpenChange = (nextOpen: boolean) => {
if (nextOpen) {
setNickname(storage.getNickname())
}
onOpenChange(nextOpen)
}
return (
<ResponsiveDialog open={open} onOpenChange={handleOpenChange}>
<ResponsiveDialogContent className="sm:max-w-sm">
<ResponsiveDialogHeader>
<ResponsiveDialogTitle className="flex items-center gap-2 text-lg">
<UserRound className="h-5 w-5 text-primary" />
设置昵称
</ResponsiveDialogTitle>
<ResponsiveDialogDescription>加入房间前，请先设置你的昵称</ResponsiveDialogDescription>
</ResponsiveDialogHeader>
<ResponsiveDialogBody>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="nickname-input">昵称</Label>
<Input
id="nickname-input"
placeholder="你的昵称..."
value={nickname}
onChange={(e) => setNickname(e.target.value)}
maxLength={LIMITS.NICKNAME_MAX_LENGTH}
autoFocus
/>
</div>
<Button type="submit" className="w-full" disabled={!nickname.trim()}>
确认并加入
</Button>
</form>
</ResponsiveDialogBody>
</ResponsiveDialogContent>
</ResponsiveDialog>
)
}
|