86 lines
4.1 KiB
TypeScript
86 lines
4.1 KiB
TypeScript
import { Button } from "../../components/ui/button"
|
|
import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
|
|
import { Avatar, Box, Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
|
|
import { Checkbox } from "../../components/ui/checkbox"
|
|
import { MdOutlineRemoveRedEye } from "react-icons/md";
|
|
import { Switch } from "../../components/ui/switch";
|
|
import { AvatarGroup } from "../../components/ui/avatar";
|
|
function ViewManageGroup() {
|
|
return (
|
|
|
|
<DialogRoot placement="center" >
|
|
<DialogTrigger asChild>
|
|
<Button bg={"transparent"} size="sm">
|
|
<MdOutlineRemoveRedEye style={{ cursor: "pointer", }} color="#000"/>
|
|
</Button>
|
|
{/* <Button><FaRegEdit /></Button> */}
|
|
|
|
</DialogTrigger>
|
|
|
|
<DialogContent
|
|
bg={"#fff"}
|
|
// w={{ lg: "60%", md: "230px" }}
|
|
w={{ base: '90%', md: '400px' }}
|
|
height={"auto"}
|
|
p={3} // Reduced padding
|
|
bgSize={'md'}
|
|
>
|
|
<DialogHeader bg="white" >
|
|
<DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<DialogBody bg="white">
|
|
<Stack py={3} >
|
|
|
|
<Field.Root>
|
|
<Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
|
|
<Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
|
|
|
|
<Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
|
|
<Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
|
|
|
|
<Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
|
|
|
|
<Box
|
|
bgColor="#EEEEEE"
|
|
border="none"
|
|
w="100%"
|
|
display="flex"
|
|
p={1}
|
|
rounded={4}
|
|
>
|
|
<AvatarGroup gap="0" spaceX="-3" size={"xs"} >
|
|
<Avatar.Root border={'none'}>
|
|
<Avatar.Fallback />
|
|
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
|
|
</Avatar.Root>
|
|
|
|
<Avatar.Root border={'none'}>
|
|
<Avatar.Fallback />
|
|
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
|
|
</Avatar.Root>
|
|
|
|
<Avatar.Root border={'none'}>
|
|
<Avatar.Fallback />
|
|
<Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
|
|
</Avatar.Root>
|
|
<Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
|
|
<Avatar.Fallback ml={5}>+3</Avatar.Fallback>
|
|
</Avatar.Root>
|
|
</AvatarGroup>
|
|
</Box>
|
|
|
|
</Field.Root>
|
|
<Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
|
|
<Switch />
|
|
</Stack>
|
|
</DialogBody>
|
|
|
|
<DialogCloseTrigger color="black" />
|
|
</DialogContent>
|
|
</DialogRoot >
|
|
|
|
)
|
|
}
|
|
|
|
export default ViewManageGroup |