Styled Paper - Copy this React, Mui Component to your project

Create a new generation for service buyer profile detail page there we will have options to the thrird ui is when service buyer edit is clicked open a pop up menu for edit with the form then we we select next we can see the about us text area there on so build it like there import { Pencil } from 'lucide react' import Link from "next/link" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { EditProfileDialog } from "@/components/service buyers/edit profile dialog" export default function ServiceBuyerDetailsPage() { return ( <div className="p 6"> <div className="flex items center gap 2 mb 6 text sm text muted foreground"> <Link href="/service buyers" className="hover:underline"> Service Buyer </Link> <span>/</span> <span>Natenal Derje</span> </div> <div className="bg white rounded lg border"> <div className="p 4 flex justify between items start border b"> <h2 className="font semibold">Details</h2> <EditProfileDialog> <Button variant="outline" size="sm"> <Pencil className="h 4 w 4 mr 2" /> Edit </Button> </EditProfileDialog> </div> <div className="p 4 space y 4"> <div className="grid grid cols 2 gap 4"> <div> <div className="text sm text muted foreground">Full name</div> <div>Natenal Derje</div> </div> <div> <div className="text sm text muted foreground">Phone number</div> <div>+251963456326</div> </div> <div> <div className="text sm text muted foreground">Which services do you want</div> <div> </div> </div> <div> <div className="text sm text muted foreground">Date added</div> <div>December 5, 2024</div> </div> <div> <div className="text sm text muted foreground">Status</div> <Badge variant="success">Active</Badge> </div> </div> </div> </div> </div> ) } "use client" import * as React from "react" import { X } from 'lucide react' import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" interface EditProfileDialogProps { children: React.ReactNode } export function EditProfileDialog({ children }: EditProfileDialogProps) { const [step, setStep] = React.useState(1) const [open, setOpen] = React.useState(false) const handleNext = () => setStep(2) const handlePrevious = () => setStep(1) const handleClose = () => { setOpen(false) setStep(1) } return ( <Dialog open={open} onOpenChange={setOpen}> <DialogTrigger asChild> {children} </DialogTrigger> <DialogContent className="sm:max w [425px]"> <DialogHeader> <DialogTitle className="flex items center justify between"> <span>Edit Profile</span> <Button variant="ghost" size="icon" className="h 6 w 6 rounded md" onClick={handleClose} > <X className="h 4 w 4" /> </Button> </DialogTitle> </DialogHeader> <div className="flex justify center mb 6"> <div className="flex items center gap 2"> <div className={`h 8 w 8 rounded full flex items center justify center ${ step >= 1 ? 'bg primary text primary foreground' : 'bg muted' }`}> 1 </div> <div className="text sm">Sign up details</div> <div className="w 8 h [2px] bg muted" /> <div className={`h 8 w 8 rounded full flex items center justify center ${ step >= 2 ? 'bg primary text primary foreground' : 'bg muted' }`}> 2 </div> <div className="text sm">More details</div> </div> </div> {step === 1 ? ( <div className="space y 4"> <div className="space y 2"> <Label htmlFor="name">Full name</Label> <Input id="name" defaultValue="Natenal Derje" /> </div> <div className="space y 2"> <Label htmlFor="phone">Phone number</Label> <div className="flex gap 2"> <Select defaultValue="ET"> <SelectTrigger className="w [100px]"> <SelectValue placeholder="Country" /> </SelectTrigger> <SelectContent> <SelectItem value="ET">🇪🇹 ET</SelectItem> </SelectContent> </Select> <Input id="phone" defaultValue="+251963456326" /> </div> </div> <div className="flex justify end gap 2"> <Button variant="outline" onClick={handleClose}> Cancel </Button> <Button onClick={handleNext}> Next </Button> </div> </div> ) : ( <div className="space y 4"> <div className="space y 2"> <Label htmlFor="about">Tell us about yourself</Label> <Textarea id="about" className="min h [150px]" placeholder="Write something about yourself..." /> </div> <div className="flex justify end gap 2"> <Button variant="outline" onClick={handlePrevious}> Previous </Button> <Button onClick={handleClose}> Save </Button> </div> </div> )} </DialogContent> </Dialog> ) }