Sign up changes ui
This commit is contained in:
Anushlinux
@@ -9,6 +9,7 @@ import { Textarea } from '@workspace/ui/components/textarea';
|
||||
import { Separator } from '@workspace/ui/components/separator';
|
||||
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@workspace/ui/components/form';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Briefcase, MapPin, CalendarDays, X } from 'lucide-react';
|
||||
|
||||
export default function InternshipStep({ form }: { form: any }) {
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
@@ -35,27 +36,32 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-semibold">Internships</h3>
|
||||
<Button variant="outline" onClick={() => setModalOpen(true)}>
|
||||
Add Internship
|
||||
<div className="space-y-10">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<h3 className="text-2xl font-bold text-primary">Internships</h3>
|
||||
<Button
|
||||
variant="default"
|
||||
className="rounded-full px-6 py-2 text-base font-semibold shadow-md hover:scale-105 transition-transform"
|
||||
onClick={() => setModalOpen(true)}
|
||||
>
|
||||
+ Add Internship
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Custom Modal */}
|
||||
{modalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
|
||||
<div className="bg-white rounded-lg shadow-lg w-full max-w-lg p-6 relative">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
|
||||
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-xl p-8 relative border border-gray-200 pointer-events-auto">
|
||||
<button
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
|
||||
className="absolute top-4 right-4 text-gray-400 hover:text-primary rounded-full p-2 transition-colors focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
onClick={() => setModalOpen(false)}
|
||||
aria-label="Close"
|
||||
type="button"
|
||||
>
|
||||
×
|
||||
<X size={24} />
|
||||
</button>
|
||||
<h2 className="text-xl font-bold mb-4">Add Internship Details</h2>
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<h2 className="text-2xl font-bold mb-6 text-center text-primary">Add Internship Details</h2>
|
||||
<div className="grid grid-cols-1 gap-5">
|
||||
<FormField
|
||||
control={modalForm.control}
|
||||
name="title"
|
||||
@@ -63,7 +69,7 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
<FormItem>
|
||||
<FormLabel>Title</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="e.g. SDE Intern" />
|
||||
<Input {...field} placeholder="e.g. SDE Intern" className="focus:ring-2 focus:ring-primary/40" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -76,7 +82,7 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
<FormItem>
|
||||
<FormLabel>Company</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="e.g. Google" />
|
||||
<Input {...field} placeholder="e.g. Google" className="focus:ring-2 focus:ring-primary/40" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -89,7 +95,7 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
<FormItem>
|
||||
<FormLabel>Description</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea {...field} placeholder="Describe your work..." />
|
||||
<Textarea {...field} placeholder="Describe your work..." className="focus:ring-2 focus:ring-primary/40" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -102,7 +108,7 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
<FormItem>
|
||||
<FormLabel>Location</FormLabel>
|
||||
<FormControl>
|
||||
<Input {...field} placeholder="Remote / Mumbai" />
|
||||
<Input {...field} placeholder="Remote / Mumbai" className="focus:ring-2 focus:ring-primary/40" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -116,7 +122,7 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
<FormItem>
|
||||
<FormLabel>Start Date</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
<Input type="date" {...field} className="focus:ring-2 focus:ring-primary/40" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -129,7 +135,7 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
<FormItem>
|
||||
<FormLabel>End Date</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
<Input type="date" {...field} className="focus:ring-2 focus:ring-primary/40" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
@@ -137,11 +143,13 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end mt-6 gap-2">
|
||||
<Button variant="outline" onClick={() => setModalOpen(false)}>
|
||||
<div className="flex justify-end mt-8 gap-3">
|
||||
<Button variant="outline" onClick={() => setModalOpen(false)} className="rounded-full px-5">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={addInternship}>Add</Button>
|
||||
<Button onClick={addInternship} className="rounded-full px-5">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -149,25 +157,32 @@ export default function InternshipStep({ form }: { form: any }) {
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-white/80 border border-gray-200 rounded-2xl shadow-lg p-6 space-y-6 min-h-[120px]">
|
||||
{internships.length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">No internships added yet.</p>
|
||||
<p className="text-base text-muted-foreground text-center">No internships added yet.</p>
|
||||
)}
|
||||
|
||||
{internships.map((intern: any, idx: number) => (
|
||||
<Card key={idx} className="bg-muted">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold">
|
||||
{intern.title} at {intern.company}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-1 text-sm">
|
||||
<p>{intern.location}</p>
|
||||
<p>
|
||||
{intern.startDate} to {intern.endDate}
|
||||
</p>
|
||||
<p>{intern.description}</p>
|
||||
</CardContent>
|
||||
<Card key={idx} className="bg-white border border-gray-100 rounded-xl shadow flex flex-col md:flex-row items-start md:items-center gap-4 p-4">
|
||||
<div className="flex flex-col flex-1 gap-1">
|
||||
<CardHeader className="p-0 mb-1">
|
||||
<CardTitle className="text-lg font-semibold flex items-center gap-2">
|
||||
<Briefcase size={18} className="text-primary" />
|
||||
{intern.title} <span className="text-gray-500 font-normal">@ {intern.company}</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0 space-y-1 text-sm">
|
||||
<div className="flex items-center gap-2 text-gray-600">
|
||||
<MapPin size={16} />
|
||||
<span>{intern.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-gray-600">
|
||||
<CalendarDays size={16} />
|
||||
<span>{intern.startDate} to {intern.endDate}</span>
|
||||
</div>
|
||||
<div className="text-gray-700 mt-1">{intern.description}</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user