Creating the Dashboard
Let's begin creating the user dashboard for Fast Feedback. This dashboard will allow users to manage their sites, as well as their own feedback they've left.
All the different pages inside the admin dashboard should share the same base layout. Let's create a shared layout component that all dashboard pages can re-use. This should contain the top navigation, as well as the current user that's logged in. This "shell" will wrap other components. For example:
<DashboardShell> <Component /></DashboardShell>
Dashboard Shell
Remember our authentication hook we created earlier? We can use that to fetch the currently logged in user.
import { useAuth } from '@/lib/auth';
const { user } = useAuth();
Then, we need to use Chakra's components to style a navigation bar containing:
- Links for your sites and feedback
- Account information
- User's current profile image
When creating our User
schema, we included photoUrl
pulled from the social platform they logged in with. Let's use that to display a profile photo in the top right.
components/DashboardShell.js
import React from 'react';import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Heading, Button, Flex, Link, Avatar} from '@chakra-ui/core';
import { useAuth } from '@/lib/auth';
const DashboardShell = ({ children }) => { const { user } = useAuth();
return ( <Box backgroundColor="gray.100" h="100vh"> <Flex backgroundColor="white" mb={16} w="full"> <Flex alignItems="center" justifyContent="space-between" pt={4} pb={4} maxW="1250px" margin="0 auto" w="full" px={8} > <Flex> <Link mr={4}>Sites</Link> <Link>Feedback</Link> </Flex> <Flex justifyContent="center" alignItems="center"> <Link mr={4}>Account</Link> <Avatar size="sm" src={user?.photoUrl} /> </Flex> </Flex> </Flex> <Flex margin="0 auto" direction="column" maxW="1250px" px={8}> <Breadcrumb> <BreadcrumbItem> <BreadcrumbLink>Sites</BreadcrumbLink> </BreadcrumbItem> </Breadcrumb> <Flex justifyContent="space-between"> <Heading mb={8}>My Sites</Heading> <Button backgroundColor="gray.900" color="white" fontWeight="medium" _hover={{ bg: 'gray.700' }} _active={{ bg: 'gray.800', transform: 'scale(0.95)' }} > + Add Site </Button> </Flex> {children} </Flex> </Box> );};
export default DashboardShell;