JobApplicationForm() — ui Function Reference

Architecture documentation for the JobApplicationForm() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ JobApplicationForm() — ui Function Reference

Dependency Diagram

graph TD
  3496f4cf_debc_167c_980f_7e416a5d0823["JobApplicationForm()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  3496f4cf_debc_167c_980f_7e416a5d0823 -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 3496f4cf_debc_167c_980f_7e416a5d0823 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 1641–1765

export function JobApplicationForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Job Application</CardTitle>
        <CardDescription>Apply for a position at our company</CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <div className="grid grid-cols-2 gap-4">
              <Field>
                <FieldLabel htmlFor="job-5p7-firstName-jel">
                  First Name
                </FieldLabel>
                <Input id="job-5p7-firstName-jel" placeholder="John" required />
              </Field>
              <Field>
                <FieldLabel htmlFor="job-5p7-lastName-fl0">
                  Last Name
                </FieldLabel>
                <Input id="job-5p7-lastName-fl0" placeholder="Doe" required />
              </Field>
            </div>
            <Field>
              <FieldLabel htmlFor="job-5p7-email-6cz">Email</FieldLabel>
              <Input
                id="job-5p7-email-6cz"
                type="email"
                placeholder="john@example.com"
                required
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="job-5p7-phone-389">Phone Number</FieldLabel>
              <Input
                id="job-5p7-phone-389"
                type="tel"
                placeholder="+1 (555) 123-4567"
                required
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="position-k7f">Position</FieldLabel>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="Select position" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="frontend">Frontend Developer</SelectItem>
                  <SelectItem value="backend">Backend Developer</SelectItem>
                  <SelectItem value="fullstack">
                    Full Stack Developer
                  </SelectItem>
                  <SelectItem value="designer">UI/UX Designer</SelectItem>
                  <SelectItem value="manager">Product Manager</SelectItem>
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel htmlFor="experience-5ih">
                Years of Experience
              </FieldLabel>
              <Select>
                <SelectTrigger>
                  <SelectValue placeholder="Select experience level" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="0-1">0-1 years</SelectItem>
                  <SelectItem value="2-3">2-3 years</SelectItem>
                  <SelectItem value="4-6">4-6 years</SelectItem>
                  <SelectItem value="7-10">7-10 years</SelectItem>
                  <SelectItem value="10+">10+ years</SelectItem>
                </SelectContent>
              </Select>
            </Field>
            <Field>
              <FieldLabel htmlFor="job-5p7-portfolio-u1j">
                Portfolio/LinkedIn URL
              </FieldLabel>
              <Input