224 lines
8.6 KiB
TypeScript
224 lines
8.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { DashboardHeader } from "@/components/dashboard-header"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { mockUser } from "@/lib/mock-data"
|
|
import { User, Briefcase, GraduationCap, Award, Plus, X } from "lucide-react"
|
|
|
|
export default function PerfilPage() {
|
|
const [skills, setSkills] = useState(["React", "TypeScript", "Node.js", "Python"])
|
|
const [newSkill, setNewSkill] = useState("")
|
|
const [saved, setSaved] = useState(false)
|
|
|
|
const addSkill = () => {
|
|
if (newSkill.trim() && !skills.includes(newSkill.trim())) {
|
|
setSkills([...skills, newSkill.trim()])
|
|
setNewSkill("")
|
|
}
|
|
}
|
|
|
|
const removeSkill = (skill: string) => {
|
|
setSkills(skills.filter((s) => s !== skill))
|
|
}
|
|
|
|
const handleSave = () => {
|
|
setSaved(true)
|
|
setTimeout(() => setSaved(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<DashboardHeader />
|
|
|
|
<main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="max-w-4xl mx-auto space-y-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-foreground mb-2">Meu Perfil</h1>
|
|
<p className="text-muted-foreground">Mantenha suas informações atualizadas</p>
|
|
</div>
|
|
|
|
{/* Profile Picture */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<User className="h-5 w-5" />
|
|
Foto de Perfil
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex items-center gap-6">
|
|
<Avatar className="h-24 w-24">
|
|
<AvatarImage src="/placeholder.svg" />
|
|
<AvatarFallback className="text-2xl">{mockUser.name.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="space-y-2">
|
|
<Button variant="outline">Alterar foto</Button>
|
|
<p className="text-sm text-muted-foreground">JPG, PNG ou GIF. Máximo 2MB.</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Personal Info */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<User className="h-5 w-5" />
|
|
Informações Pessoais
|
|
</CardTitle>
|
|
<CardDescription>Suas informações básicas</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="name">Nome completo</Label>
|
|
<Input id="name" defaultValue={mockUser.name} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">E-mail</Label>
|
|
<Input id="email" type="email" defaultValue={mockUser.email} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="phone">Telefone</Label>
|
|
<Input id="phone" placeholder="(11) 99999-9999" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="location">Localização</Label>
|
|
<Input id="location" placeholder="São Paulo, SP" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="bio">Sobre mim</Label>
|
|
<Textarea id="bio" placeholder="Conte um pouco sobre você e sua experiência profissional..." rows={4} />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Professional Info */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Briefcase className="h-5 w-5" />
|
|
Informações Profissionais
|
|
</CardTitle>
|
|
<CardDescription>Sua experiência e área de atuação</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="area">Área de atuação</Label>
|
|
<Input id="area" defaultValue={mockUser.area} />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="experience">Anos de experiência</Label>
|
|
<Input id="experience" type="number" placeholder="5" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="current-role">Cargo atual</Label>
|
|
<Input id="current-role" placeholder="Desenvolvedor Full Stack Sênior" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="linkedin">LinkedIn</Label>
|
|
<Input id="linkedin" placeholder="https://linkedin.com/in/seu-perfil" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="portfolio">Portfolio / GitHub</Label>
|
|
<Input id="portfolio" placeholder="https://github.com/seu-usuario" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Skills */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Award className="h-5 w-5" />
|
|
Habilidades
|
|
</CardTitle>
|
|
<CardDescription>Adicione suas principais competências</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex flex-wrap gap-2">
|
|
{skills.map((skill) => (
|
|
<Badge key={skill} variant="secondary" className="gap-1">
|
|
{skill}
|
|
<button onClick={() => removeSkill(skill)} className="ml-1 hover:text-destructive">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Input
|
|
placeholder="Adicionar habilidade..."
|
|
value={newSkill}
|
|
onChange={(e) => setNewSkill(e.target.value)}
|
|
onKeyPress={(e) => e.key === "Enter" && (e.preventDefault(), addSkill())}
|
|
/>
|
|
<Button onClick={addSkill} variant="outline">
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Education */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<GraduationCap className="h-5 w-5" />
|
|
Formação Acadêmica
|
|
</CardTitle>
|
|
<CardDescription>Sua educação e certificações</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="degree">Grau de escolaridade</Label>
|
|
<Input id="degree" placeholder="Bacharelado em Ciência da Computação" />
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="institution">Instituição</Label>
|
|
<Input id="institution" placeholder="Universidade de São Paulo" />
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="start-year">Ano de início</Label>
|
|
<Input id="start-year" type="number" placeholder="2015" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="end-year">Ano de conclusão</Label>
|
|
<Input id="end-year" type="number" placeholder="2019" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Save Button */}
|
|
<div className="flex justify-end gap-4">
|
|
<Button variant="outline">Cancelar</Button>
|
|
<Button onClick={handleSave} disabled={saved}>
|
|
{saved ? "Salvo!" : "Salvar alterações"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|