[ working Icon ]

This commit is contained in:
YasinShaikh123
2025-02-12 12:50:47 +05:30
parent 59df59a9d6
commit 599f320598
6 changed files with 145 additions and 43 deletions

View File

@@ -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 ?"

View File

@@ -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>

View 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;

View File

@@ -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;

View 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;

View File

@@ -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>