'use client'
import {
Box,
Center,
useColorModeValue,
Heading,
Text,
Stack,
Image,
} from '@chakra-ui/react'
const IMAGE =
'https://images.unsplash.com/photo-1518051870910-a46e30d9db16?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80'
export default function ProductSimple() {
return (
<Center py={12}>
<Box
role={'group'}
p={6}
maxW={'330px'}
w={'full'}
bg={useColorModeValue('white', 'gray.800')}
boxShadow={'2xl'}
rounded={'lg'}
pos={'relative'}
zIndex={1}>
<Box
rounded={'lg'}
mt={-12}
pos={'relative'}
height={'230px'}
_after={{
transition: 'all .3s ease',
content: '""',
w: 'full',
h: 'full',
pos: 'absolute',
top: 5,
left: 0,
backgroundImage: `url(${IMAGE})`,
filter: 'blur(15px)',
zIndex: -1,
}}
_groupHover={{
_after: {
filter: 'blur(20px)',
},
}}>
<Image
rounded={'lg'}
height={230}
width={282}
objectFit={'cover'}
src={IMAGE}
alt="#"
/>
</Box>
<Stack pt={10} align={'center'}>
<Text color={'gray.500'} fontSize={'sm'} textTransform={'uppercase'}>
Brand
</Text>
<Heading fontSize={'2xl'} fontFamily={'body'} fontWeight={500}>
Nice Chair, pink
</Heading>
<Stack direction={'row'} align={'center'}>
<Text fontWeight={800} fontSize={'xl'}>
$57
</Text>
<Text textDecoration={'line-through'} color={'gray.600'}>
$199
</Text>
</Stack>
</Stack>
</Box>
</Center>
)
}
'use client'
import {
Flex,
Circle,
Box,
Image,
Badge,
useColorModeValue,
Icon,
chakra,
Tooltip,
} from '@chakra-ui/react'
import { BsStar, BsStarFill, BsStarHalf } from 'react-icons/bs'
import { FiShoppingCart } from 'react-icons/fi'
const data = {
isNew: true,
imageURL:
'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=4600&q=80',
name: 'Wayfarer Classic',
price: 4.5,
rating: 4.2,
numReviews: 34,
}
interface RatingProps {
rating: number
numReviews: number
}
function Rating({ rating, numReviews }: RatingProps) {
return (
<Box display="flex" alignItems="center">
{Array(5)
.fill('')
.map((_, i) => {
const roundedRating = Math.round(rating * 2) / 2
if (roundedRating - i >= 1) {
return (
<BsStarFill
key={i}
style={{ marginLeft: '1' }}
color={i < rating ? 'teal.500' : 'gray.300'}
/>
)
}
if (roundedRating - i === 0.5) {
return <BsStarHalf key={i} style={{ marginLeft: '1' }} />
}
return <BsStar key={i} style={{ marginLeft: '1' }} />
})}
<Box as="span" ml="2" color="gray.600" fontSize="sm">
{numReviews} review{numReviews > 1 && 's'}
</Box>
</Box>
)
}
function ProductAddToCart() {
return (
<Flex p={50} w="full" alignItems="center" justifyContent="center">
<Box
bg={useColorModeValue('white', 'gray.800')}
maxW="sm"
borderWidth="1px"
rounded="lg"
shadow="lg"
position="relative">
{data.isNew && (
<Circle size="10px" position="absolute" top={2} right={2} bg="red.200" />
)}
<Image src={data.imageURL} alt={`Picture of ${data.name}`} roundedTop="lg" />
<Box p="6">
<Box display="flex" alignItems="baseline">
{data.isNew && (
<Badge rounded="full" px="2" fontSize="0.8em" colorScheme="red">
New
</Badge>
)}
</Box>
<Flex mt="1" justifyContent="space-between" alignContent="center">
<Box
fontSize="2xl"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated>
{data.name}
</Box>
<Tooltip
label="Add to cart"
bg="white"
placement={'top'}
color={'gray.800'}
fontSize={'1.2em'}>
<chakra.a href={'#'} display={'flex'}>
<Icon as={FiShoppingCart} h={7} w={7} alignSelf={'center'} />
</chakra.a>
</Tooltip>
</Flex>
<Flex justifyContent="space-between" alignContent="center">
<Rating rating={data.rating} numReviews={data.numReviews} />
<Box fontSize="2xl" color={useColorModeValue('gray.800', 'white')}>
<Box as="span" color={'gray.600'} fontSize="lg">
£
</Box>
{data.price.toFixed(2)}
</Box>
</Flex>
</Box>
</Box>
</Flex>
)
}
export default ProductAddToCart
'use client'
import {
Box,
Center,
Text,
Stack,
List,
ListItem,
ListIcon,
Button,
useColorModeValue,
} from '@chakra-ui/react'
import { CheckIcon } from '@chakra-ui/icons'
export default function Pricing() {
return (
<Center py={6}>
<Box
maxW={'330px'}
w={'full'}
bg={useColorModeValue('white', 'gray.800')}
boxShadow={'2xl'}
rounded={'md'}
overflow={'hidden'}>
<Stack
textAlign={'center'}
p={6}
color={useColorModeValue('gray.800', 'white')}
align={'center'}>
<Text
fontSize={'sm'}
fontWeight={500}
bg={useColorModeValue('green.50', 'green.900')}
p={2}
px={3}
color={'green.500'}
rounded={'full'}>
Hobby
</Text>
<Stack direction={'row'} align={'center'} justify={'center'}>
<Text fontSize={'3xl'}>$</Text>
<Text fontSize={'6xl'} fontWeight={800}>
79
</Text>
<Text color={'gray.500'}>/month</Text>
</Stack>
</Stack>
<Box bg={useColorModeValue('gray.50', 'gray.900')} px={6} py={10}>
<List spacing={3}>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
5.000 page views
</ListItem>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
50 automation executions
</ListItem>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
50 identified users
</ListItem>
<ListItem>
<ListIcon as={CheckIcon} color="green.400" />
All features
</ListItem>
</List>
<Button
mt={10}
w={'full'}
bg={'green.400'}
color={'white'}
rounded={'xl'}
boxShadow={'0 5px 20px 0px rgb(72 187 120 / 43%)'}
_hover={{
bg: 'green.500',
}}
_focus={{
bg: 'green.500',
}}>
Start your trial
</Button>
</Box>
</Box>
</Center>
)
}
'use client'
import Image from 'next/image'
import {
Box,
Center,
Heading,
Text,
Stack,
Avatar,
useColorModeValue,
} from '@chakra-ui/react'
export default function blogPostWithImage() {
return (
<Center py={6}>
<Box
maxW={'445px'}
w={'full'}
// eslint-disable-next-line react-hooks/rules-of-hooks
bg={useColorModeValue('white', 'gray.900')}
boxShadow={'2xl'}
rounded={'md'}
p={6}
overflow={'hidden'}>
<Box h={'210px'} bg={'gray.100'} mt={-6} mx={-6} mb={6} pos={'relative'}>
<Image
src={
'https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
}
fill
alt="Example"
/>
</Box>
<Stack>
<Text
color={'green.500'}
textTransform={'uppercase'}
fontWeight={800}
fontSize={'sm'}
letterSpacing={1.1}>
Blog
</Text>
<Heading
// eslint-disable-next-line react-hooks/rules-of-hooks
color={useColorModeValue('gray.700', 'white')}
fontSize={'2xl'}
fontFamily={'body'}>
Boost your conversion rate
</Heading>
<Text color={'gray.500'}>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</Text>
</Stack>
<Stack mt={6} direction={'row'} spacing={4} align={'center'}>
<Avatar src={'https://avatars0.githubusercontent.com/u/1164541?v=4'} />
<Stack direction={'column'} spacing={0} fontSize={'sm'}>
<Text fontWeight={600}>Achim Rolle</Text>
<Text color={'gray.500'}>Feb 08, 2021 · 6min read</Text>
</Stack>
</Stack>
</Box>
</Center>
)
}
'use client'
import React from 'react'
import { Stack, Text, Button } from '@chakra-ui/react'
import { FcLock } from 'react-icons/fc'
export default function SimpleCookiePreference() {
return (
<Stack p="4" boxShadow="lg" m="4" borderRadius="sm">
<Stack direction="row" alignItems="center">
<Text fontWeight="semibold">Your Privacy</Text>
<FcLock />
</Stack>
<Stack direction={{ base: 'column', md: 'row' }} justifyContent="space-between">
<Text fontSize={{ base: 'sm' }} textAlign={'left'} maxW={'4xl'}>
We use cookies and similar technologies to help personalise content, tailor and
measure ads, and provide a better experience. By clicking OK or turning an
option on in Cookie Preferences, you agree to this, as outlined in our Cookie
Policy. To change preferences or withdraw consent, please update your Cookie
Preferences.
</Text>
<Stack direction={{ base: 'column', md: 'row' }}>
<Button variant="outline" colorScheme="green">
Cookie Preferences
</Button>
<Button colorScheme="green">OK</Button>
</Stack>
</Stack>
</Stack>
)
}
'use client'
import { useState } from 'react'
import {
Box,
Heading,
Text,
Img,
Flex,
Center,
useColorModeValue,
HStack,
} from '@chakra-ui/react'
import { BsArrowUpRight, BsHeartFill, BsHeart } from 'react-icons/bs'
export default function PostWithLike() {
const [liked, setLiked] = useState(false)
return (
<Center py={6}>
<Box
w="xs"
rounded={'sm'}
my={5}
mx={[0, 5]}
overflow={'hidden'}
bg="white"
border={'1px'}
borderColor="black"
boxShadow={useColorModeValue('6px 6px 0 black', '6px 6px 0 cyan')}>
<Box h={'200px'} borderBottom={'1px'} borderColor="black">
<Img
src={
'https://images.unsplash.com/photo-1542435503-956c469947f6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80'
}
roundedTop={'sm'}
objectFit="cover"
h="full"
w="full"
alt={'Blog Image'}
/>
</Box>
<Box p={4}>
<Box bg="black" display={'inline-block'} px={2} py={1} color="white" mb={2}>
<Text fontSize={'xs'} fontWeight="medium">
React
</Text>
</Box>
<Heading color={'black'} fontSize={'2xl'} noOfLines={1}>
React v18.0
</Heading>
<Text color={'gray.500'} noOfLines={2}>
In this post, we will give an overview of what is new in React 18, and what it
means for the future.
</Text>
</Box>
<HStack borderTop={'1px'} color="black">
<Flex
p={4}
alignItems="center"
justifyContent={'space-between'}
roundedBottom={'sm'}
cursor={'pointer'}
w="full">
<Text fontSize={'md'} fontWeight={'semibold'}>
View more
</Text>
<BsArrowUpRight />
</Flex>
<Flex
p={4}
alignItems="center"
justifyContent={'space-between'}
roundedBottom={'sm'}
borderLeft={'1px'}
cursor="pointer"
onClick={() => setLiked(!liked)}>
{liked ? (
<BsHeartFill fill="red" fontSize={'24px'} />
) : (
<BsHeart fontSize={'24px'} />
)}
</Flex>
</HStack>
</Box>
</Center>
)
}
Made on the Internet by Achim Rolle and Contributors
Social User Profile with Image
'use client' import { Heading, Avatar, Box, Center, Image, Flex, Text, Stack, Button, useColorModeValue, } from '@chakra-ui/react' export default function SocialProfileWithImage() { return ( <Center py={6}> <Box maxW={'270px'} w={'full'} bg={useColorModeValue('white', 'gray.800')} boxShadow={'2xl'} rounded={'md'} overflow={'hidden'}> <Image h={'120px'} w={'full'} src={ 'https://images.unsplash.com/photo-1612865547334-09cb8cb455da?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80' } objectFit="cover" alt="#" /> <Flex justify={'center'} mt={-12}> <Avatar size={'xl'} src={ 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ' } css={{ border: '2px solid white', }} /> </Flex> <Box p={6}> <Stack spacing={0} align={'center'} mb={5}> <Heading fontSize={'2xl'} fontWeight={500} fontFamily={'body'}> John Doe </Heading> <Text color={'gray.500'}>Frontend Developer</Text> </Stack> <Stack direction={'row'} justify={'center'} spacing={6}> <Stack spacing={0} align={'center'}> <Text fontWeight={600}>23k</Text> <Text fontSize={'sm'} color={'gray.500'}> Followers </Text> </Stack> <Stack spacing={0} align={'center'}> <Text fontWeight={600}>23k</Text> <Text fontSize={'sm'} color={'gray.500'}> Followers </Text> </Stack> </Stack> <Button w={'full'} mt={8} bg={useColorModeValue('#151f21', 'gray.900')} color={'white'} rounded={'md'} _hover={{ transform: 'translateY(-2px)', boxShadow: 'lg', }}> Follow </Button> </Box> </Box> </Center> ) }