complete dashboard page design and create site added functionality

components/AddSiteModal.jsx

@@ -0,0 +1,82 @@
+import { createSite } from "@/lib/db";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+
+const {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  FormControl,
+  FormLabel,
+  Input,
+  ModalFooter,
+  useDisclosure,
+} = require("@chakra-ui/react");
+
+const AddSiteModal = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const initialRef = useRef(null);
+  // const finalRef = useRef(null);
+
+  const { handleSubmit, register, reset } = useForm();
+  const onSubmit = (values) => {
+    createSite(values);
+    // onClose();
+    reset();
+  };
+
+  return (
+    <>
+      <Button fontWeight={600} maxW="200px" onClick={onOpen}>
+        Add Your First Site
+      </Button>
+
+      <Modal
+        initialFocusRef={initialRef}
+        // finalFocusRef={finalRef}
+        isOpen={isOpen}
+        onClose={onClose}
+      >
+        <ModalOverlay />
+        <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
+          <ModalHeader fontWeight="bold">Add Site</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <FormControl>
+              <FormLabel>Name</FormLabel>
+              <Input
+                ref={initialRef}
+                placeholder="My Site"
+                {...register("site", { required: true })}
+              />
+            </FormControl>
+
+            <FormControl mt={4}>
+              <FormLabel>Link</FormLabel>
+              <Input
+                placeholder="https://website.com"
+                {...register("link", { required: true })}
+              />
+            </FormControl>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button onClick={onClose} mr={3}>
+              Cancel
+            </Button>
+            <Button backgroundColor="#99FFFE" color="#194D4C" type="submit">
+              Create
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default AddSiteModal;

components/DashboardShell.jsx

@@ -0,0 +1,56 @@
+import { useAuth } from "@/lib/auth";
+import {
+  Avatar,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  Flex,
+  Heading,
+  Stack,
+} from "@chakra-ui/react";
+import Link from "next/link";
+import React from "react";
+
+const DashboardShell = ({ children }) => {
+  const auth = useAuth();
+
+  return (
+    <Flex direction="column">
+      <Flex
+        backgroundColor="white"
+        alignItems="center"
+        justifyContent="space-between"
+        py={4}
+        px={8}
+      >
+        <Stack isInline spacing={4} align="center">
+          <Link href="#">Feedback</Link>
+          <Link href="#">Sites</Link>
+        </Stack>
+        <Flex alignItems="center">
+          <Link mr={4} href="#">
+            Account
+          </Link>
+          <Avatar size="sm" src={auth.user.photoURL} />
+        </Flex>
+      </Flex>
+      <Flex backgroundColor="gray.100" p={8} height="100%">
+        <Flex maxWidth="800px" ml="auto" mr="auto" direction="column" w="100%">
+          <Breadcrumb>
+            <BreadcrumbItem isCurrentPage>
+              <BreadcrumbLink color="gray.700" fontSize="sm">
+                Sites
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+          </Breadcrumb>
+          <Heading color="black" mb={4}>
+            Sites
+          </Heading>
+          {children}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DashboardShell;

components/EmptyState.jsx

@@ -0,0 +1,28 @@
+import { Box, Button, Flex, Heading, Text } from "@chakra-ui/react";
+import Link from "next/link";
+import React from "react";
+import AddSiteModal from "./AddSiteModal";
+import DashboardShell from "./DashboardShell";
+
+const EmptyState = () => {
+  return (
+    <DashboardShell>
+      <Flex
+        width="100%"
+        backgroundColor="white"
+        p={16}
+        borderRadius="8px"
+        direction="column"
+        alignItems="center"
+      >
+        <Heading size="lg" mb={2}>
+          You haven&apos;t added any sites
+        </Heading>
+        <Text mb={4}>Welcome. Let&apos;s get started</Text>
+        <AddSiteModal />
+      </Flex>
+    </DashboardShell>
+  );
+};
+
+export default EmptyState;

components/FreePlanEmptyState.jsx

@@ -0,0 +1,18 @@
+import { Box, Button, Heading, Text } from "@chakra-ui/react";
+import Link from "next/link";
+import React from "react";
+import DashboardShell from "./DashboardShell";
+
+const FreePlanEmptyState = () => {
+  return (
+    <DashboardShell>
+      <Box width="100%" backgroundColor="white">
+        <Heading size="md">Get feedback on your site instantly.</Heading>
+        <Text>Start today, then grow with us.</Text>
+        <Button>Upgrade to Starter</Button>
+      </Box>
+    </DashboardShell>
+  );
+};
+
+export default FreePlanEmptyState;

lib/db.js

@@ -1,5 +1,11 @@
 import "@/lib/firebase";
-import { doc, getFirestore, setDoc } from "firebase/firestore";
+import {
+  addDoc,
+  collection,
+  doc,
+  getFirestore,
+  setDoc,
+} from "firebase/firestore";
 
 const db = getFirestore();
 
@@ -11,3 +17,12 @@ export async function createUser(uid, data) {
     console.log(error);
   }
 }
+
+export async function createSite(data) {
+  try {
+    const docRef = await addDoc(collection(db, "sites"), { ...data });
+    // return docRef;
+  } catch (error) {
+    console.log("Error", error);
+  }
+}

package.json

@@ -19,6 +19,7 @@
     "next": "13.0.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.41.5",
     "sass": "^1.57.1"
   }
 }

pages/dashboard.js

@@ -0,0 +1,21 @@
+import EmptyState from "@/components/EmptyState";
+import Head from "next/head";
+import { useAuth } from "../lib/auth";
+
+const Dashboard = () => {
+  const auth = useAuth();
+
+  if (!auth.user) {
+    return "Loading...";
+  }
+  return (
+    <>
+      <Head>
+        <title>Dashboard</title>
+      </Head>
+      <EmptyState />;
+    </>
+  );
+};
+
+export default Dashboard;

pages/index.js

@@ -1,3 +1,4 @@
+import EmptyState from "@/components/EmptyState";
 import { Button, Flex, Heading, Text } from "@chakra-ui/react";
 import Head from "next/head";
 import { useAuth } from "../lib/auth";
@@ -21,12 +22,13 @@ export default function Home() {
         justifyContent="center"
       >
         <Heading>Rapid Review</Heading>
-        {!auth.user && (
-          <Button onClick={(e) => auth.signinWithGithub()}>Sign In</Button>
-        )}
         {auth.user && <Text>{auth.user.email}</Text>}
         {auth.user && <Text>{auth.user.name}</Text>}
-        {auth.user && <Button onClick={(e) => auth.signout()}>Sign Out</Button>}
+        {auth.user ? (
+          <Button onClick={(e) => auth.signout()}>Sign Out</Button>
+        ) : (
+          <Button onClick={(e) => auth.signinWithGithub()}>Sign In</Button>
+        )}
       </Flex>
     </div>
   );

yarn.lock

@@ -3342,6 +3342,11 @@ react-focus-lock@^2.9.1:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-hook-form@^7.41.5:
+  version "7.41.5"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.41.5.tgz#dcd0e7438c15044eadc99df6deb889da5858a03b"
+  integrity sha512-DAKjSJ7X9f16oQrP3TW2/eD9N6HOgrmIahP4LOdFphEWVfGZ2LulFd6f6AQ/YS/0cx/5oc4j8a1PXxuaurWp/Q==
+
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"