Support us
Made on the Internet by Achim Rolle and Contributors
'use client'
import { Button, Flex, useColorMode } from '@chakra-ui/react'
import { BsSun, BsMoonStarsFill } from 'react-icons/bs'
export default function ColorModeToggle() {
const { colorMode, toggleColorMode } = useColorMode()
return (
/**
* Ideally, only the button component should be used (without Flex).
* Props compatible with <Button /> are supported.
*/
<Flex h="100vh" justifyContent="center" alignItems="center">
<Button
aria-label="Toggle Color Mode"
onClick={toggleColorMode}
_focus={{ boxShadow: 'none' }}
w="fit-content">
{colorMode === 'light' ? <BsMoonStarsFill /> : <BsSun />}
</Button>
</Flex>
)
}
'use client'
import {
Popover,
PopoverTrigger,
PopoverContent,
PopoverBody,
PopoverArrow,
IconButton,
Button,
Stack,
Flex,
} from '@chakra-ui/react'
import { BsThreeDotsVertical, BsChatSquareQuote } from 'react-icons/bs'
import { RiShutDownLine, RiRestartLine, RiFileShredLine } from 'react-icons/ri'
export default function ServerSecondaryOptions() {
return (
/**
* You may move the Popover outside Flex.
*/
<Flex justifyContent="center" mt={4}>
<Popover placement="bottom" isLazy>
<PopoverTrigger>
<IconButton
aria-label="More server options"
icon={<BsThreeDotsVertical />}
variant="solid"
w="fit-content"
/>
</PopoverTrigger>
<PopoverContent w="fit-content" _focus={{ boxShadow: 'none' }}>
<PopoverArrow />
<PopoverBody>
<Stack>
<Button
w="194px"
variant="ghost"
rightIcon={<BsChatSquareQuote />}
justifyContent="space-between"
fontWeight="normal"
fontSize="sm">
Request Access
</Button>
<Button
w="194px"
variant="ghost"
rightIcon={<RiFileShredLine />}
justifyContent="space-between"
fontWeight="normal"
colorScheme="red"
fontSize="sm">
Purge Redis Cache
</Button>
<Button
w="194px"
variant="ghost"
rightIcon={<RiRestartLine />}
justifyContent="space-between"
fontWeight="normal"
colorScheme="red"
fontSize="sm">
Restart Server
</Button>
<Button
w="194px"
variant="ghost"
rightIcon={<RiShutDownLine />}
justifyContent="space-between"
fontWeight="normal"
colorScheme="red"
fontSize="sm">
Disable Server
</Button>
</Stack>
</PopoverBody>
</PopoverContent>
</Popover>
</Flex>
)
}
'use client'
import { Button, Flex } from '@chakra-ui/react'
export default function FollowButtonWithShadow() {
return (
<Flex h="100vh" justifyContent="center" alignItems="center">
<Button
px={4}
fontSize={'sm'}
rounded={'full'}
bg={'blue.400'}
color={'white'}
boxShadow={
'0px 1px 25px -5px rgb(66 153 225 / 48%), 0 10px 10px -5px rgb(66 153 225 / 43%)'
}
_hover={{
bg: 'blue.500',
}}
_focus={{
bg: 'blue.500',
}}>
Follow me
</Button>
</Flex>
)
}
'use client'
import { useState } from 'react'
import { Button, Flex, useColorModeValue } from '@chakra-ui/react'
function randomColor() {
return Math.floor(Math.random() * 5)
}
const colorList: string[] = ['#E53E3E', '#38A169', '#00B5D8', '#44337A', '#ED64A6']
export default function ClickMe() {
const [colorCode, setColorCode] = useState(colorList[randomColor()])
return (
<Flex h="100vh" justifyContent="center" alignItems="center" bgColor={`${colorCode}`}>
<Button
px={8}
bg={useColorModeValue('#151f21', 'gray.900')}
color={'white'}
rounded={'md'}
_hover={{
transform: 'translateY(-2px)',
boxShadow: 'lg',
}}
onClick={() => setColorCode(colorList[randomColor()])}>
Click Me
</Button>
</Flex>
)
}
Support us
Made on the Internet by Achim Rolle and Contributors