[ working Icon ]
This commit is contained in:
@@ -9,6 +9,7 @@ import { LuSearch } from "react-icons/lu";
|
||||
import ViewRegisterUsers from "./ViewRegisterUsers";
|
||||
import EditRegisterUsers from "./EditRegisterUsers";
|
||||
import AddRegisterUsers from "./AddRegisterUsers";
|
||||
import Delete from "../../../components/ActionIcons/Delete";
|
||||
|
||||
const tableHeadRow = [
|
||||
"Sr. No",
|
||||
@@ -42,7 +43,7 @@ const registerUser: any[] = [
|
||||
<EditRegisterUsers />
|
||||
{/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
|
||||
<AlertDailog
|
||||
AltertTiggerIcon={RiDeleteBin5Line}
|
||||
AltertTiggerIcon={() => <Delete />} // Pass as function
|
||||
alertText="Delete Users"
|
||||
alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
|
||||
alertCaption="Are You Sure You Want To Delete This User ?"
|
||||
|
||||
@@ -9,31 +9,23 @@ import {
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "../../../components/ui/dialog";
|
||||
import View from "../../../components/ActionIcons/View";
|
||||
|
||||
function ViewRegisterUsers() {
|
||||
return (
|
||||
<DialogRoot placement="center">
|
||||
<DialogTrigger asChild>
|
||||
<Icon
|
||||
cursor={"pointer"}
|
||||
p={0.5}
|
||||
_hover={{ bg: "#00000015" }}
|
||||
rounded={"md"}
|
||||
boxSize={5}
|
||||
// color={iconColor && iconColor}
|
||||
>
|
||||
<MdOutlineRemoveRedEye />
|
||||
</Icon>
|
||||
<View />
|
||||
</DialogTrigger>
|
||||
|
||||
<DialogContent
|
||||
bg={"#fff"}
|
||||
w={{ base: '90%', md: '400px' }}
|
||||
height={'80vh'}
|
||||
overflow={'scroll'}
|
||||
overflowX="hidden"
|
||||
p={3} // Reduced padding
|
||||
bgSize={'md'}
|
||||
bg={"#fff"}
|
||||
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">
|
||||
@@ -48,42 +40,72 @@ function ViewRegisterUsers() {
|
||||
First Name
|
||||
</Field.Label>
|
||||
<Input
|
||||
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
|
||||
bgColor="#EEEEEE"
|
||||
color="black"
|
||||
border="none"
|
||||
pl={1}
|
||||
fontSize="12px"
|
||||
height="30px"
|
||||
/>
|
||||
|
||||
<Field.Label color="black" pt={1} fontSize="12px">
|
||||
Last Name
|
||||
</Field.Label>
|
||||
<Input
|
||||
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
|
||||
bgColor="#EEEEEE"
|
||||
color="black"
|
||||
border="none"
|
||||
pl={1}
|
||||
fontSize="12px"
|
||||
height="30px"
|
||||
/>
|
||||
|
||||
<Field.Label color="black" pt={1} fontSize="12px">
|
||||
Gender
|
||||
</Field.Label>
|
||||
<Input
|
||||
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
|
||||
bgColor="#EEEEEE"
|
||||
color="black"
|
||||
border="none"
|
||||
pl={1}
|
||||
fontSize="12px"
|
||||
height="30px"
|
||||
/>
|
||||
|
||||
<Field.Label color="black" pt={1} fontSize="12px">
|
||||
DOB
|
||||
</Field.Label>
|
||||
<Input
|
||||
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
|
||||
bgColor="#EEEEEE"
|
||||
color="black"
|
||||
border="none"
|
||||
pl={1}
|
||||
fontSize="12px"
|
||||
height="30px"
|
||||
/>
|
||||
|
||||
<Field.Label color="black" pt={1} fontSize="12px">
|
||||
OTP Verified
|
||||
</Field.Label>
|
||||
<Input
|
||||
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
|
||||
bgColor="#EEEEEE"
|
||||
color="black"
|
||||
border="none"
|
||||
pl={1}
|
||||
fontSize="12px"
|
||||
height="30px"
|
||||
/>
|
||||
|
||||
<Field.Label color="black" pt={1} fontSize="12px">
|
||||
Language
|
||||
</Field.Label>
|
||||
<Input
|
||||
bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
|
||||
bgColor="#EEEEEE"
|
||||
color="black"
|
||||
border="none"
|
||||
pl={1}
|
||||
fontSize="12px"
|
||||
height="30px"
|
||||
/>
|
||||
</Field.Root>
|
||||
</Stack>
|
||||
|
||||
34
src/components/ActionIcons/Delete.tsx
Normal file
34
src/components/ActionIcons/Delete.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Icon, Image } from "@chakra-ui/react";
|
||||
import { Tooltip } from "../ui/tooltip";
|
||||
import { RiDeleteBin5Line } from "react-icons/ri";
|
||||
|
||||
const Delete = () => {
|
||||
return (
|
||||
<Tooltip
|
||||
content="Delete"
|
||||
openDelay={100}
|
||||
contentProps={{
|
||||
css: {
|
||||
"--tooltip-bg": "#fed7d7",
|
||||
color: "#822727",
|
||||
padding: "1px 8px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
cursor={"pointer"}
|
||||
p={1}
|
||||
_hover={{ bg: "#00000015" }}
|
||||
rounded={"xs"}
|
||||
boxSize={5}
|
||||
h={"24px"}
|
||||
w={"24px"}
|
||||
// color={iconColor && iconColor}
|
||||
>
|
||||
<RiDeleteBin5Line />
|
||||
</Icon>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default Delete;
|
||||
@@ -1,22 +1,33 @@
|
||||
import { Icon } from '@chakra-ui/react'
|
||||
import { TbEdit } from 'react-icons/tb'
|
||||
import { Tooltip } from '../ui/tooltip'
|
||||
import { Icon } from "@chakra-ui/react";
|
||||
import { TbEdit } from "react-icons/tb";
|
||||
import { Tooltip } from "../ui/tooltip";
|
||||
|
||||
const Edit = () => {
|
||||
return (
|
||||
<Tooltip content='Edit' >
|
||||
<Icon
|
||||
cursor={"pointer"}
|
||||
p={0.5}
|
||||
_hover={{ bg: "#00000015" }}
|
||||
rounded={"md"}
|
||||
boxSize={5}
|
||||
// color={iconColor && iconColor}
|
||||
>
|
||||
<TbEdit />
|
||||
</Icon>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
<Tooltip
|
||||
content="Edit"
|
||||
openDelay={100}
|
||||
contentProps={{
|
||||
css: {
|
||||
"--tooltip-bg": "#c6f6d5",
|
||||
color: "#22543d",
|
||||
padding: "1px 8px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
cursor={"pointer"}
|
||||
p={1}
|
||||
_hover={{ bg: "#00000015" }}
|
||||
rounded={"xs"}
|
||||
boxSize={5}
|
||||
h={"24px"}
|
||||
w={"24px"}
|
||||
>
|
||||
<TbEdit />
|
||||
</Icon>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default Edit
|
||||
export default Edit;
|
||||
|
||||
34
src/components/ActionIcons/View.tsx
Normal file
34
src/components/ActionIcons/View.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { Icon } from "@chakra-ui/react";
|
||||
import { Tooltip } from "../ui/tooltip";
|
||||
import { MdOutlineRemoveRedEye } from "react-icons/md";
|
||||
|
||||
const View = () => {
|
||||
return (
|
||||
<Tooltip
|
||||
content="View"
|
||||
openDelay={100}
|
||||
contentProps={{
|
||||
css: {
|
||||
"--tooltip-bg": "#ccecec",
|
||||
color: "#055757",
|
||||
padding: "1px 8px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Icon
|
||||
cursor={"pointer"}
|
||||
p={1}
|
||||
_hover={{ bg: "#00000015" }}
|
||||
rounded={"xs"}
|
||||
boxSize={5}
|
||||
h={"24px"}
|
||||
w={"24px"}
|
||||
// color={iconColor && iconColor}
|
||||
>
|
||||
<MdOutlineRemoveRedEye />
|
||||
</Icon>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
export default View;
|
||||
@@ -22,7 +22,7 @@ const MainFrame: FC<MainFrameProps> = ({ children }) => {
|
||||
rounded="lg"
|
||||
boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
|
||||
pt={3}
|
||||
>
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</MotionVStack>
|
||||
|
||||
Reference in New Issue
Block a user