diff --git a/CarouselSection.tsx b/CarouselSection.tsx new file mode 100644 index 0000000..56e9ee9 --- /dev/null +++ b/CarouselSection.tsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import { ChevronLeft, ChevronRight } from 'lucide-react'; +import { Button } from "@/components/ui/button"; +import { Card, CardContent } from "@/components/ui/card"; + +interface CarouselSectionProps { + title: string; + items: any[]; + renderItem: (item: any, index: number) => React.ReactNode; +} + +export function CarouselSection({ title, items, renderItem }: CarouselSectionProps) { + const [startIndex, setStartIndex] = useState(0); + + const handlePrev = () => { + setStartIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : items.length - 2)); + }; + + const handleNext = () => { + setStartIndex((prevIndex) => (prevIndex < items.length - 2 ? prevIndex + 1 : 0)); + }; + + return ( +
+

{title}

+
+
+ {items.slice(startIndex, startIndex + 2).map((item, index) => renderItem(item, index))} +
+ + +
+
+ ); +} \ No newline at end of file diff --git a/个人资料.tsx b/个人资料.tsx new file mode 100644 index 0000000..22dc35d --- /dev/null +++ b/个人资料.tsx @@ -0,0 +1,165 @@ +import React, { useState } from 'react' +import { User, userDatabase } from '@/lib/userDatabase' +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { Button } from "@/components/ui/button" +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" + +export function 个人资料({ onClose }: { onClose: () => void }) { + const [user, setUser] = useState({ + id: Date.now(), + name: '', + age: 0, + avatar: '', + location: '', + budget: 0, + bio: '', + occupation: '', + travelStyle: '', + email: '', + phone: '', + socialMedia: { instagram: '', website: '' }, + languages: [], + interests: [] + }) + const [isLoading, setIsLoading] = useState(false) + const [error, setError] = useState(null) + + const handleInputChange = (e: React.ChangeEvent) => { + const { name, value } = e.target + setUser(prevUser => { + if (name.startsWith('socialMedia.')) { + const socialMediaField = name.split('.')[1] + return { ...prevUser, socialMedia: { ...prevUser.socialMedia, [socialMediaField]: value } } + } + return { ...prevUser, [name]: value } + }) + } + + const handleAvatarUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0] + if (file) { + const reader = new FileReader() + reader.onloadend = () => { + setUser(prevUser => ({ ...prevUser, avatar: reader.result as string })) + } + reader.readAsDataURL(file) + } + } + + const handleSave = async () => { + setIsLoading(true); + setError(null); + + try { + const response = await fetch(`/api/users/${user.id}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(user), + }); + + if (!response.ok) { + throw new Error('Failed to update user'); + } + + const updatedUser = await response.json(); + console.log('Profile updated successfully', updatedUser); + onClose(); + } catch (error) { + console.error('Error updating profile:', error); + setError('更新个人资料失败,请稍后再试。'); + } finally { + setIsLoading(false); + } + }; + + return ( +
+ + + 个人资料 + + + +
+
+ + {user.avatar && } + {user.name[0]} + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +