SSA-Admin-Panel/src/Pages/ManageJobs/ManageJobsAdd.tsx

import {
  Field,
  Icon,
  Input,
  SelectValueText,
  Stack,
  createListCollection,
} from "@chakra-ui/react";
import { Button } from "../../components/ui/button";
import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../components/ui/dialog";

import { TbEdit } from "react-icons/tb";
import {
  SelectContent,
  SelectItem,
  SelectLabel,
  SelectRoot,
  SelectTrigger,
} from "../../components/ui/select";
import Edit from "../../components/ActionIcons/Edit";

const frameworks = createListCollection({
  items: [
    { label: "React.js", value: "react" },
    { label: "Vue.js", value: "vue" },
    { label: "Angular", value: "angular" },
    { label: "Svelte", value: "svelte" },
  ],
});
function ManageJobsAdd() {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Edit />
      </DialogTrigger>

      <DialogContent
        bg={"#fff"}
        // w={{ lg: "60%", md: "230px" }}
        w={{ base: "90%", md: "400px" }}
        height={"80vh"}
        overflow={"scroll"}
        overflowX="hidden"
        p={3} // Reduced padding
        bgSize={"md"}
      >
        <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
            Add Details
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Job title
              </Field.Label>
              <Input
                placeholder="Enter the Job Title"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Workspace mode
              </Field.Label>
              <Input
                placeholder="Enter the Workspace Mode"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Category
              </Field.Label>
              <Input
                placeholder="Enter the Category"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Sub-Category
              </Field.Label>
              <Input
                placeholder="Enter the Sub-Category"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Salary
              </Field.Label>
              <Input
                placeholder="Enter the Salary"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Experience
              </Field.Label>
              <Input
                placeholder="Enter the Experience"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Job Location
              </Field.Label>
              <Input
                placeholder="Enter the Job Location"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
                            <Input placeholder="Enter the Country Selection"   /> */}
            <SelectRoot collection={frameworks} size="sm" w={"100%"}>
              <SelectLabel pt={1} color="black" fontSize="12px">
                Country Selection
              </SelectLabel>
              <SelectTrigger
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                borderRadius={"5px"}
              >
                <SelectValueText
                  placeholder="Enter the Country Selection"
                  pb={"6px"}
                  fontSize={"12px"}
                />
              </SelectTrigger>
              <SelectContent position={"relative"} zIndex={"9999"} bg={"#fff"}>
                {frameworks.items.map((movie) => (
                  <SelectItem
                    item={movie}
                    key={movie.value}
                    color={"black"}
                    pl={2}
                    p={1}
                    _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
                    fontSize="12px"
                  >
                    {movie.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </SelectRoot>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Job type
              </Field.Label>
              <Input
                placeholder="Enter the Job Type"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Skills required
              </Field.Label>
              <Input
                placeholder="Enter the Skills Required"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
            <Field.Root>
              <Field.Label pt={1} color="black" fontSize="12px">
                Job Description*
              </Field.Label>
              <Input
                placeholder="Enter the Job Description"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
              />
            </Field.Root>
          </Stack>
        </DialogBody>
        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
          <Button
            w="100%"
            bg="#02A0A0"
            color={"#fff"}
            fontSize="12px"
            height="30px"
          >
            Save
          </Button>
        </DialogFooter>

        <DialogCloseTrigger color="black" />
      </DialogContent>
    </DialogRoot>
  );
}

export default ManageJobsAdd;