Edit Professional Details

Buttons

About

a dialog box to edit proffesinal details

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Edit Professional Details to your project and fits it to your theme.

Code

How Edit Professional Details is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card.jsx";
import {Github, Linkedin, Mail, Map, MapPin} from "lucide-react";
import {Button} from "@/components/ui/button.jsx";
import {useState} from "react";
import { EditPersonalInfo } from "@/components/ui/edit-professional-details"

export default function Profile(){
    const [profile,setProfile] = useState({
        img:"https://cdn.21st.dev/assets/mirror/60/60a78914033c8e6b417d2f6ce5cf81dcc37c9247e03432bbf81c63e1f5ecfbc3.jpg",
        fullName:"Manoj",
        summary:"Engineer in the field of Computer Science from Pragati Engineering College.",
        id:"rayimanoj8",
        location:"Kakinada",
        linkedin:"https://linkedin.com/in/rayimanoj8",
        github:"https://github.com/rayimanoj8",
        mail:"rayimanoj8@gmail.com",
    })
    return (
        <div className="w-[400px] mx-auto space-y-3 my-4">
            <Card className="relative">
                <CardHeader>
                    <CardTitle>
                        Professional Details
                    </CardTitle>
                </CardHeader>
                <CardContent >
                    <EditPersonalInfo profile={profile} setProfile={setProfile}/>
                    <ul className="flex flex-col">
                        <li>
                            <Button
                                variant="link"
                            >
                                <Mail/> {profile.mail}
                            </Button>
                        </li>
                        <li>
                            <Button
                                variant="link"
                            >
                                <Linkedin/> {profile.linkedin}
                            </Button>
                        </li>
                        <li>
                            <Button
                                variant="link"
                            >
                                <Github/> {profile.github}
                            </Button>
                        </li>
                        <li>
                            <div className="px-4 py-2 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0">
                                <MapPin /> {profile.location}
                            </div>
                        </li>
                    </ul>
                </CardContent>
            </Card>
        </div>
    )
}