Learning chakra ui

README.md

Result of the course Build a Modern User Interface with Chakra UI by Lazar Nikolov.

index.tsx

import {
	AspectRatio,
	Container,
	Button,
	Checkbox,
	Divider,
	Flex,
	FormControl,
	FormLabel,
	GridItem,
	Heading,
	HStack,
	Image,
	Input,
	Select,
	SimpleGrid,
	Stack,
	Text,
	VStack,
	useBreakpointValue,
	useColorMode,
	useColorModeValue,
} from "@chakra-ui/react";

export default function Home() {
	return (
		<Container maxW="container.xl" p={0}>
			<Flex
				py={[0, 10, 20]}
				h={{ base: "auto", md: "100vh" }}
				direction={{ base: "column-reverse", md: "row" }}
			>
				<Details />
				<Cart />
			</Flex>
		</Container>
	);
}

const Cart = () => {
	const { toggleColorMode } = useColorMode();
	const bgColor = useColorModeValue("gray.50", "whiteAlpha.50");
	const secondaryTextColor = useColorModeValue("gray.600", "whiteAlpha.900");

	return (
		<VStack
			w="full"
			h="full"
			p={10}
			spacing={10}
			alignItems="flex-start"
			bg={bgColor}
		>
			<VStack spacing={3} alignItems="flex-start">
				<Heading size="2xl">Your cart</Heading>
				<Text>
					If the price is too hard on your eyes,{" "}
					<Button variant="link" colorScheme="black" onClick={toggleColorMode}>
						try changing the theme.
					</Button>
				</Text>
			</VStack>
			<HStack spacing={6} alignItems="center" w="full">
				<AspectRatio ratio={1} w={24}>
					<Image
						src="https://www.amazon.ca/images/G/15/CA-hq/2021/img/Consumer_Electronics/XCM_CUTTLE_1361327_1854485_CA_186x116_1X_en_CA._SY116_CB642031698_.jpg"
						alt=""
					/>
				</AspectRatio>
				<Stack
					spacing={0}
					w="full"
					direction="row"
					justifyContent="space-between"
					alignItems="center"
				>
					<VStack w="full" spacing={0} alignItems="flex-start">
						<Heading size="md">Penny board</Heading>
						<Text color={secondaryTextColor}>PNYCOMP27541</Text>
					</VStack>
					<Heading size="sm" textAlign="end">
						$119.00
					</Heading>
				</Stack>
			</HStack>
			<VStack spacing={4} alignItems="stretch" w="full">
				<HStack justifyContent="space-between">
					<Text color={secondaryTextColor}>Subtotal</Text>
					<Heading size="sm">$119.00</Heading>
				</HStack>
				<HStack justifyContent="space-between">
					<Text color={secondaryTextColor}>Shipping</Text>
					<Heading size="sm">$19.99</Heading>
				</HStack>
				<HStack justifyContent="space-between">
					<Text color={secondaryTextColor}>Taxes (estimated)</Text>
					<Heading size="sm">$23.80</Heading>
				</HStack>
			</VStack>
			<Divider />
			<HStack justifyContent="space-between" w="full">
				<Text color={secondaryTextColor}>Total</Text>
				<Heading size="lg">$162.79</Heading>
			</HStack>
		</VStack>
	);
};

const Details = () => {
	const colSpan = useBreakpointValue({ base: 2, md: 1 });

	return (
		<VStack w="full" h="full" p={10} spacing={10} alignItems="flex-start">
			<VStack spacing={3} alignItems="flex-start">
				<Heading size="2xl">Your details</Heading>
				<Text>If you already have an account, click here to log in.</Text>
			</VStack>
			<SimpleGrid columns={2} columnGap={3} rowGap={6} w="full">
				<GridItem colSpan={colSpan}>
					<FormControl>
						<FormLabel htmlFor="firstName">First name</FormLabel>
						<Input id="firstName" placeholder="John" />
					</FormControl>
				</GridItem>
				<GridItem colSpan={colSpan}>
					<FormControl>
						<FormLabel htmlFor="lastName">Last name</FormLabel>
						<Input id="lastName" placeholder="Doe" />
					</FormControl>
				</GridItem>
				<GridItem colSpan={2}>
					<FormControl>
						<FormLabel htmlFor="address">Address</FormLabel>
						<Input id="address" placeholder={"Blvd. Broken Dreams 21"} />
					</FormControl>
				</GridItem>
				<GridItem colSpan={colSpan}>
					<FormControl>
						<FormLabel htmlFor="city">City</FormLabel>
						<Input id="city" placeholder="San Francisco" />
					</FormControl>
				</GridItem>
				<GridItem colSpan={colSpan}>
					<FormControl>
						<FormLabel htmlFor="country">Country</FormLabel>
						<Select>
							<option value="usa">United States</option>
							<option value="canada">Canada</option>
						</Select>
					</FormControl>
				</GridItem>
				<GridItem colSpan={2}>
					<Checkbox defaultChecked>Ship to billing address</Checkbox>
				</GridItem>
				<GridItem colSpan={2}>
					<Button variant="primary" size="lg" w="full">
						Place Order
					</Button>
				</GridItem>
			</SimpleGrid>
		</VStack>
	);
};

theme.ts

import {
	extendTheme,
	theme as base,
	withDefaultColorScheme,
	withDefaultVariant,
} from "@chakra-ui/react";
import { mode } from "@chakra-ui/theme-tools";

const inputSelectStyles = {
	variants: {
		filled: {
			field: {
				_focus: {
					borderColor: "brand.500",
				},
			},
		},
	},
	sizes: {
		md: {
			field: {
				borderRadius: "none",
			},
		},
	},
};

const brandRing = {
	_focus: {
		ring: 2,
		ringColor: "brand.500",
	},
};

const theme = extendTheme(
	{
		colors: {
			brand: {
				50: "#f5fee5",
				100: "#e1fbb2",
				200: "#cdf781",
				300: "#b8ee56",
				400: "#a2e032",
				500: "#8ac919",
				600: "#71ab09",
				700: "#578602",
				800: "#3c5e00",
				900: "#203300",
			},
		},
		fonts: {
			heading: `Montserrat, ${base.fonts?.heading}`,
			body: `Inter, ${base.fonts?.body}`,
		},
		components: {
			Button: {
				variants: {
					primary: (props) => ({
						...brandRing,
						rounded: "none",
						color: mode("white", "gray.800")(props),
						backgroundColor: mode("brand.500", "brand.200")(props),
						_hover: {
							backgroundColor: mode("brand.600", "brand.300")(props),
						},
						_active: {
							backgroundColor: mode("brand.700", "brand.400")(props),
						},
					}),
				},
			},
			Input: { ...inputSelectStyles },
			Select: { ...inputSelectStyles },
			Checkbox: {
				baseStyle: {
					control: {
						borderRadius: "none",
						...brandRing,
					},
				},
			},
		},
	},
	withDefaultColorScheme({
		colorScheme: "brand",
		components: ["Checkbox"],
	}),
	withDefaultVariant({
		variant: "filled",
		components: ["Input", "Select"],
	}),
);

export default theme;