React Chakra UI Components Task Application

Summary

Created a simple task list dashboard application with Chakra UI, a component library with production ready components.

The main purpose of this demo is to use some of the components available in the Chakra UI library.

Note: The dashboard application lists out some tasks with a title, author, description and avatar.

Chakra UI Components used in the build:

• Button
• Box
• Avatar
• Flex
• HStack
• Heading
• Spacer
• Text
• Checkbox
• FormControl
• FormLabel
• Input
• Divider
• SimpleGrid
• ListIcon
• ListItem
• Tab
• Badge

… and more.

Tech and Tools

• CSS
• HTML
• JSX
• React
• Chakra UI Components
• cPanel

Sample Code

NavBar.jsx

import { UnlockIcon } from '@chakra-ui/icons';
import {
  Avatar,
  AvatarBadge,
  Box,
  Button,
  Flex,
  HStack,
  Heading,
  Spacer,
  Text,
  useToast,
} from '@chakra-ui/react';

export default function Navbar() {
  const toast = useToast();

  const showToast = () => {
    toast({
      title: 'Logged out',
      description: 'Successfully logged out',
      duration: 3000,
      isClosable: true,
      status: 'success',
      position: 'top',
      icon: <UnlockIcon />,
    });
  };

  return (
    <Flex as="nav" p="10px" alignItems="center" mb="40px">
      <Heading as="h1" color="blue.400">
        Tasks
      </Heading>
      <Spacer />
      <HStack spacing="10px">
        <Avatar src="/img/panda.png" name="keith" bg="white">
          <AvatarBadge width="1.3em" bg="red.500">
            <Text fontSize="xs" color="white">
              3
            </Text>
          </AvatarBadge>
        </Avatar>
        <Text>keith@me.com</Text>
        <Button colorScheme="blue" onClick={showToast}>
          Logout
        </Button>
      </HStack>
    </Flex>
  );
}

Profile.jsx

import {
  ChatIcon,
  CheckCircleIcon,
  EmailIcon,
  StarIcon,
  WarningIcon,
} from '@chakra-ui/icons';
import {
  ListIcon,
  ListItem,
  List,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
  Tabs,
  Badge,
  Divider,
  Highlight,
  Heading,
} from '@chakra-ui/react';

export default function Profile() {
  return (
    <Tabs mt="40px" p="20px" colorScheme="blue" variant="enclosed">
      <Heading as="h2" size="lg" mb={4} color="blue.400">
        Profile
      </Heading>

      <TabList>
        <Tab _selected={{ color: 'white', bg: 'blue.400' }}>Account Info</Tab>
        <Tab _selected={{ color: 'white', bg: 'blue.400' }}>Task History</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <List spacing={4}>
            <ListItem>
              <ListIcon as={EmailIcon} />
              Email: keith@me.com
            </ListItem>
            <Divider />
            <ListItem>
              <ListIcon as={ChatIcon} />
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem,
              eius! <Badge colorScheme="purple">New</Badge>
            </ListItem>
            <Divider />
            <ListItem>
              <ListIcon as={StarIcon} />
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit deleniti
              nesciunt magnam facilis repudiandae exercitationem? Lorem ipsum dolor
              sit amet consectetur adipisicing elit. Quia obcaecati consectetur voluptate,
              quasi repellendus quisquam illo ipsa dignissimos exercitationem tenetur
              quas? Quisquam totam, vitae similique officiis odit possimus animi
              numquam.
              <Badge colorScheme="green">Success</Badge>
            </ListItem>
            <ListItem>
              <ListIcon as={StarIcon} />

              <Highlight
                query="spotlight"
                styles={{ px: '2', py: '1', rounded: 'full', bg: 'red.100' }}
              >
                With the Highlight component, you can spotlight words.
              </Highlight>
            </ListItem>
          </List>
        </TabPanel>

        <TabPanel>
          <List spacing={4}>
            <ListItem>
              <ListIcon as={CheckCircleIcon} color="blue.400" />
              Lorem ipsum dolor sit amet consectetur.
            </ListItem>
            <ListItem>
              <ListIcon as={CheckCircleIcon} color="blue.400" />
              Lorem ipsum dolor sit amet consectetur.
            </ListItem>
            <ListItem>
              <ListIcon as={WarningIcon} color="red.400" />
              Lorem ipsum dolor sit amet consectetur.
            </ListItem>
            <ListItem>
              <ListIcon as={CheckCircleIcon} color="blue.400" />
              Lorem ipsum dolor sit amet consectetur.
            </ListItem>
            <ListItem>
              <ListIcon as={WarningIcon} color="red.400" />
              Lorem ipsum dolor sit amet consectetur.
            </ListItem>
            <ListItem>
              <ListIcon as={CheckCircleIcon} color="blue.400" />
              Lorem ipsum dolor sit amet consectetur.
            </ListItem>
          </List>
        </TabPanel>
      </TabPanels>
    </Tabs>
  );
}

Demo

Open demo on a sub domain on my shared hosting service (cPanel).

Link to Demo

Chakra

Here is the link to Chakra UI website.

Link to Chakra UI