From 37e1080e22b3af88eb1114fa125abbd7e247863a Mon Sep 17 00:00:00 2001
From: Anonymus2000 <54113952+Nil2000@users.noreply.github.com>
Date: Wed, 16 Oct 2024 20:32:15 +0530
Subject: [PATCH] UI part done for posting jobs (#1106)

* UI part done for posting jobs

* UI updated according to settings page

* Added flag for jobs-create-page
---
 app/(app)/jobs/create/_client.tsx     | 267 ++++++++++++++++++++++++++
 app/(app)/jobs/create/page.tsx        |   7 +
 public/images/company_placeholder.png | Bin 0 -> 1767 bytes
 utils/flags.ts                        |   1 +
 4 files changed, 275 insertions(+)
 create mode 100644 app/(app)/jobs/create/_client.tsx
 create mode 100644 app/(app)/jobs/create/page.tsx
 create mode 100644 public/images/company_placeholder.png

diff --git a/app/(app)/jobs/create/_client.tsx b/app/(app)/jobs/create/_client.tsx
new file mode 100644
index 00000000..d2aaa4f5
--- /dev/null
+++ b/app/(app)/jobs/create/_client.tsx
@@ -0,0 +1,267 @@
+"use client";
+
+import { Button } from "@/components/ui-components/button";
+import {
+  Checkbox,
+  CheckboxField,
+  CheckboxGroup,
+} from "@/components/ui-components/checkbox";
+import { Divider } from "@/components/ui-components/divider";
+import { Description, Field, Label } from "@/components/ui-components/fieldset";
+import { Heading, Subheading } from "@/components/ui-components/heading";
+import { Input } from "@/components/ui-components/input";
+import {
+  Radio,
+  RadioField,
+  RadioGroup,
+} from "@/components/ui-components/radio";
+import { Strong, Text } from "@/components/ui-components/text";
+import { Textarea } from "@/components/ui-components/textarea";
+import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import React, { useRef, useState } from "react";
+
+export default function Content() {
+  const flagEnabled = isFlagEnabled(FEATURE_FLAGS.JOBS);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [imgUrl, setImgUrl] = useState<string | null>(null);
+
+  if (!flagEnabled) {
+    notFound();
+  }
+
+  return (
+    <form className="mx-auto max-w-4xl p-3 pt-8 sm:px-4">
+      <Heading level={1}>Post a job</Heading>
+      <Divider className="my-10 mt-6" />
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Company Logo</Subheading>
+          <Text>Square format is best</Text>
+        </div>
+        <Field>
+          <div className="flex items-center space-x-4">
+            <Image
+              src={imgUrl || "/images/company_placeholder.png"}
+              width={80}
+              height={80}
+              alt="Company Logo"
+              className="rounded-[10px]"
+            />
+            <div>
+              <Button
+                color="dark/white"
+                className="mt-3 rounded-md"
+                onClick={() => {
+                  fileInputRef.current?.click();
+                }}
+              >
+                Change Logo
+              </Button>
+              <Input
+                type="file"
+                id="file-input"
+                name="company-logo"
+                accept="image/png, image/gif, image/jpeg"
+                onChange={() => {}}
+                className="hidden"
+                ref={fileInputRef}
+              />
+              <Text className="mt-1 text-xs text-gray-500">
+                JPG, GIF or PNG. 1MB max.
+              </Text>
+            </div>
+          </div>
+        </Field>
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Company Name</Subheading>
+          <Text>This will be shown in the format you type it</Text>
+        </div>
+        <Field>
+          <Input
+            id="company-name"
+            type="text"
+            placeholder="Pixel Pulse Studios"
+            autoComplete="given-company-name"
+          />
+        </Field>
+        {/* Add error part after validation here */}
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Job Title</Subheading>
+          <Text>The job title for the position that you are opening</Text>
+        </div>
+        <Field>
+          <Input
+            id="job-title"
+            type="text"
+            placeholder="Reality Architect"
+            autoComplete="given-job-title"
+          />
+        </Field>
+        {/* Add error part after validation here */}
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Job Description</Subheading>
+          <Text>In markdown format</Text>
+        </div>
+        <Field>
+          <Textarea
+            id="job-description"
+            placeholder="As a Reality Architect, you'll be at the forefront of creating immersive mixed reality experiences that blur the line between the digital and physical..."
+            resizable={false}
+            rows={3}
+          />
+        </Field>
+        {/* Add error part after validation here */}
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Locations</Subheading>
+          <Text>
+            Where is the job location? (“Dublin”, “Remote USA”, “Anywhere”).
+          </Text>
+        </div>
+        <Field>
+          <Input placeholder="Dublin (2 days in the office per week)" />
+          <CheckboxGroup className="mt-3">
+            <CheckboxField>
+              <Checkbox name="remote" value="is_remote" />
+              <Label>Work is remote</Label>
+            </CheckboxField>
+            <CheckboxField>
+              <Checkbox name="relocation" value="is_relocation_package" />
+              <Label>Relocation package given</Label>
+            </CheckboxField>
+            <CheckboxField>
+              <Checkbox name="visa" value="is_visa_sponsored" />
+              <Label>Visa sponsorship provided</Label>
+            </CheckboxField>
+          </CheckboxGroup>
+        </Field>
+        {/* Add error part after validation here */}
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Application form URL</Subheading>
+          <Text>A link to your website (optional)</Text>
+        </div>
+        <Field>
+          <Input
+            id="app-url"
+            type="text"
+            autoComplete="url"
+            placeholder="https://example.com"
+          />
+        </Field>
+        {/* Add error part after validation here */}
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Job Type</Subheading>
+          <Text>Full-time, part-time or freelancer</Text>
+        </div>
+        <Field>
+          <RadioGroup defaultValue="full_time">
+            <RadioField>
+              <Radio value="full_time" />
+              <Label>Full-time (€150)</Label>
+              <Description>Salaried Position</Description>
+            </RadioField>
+            <RadioField>
+              <Radio value="part_time" />
+              <Label>Part-time (€100)</Label>
+              <Description>
+                Salaried position but less than 4 days per week
+              </Description>
+            </RadioField>
+            <RadioField>
+              <Radio value="freelancer" />
+              <Label>Freelancer (€100)</Label>
+              <Description>Shorter-term usually or fixed term/job</Description>
+            </RadioField>
+            <RadioField>
+              <Radio value="other_role_type" />
+              <Label>Other (€100)</Label>
+              <Description>
+                Looking for a co-founder or something else we haven’t thought of
+              </Description>
+            </RadioField>
+          </RadioGroup>
+        </Field>
+        {/* Add error part after validation here */}
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
+        <div className="space-y-1">
+          <Subheading level={2}>Terms & Conditions</Subheading>
+          <Text>Ah yes, the fine print.</Text>
+        </div>
+        <div className="space-y-2">
+          <Text>
+            By submitting this job listing, I acknowledge and agree to the
+            following terms:
+          </Text>
+          <Text>
+            <Strong>Content Restrictions:</Strong> My listing must not contain:{" "}
+            <br />- Adult or explicit content <br />- Fraudulent or illegitimate
+            work opportunities <br />- Inappropriate or offensive language
+          </Text>
+          <Text>
+            <Strong>Accurate Classification: </Strong>I confirm that the job
+            type (e.g., full-time, part-time, freelance) is correctly
+            categorized.
+          </Text>
+          <Text>
+            <Strong>Removal Policy:</Strong> I understand that my listing may be
+            removed without notice if it violates any of the above conditions.
+          </Text>
+          <Text>
+            <Strong>Refund Policy:</Strong> If my listing is removed due to a
+            violation within 7 days of posting, I may be eligible for a refund,
+            subject to review.
+          </Text>
+          <Text>
+            <Strong>Compliance:</Strong> I agree to comply with all applicable
+            laws and regulations regarding job postings and employment
+            practices.
+          </Text>
+        </div>
+        {/* Add error part after validation here */}
+      </section>
+
+      <Divider className="my-10" soft />
+
+      <div className="flex justify-end">
+        <Button className="rounded-md" color="pink">
+          Submit and checkout
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/app/(app)/jobs/create/page.tsx b/app/(app)/jobs/create/page.tsx
new file mode 100644
index 00000000..0a38ec7f
--- /dev/null
+++ b/app/(app)/jobs/create/page.tsx
@@ -0,0 +1,7 @@
+import Content from "./_client";
+
+function page() {
+  return <Content />;
+}
+
+export default page;
diff --git a/public/images/company_placeholder.png b/public/images/company_placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..aa587959e34ad9327f6303ae0bf8600082ee46b8
GIT binary patch
literal 1767
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
JPDHLkV1kA#Mmzuj

literal 0
HcmV?d00001

diff --git a/utils/flags.ts b/utils/flags.ts
index af14b6ed..005587d3 100644
--- a/utils/flags.ts
+++ b/utils/flags.ts
@@ -2,6 +2,7 @@ import { posthog } from "posthog-js";
 
 export const FEATURE_FLAGS = {
   FEATURE_FLAG_TEST: "feature-flag-test",
+  JOBS: "jobs",
   // Add more feature flags as needed
 } as const;