Arnab-Afk/nextplacement
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sign up changes ui

Browse Source
This commit is contained in:
Anushlinux
2025-07-08 16:08:09 +05:30
parent 220336f3d7
commit 1ab4eb4750
5 changed files with 279 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
apps/student/app/signup/steps/AdditionalDetailsStep.tsx
View File

@@ -11,21 +11,34 @@ import {
} from '@workspace/ui/components/form';
import { Input } from '@workspace/ui/components/input';
import { Textarea } from '@workspace/ui/components/textarea';
import { useState, useEffect } from 'react';
export default function AdditionalDetailsStep({ form }: { form: any }) {
return (
<div className="space-y-4">
<h3 className="text-lg font-semibold">Additional Details</h3>
// For skills field bug fix: keep a local string state
const [skillsInput, setSkillsInput] = useState(
Array.isArray(form.getValues('skills')) ? form.getValues('skills').join(', ') : form.getValues('skills') || ''
);
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
// Keep local state in sync if form value changes externally
useEffect(() => {
const formSkills = form.getValues('skills');
const asString = Array.isArray(formSkills) ? formSkills.join(', ') : formSkills || '';
setSkillsInput(asString);
}, [form.watch('skills')]);
return (
<div className="space-y-8">
<h3 className="text-2xl font-bold mb-4 text-primary">Additional Details</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<FormField
control={form.control}
name="linkedin"
render={({ field }) => (
<FormItem>
<FormLabel>LinkedIn Profile</FormLabel>
<FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
<FormLabel className="font-semibold">LinkedIn Profile</FormLabel>
<FormControl>
<Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} />
<Input type="url" placeholder="https://linkedin.com/in/yourprofile" {...field} className="focus:ring-2 focus:ring-primary/40" />
</FormControl>
<FormDescription>Optional</FormDescription>
<FormMessage />
@@ -37,10 +50,10 @@ export default function AdditionalDetailsStep({ form }: { form: any }) {
control={form.control}
name="github"
render={({ field }) => (
<FormItem>
<FormLabel>GitHub Profile</FormLabel>
<FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
<FormLabel className="font-semibold">GitHub Profile</FormLabel>
<FormControl>
<Input type="url" placeholder="https://github.com/yourusername" {...field} />
<Input type="url" placeholder="https://github.com/yourusername" {...field} className="focus:ring-2 focus:ring-primary/40" />
</FormControl>
<FormDescription>Optional</FormDescription>
<FormMessage />
@@ -53,21 +66,18 @@ export default function AdditionalDetailsStep({ form }: { form: any }) {
control={form.control}
name="skills"
render={({ field }) => (
<FormItem>
<FormLabel>Skills</FormLabel>
<FormItem className="bg-white border border-gray-200 rounded-2xl shadow-lg p-6 flex flex-col gap-2">
<FormLabel className="font-semibold">Skills</FormLabel>
<FormControl>
<Textarea
placeholder="JavaScript, React, Node.js, Python"
className="resize-none"
value={
field.value
? Array.isArray(field.value)
? field.value.join(', ')
: field.value
: ''
}
onChange={(e) => {
className="resize-none focus:ring-2 focus:ring-primary/40"
value={skillsInput}
onChange={e => setSkillsInput(e.target.value)}
onBlur={e => {
// On blur, update the form value as an array
const value = e.target.value;
setSkillsInput(value);
const skills = value
.split(',')
.map((s) => s.trim())