[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import UserProfileCard from "@/components/user-profile-card" export default function Home() { return (

{/* Dark overlay */}

{/* Main content */}

{/* Footer */}

Designed and Developed with ❤️ by{" "} Dollar Gill

) } [V0_FILE]png:file="public/abstract-gradient-dark-blue-purple.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-gradient-dark-blue-purple-Hth2aOMFg323MJ0FR232mgoA3xNIKo.png" isMerged="true" [V0_FILE]png:file="public/professional-woman-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-portrait-aRtFhI6toDZYfQKtZxHYSmAPGsdCBC.png" isMerged="true" [V0_FILE]png:file="public/abstract-design-pattern.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-design-pattern-mPeHvObFXrKYMCgsSQanjSepGQjtU8.png" isMerged="true" [V0_FILE]typescriptreact:file="components/user-profile-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { MapPin, Calendar, Mail, Globe, Users, Heart, MessageCircle, Settings, Edit3, Youtube, X, Check, } from "lucide-react" interface UserProfile { name: string username: string bio: string location: string joinDate: string email: string phone: string website: string followers: number following: number posts: number likes: number avatar: string coverImage: string skills: string[] isFollowing: boolean } const mockUser: UserProfile = { name: "Diecast by Dollar", username: "@DiecastByDollar", bio: "Hey I'm Dollar Gill! 🚗 I collect Hot Wheels, Jada, Matchbox, Maisto, Pink Slips and other diecast cars. Passionate about miniature automotive art! 🏎️✨", location: "Sydney, Australia", joinDate: "August 2025", email: "hi@diecastbydollar.com", phone: "+1 (555) 123-4567", website: "www.DiecastByDollar.com", followers: 2847, following: 892, posts: 156, likes: 12400, avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/21616217_90.jpg-YQw7j36MOYnX34E2mXOCDDXrwsk2Wz.jpeg", coverImage: "/abstract-design-pattern.png", skills: ["Hot Wheels", "Maisto", "Matchbox", "Jada", "Pink Slips"], isFollowing: false, } export default function UserProfileCard() { const [user, setUser] = useState(mockUser) const [isLoading, setIsLoading] = useState(false) const [isEditing, setIsEditing] = useState(false) const [isLiked, setIsLiked] = useState(false) const [editForm, setEditForm] = useState(mockUser) const handleFollow = async () => { setIsLoading(true) await new Promise((resolve) => setTimeout(resolve, 1000)) setUser((prev) => ({ ...prev, isFollowing: !prev.isFollowing })) setIsLoading(false) } const handleLike = () => { setIsLiked(!isLiked) } const handleEdit = () => { setIsEditing(true) setEditForm(user) } const handleSave = () => { setUser(editForm) setIsEditing(false) } const handleCancel = () => { setEditForm(user) setIsEditing(false) } const formatNumber = (num: number) => { if (num >= 1000) { return (num / 1000).toFixed(1) + "k" } return num.toString() } return (

{/* Profile Content */}

{/* Avatar and Basic Info */}

{/* Avatar */}

{/* Name, Username, and YouTube Button */}

{isEditing ? (

setEditForm({ ...editForm, name: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-lg font-semibold" placeholder="Name" /> setEditForm({ ...editForm, username: e.target.value })} className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm" placeholder="Username" />

) : ( <>

{user.name}

{user.username}

)}

{/* Settings Button */}

{isEditing ? (

) : ( )}

{/* Bio */} {isEditing ? (

setEditForm({ ...editForm, bio: e.target.value })}
            className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm leading-relaxed resize-none"
            placeholder="Bio"
            rows={3}
          />
        ) : (
          <p className="text-white/85 text-sm leading-relaxed">{user.bio}</p>
        )}

{/* Skills */}
        <div className="flex flex-wrap gap-1.5">
          {isEditing ? (
            <div className="w-full">
              <Input
                value={editForm.skills.join(", ")}
                onChange={(e) =>
                  setEditForm({ ...editForm, skills: e.target.value.split(", ").filter((s) => s.trim()) })
                }
                className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm"
                placeholder="Skills (comma separated)"
              />
            </div>
          ) : (
            user.skills.map((skill, index) => (
              <Badge
                key={index}
                className="bg-blue-500/20 hover:bg-blue-500/30 border border-blue-400/30 text-blue-100 text-xs px-2.5 py-1 transition-all duration-300 font-medium"
              >
                {skill}
              </Badge>
            ))
          )}
        </div>

{/* Stats */}
        <div className="grid grid-cols-4 gap-3 py-2">
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.posts)}</p>
            <p className="text-white/60 text-xs font-medium">Posts</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.followers)}</p>
            <p className="text-white/60 text-xs font-medium">Followers</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.following)}</p>
            <p className="text-white/60 text-xs font-medium">Following</p>
          </div>
          <div className="text-center space-y-1">
            <p className="text-white font-semibold text-base">{formatNumber(user.likes)}</p>
            <p className="text-white/60 text-xs font-medium">Likes</p>
          </div>
        </div>

{/* Contact Info */}
        <div className="space-y-2.5 bg-white/5 rounded-xl p-4 border border-white/10">
          {isEditing ? (
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.location}
                  onChange={(e) => setEditForm({ ...editForm, location: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Location"
                />
              </div>
              <div className="flex items-center gap-3">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.joinDate}
                  onChange={(e) => setEditForm({ ...editForm, joinDate: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Join Date"
                />
              </div>
              <div className="flex items-center gap-3">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.email}
                  onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Email"
                />
              </div>
              <div className="flex items-center gap-3">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <Input
                  value={editForm.website}
                  onChange={(e) => setEditForm({ ...editForm, website: e.target.value })}
                  className="bg-white/10 border-white/20 text-white placeholder:text-white/50 text-sm flex-1"
                  placeholder="Website"
                />
              </div>
            </div>
          ) : (
            <>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <MapPin className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.location}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Calendar className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">Joined {user.joinDate}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Mail className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.email}</span>
              </div>
              <div className="flex items-center gap-3 text-white/85 text-sm">
                <Globe className="h-4 w-4 text-blue-400 flex-shrink-0" />
                <span className="font-medium">{user.website}</span>
              </div>
            </>
          )}
        </div>

{/* Action Buttons */}
        <div className="flex gap-2.5 pt-1">
          <Button
            onClick={handleFollow}
            disabled={isLoading}
            className="flex-1 bg-blue-500 hover:bg-blue-600 border-0 text-white font-medium transition-all duration-300 hover:scale-[1.02] shadow-lg hover:shadow-xl"
          >
            {isLoading ? <Users className="h-4 w-4 animate-spin mr-2" /> : <Users className="h-4 w-4 mr-2" />}
            {user.isFollowing ? "Following" : "Follow"}
          </Button>

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This