113 lines
6.8 KiB
TypeScript
113 lines
6.8 KiB
TypeScript
import { Button } from "../../components/ui/button"
|
|
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
|
|
import { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"
|
|
|
|
import { FaRegEdit } from "react-icons/fa"
|
|
import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
|
|
import { MdOutlineRemoveRedEye } from "react-icons/md"
|
|
|
|
const frameworks = createListCollection({
|
|
items: [
|
|
{ label: "React.js", value: "react" },
|
|
{ label: "Vue.js", value: "vue" },
|
|
{ label: "Angular", value: "angular" },
|
|
{ label: "Svelte", value: "svelte" },
|
|
],
|
|
})
|
|
function ViewManageJob() {
|
|
return (
|
|
|
|
|
|
<DialogRoot placement="center">
|
|
<DialogTrigger asChild>
|
|
<Button bg={"transparent"} size="sm">
|
|
<MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }} />
|
|
</Button>
|
|
</DialogTrigger>
|
|
|
|
<DialogContent
|
|
bg={"#fff"}
|
|
// w={{ lg: "60%", md: "230px" }}
|
|
w={{ base: '90%', md: '400px' }}
|
|
|
|
height={'80vh'}
|
|
overflow={'scroll'}
|
|
p={2} // Reduced padding
|
|
bgSize={'md'}
|
|
>
|
|
<DialogHeader bg="white" p={2}>
|
|
<DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<DialogBody bg="white">
|
|
<Stack p={2}>
|
|
<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><Field.Root>
|
|
<Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
|
|
<Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
|
|
</Field.Root>
|
|
</Stack>
|
|
</DialogBody>
|
|
<DialogFooter display="flex" justifyContent="center">
|
|
<Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
|
|
Save
|
|
</Button>
|
|
</DialogFooter>
|
|
|
|
<DialogCloseTrigger color="black" />
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
|
|
|
|
)
|
|
}
|
|
|
|
export default ViewManageJob |