Add boilerplate

Author: andersy005

.pre-commit-config.yaml

@@ -0,0 +1,16 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.0.1
+    hooks:
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+      - id: check-json
+      - id: check-added-large-files
+        args: ["--maxkb=20000"]
+      - id: check-yaml
+      - id: double-quote-string-fixer
+
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v2.3.2
+    hooks:
+      - id: prettier

.prettierrc.toml

@@ -0,0 +1,3 @@
+tabWidth = 2
+semi = false
+singleQuote = false

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}

package.json

@@ -9,9 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^1.0.15",
+    "@chakra-ui/react": "^1.6.6",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "framer-motion": "^4.1.17",
     "next": "11.0.1",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-custom-scrollbars-2": "^4.4.0",
+    "react-dom": "17.0.2",
+    "react-scroll": "^1.8.3"
   },
   "devDependencies": {
     "eslint": "7.32.0",

pages/_app.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { Flex } from "@chakra-ui/react"
+import Header from "sections/header"
+import Footer from "sections/footer"
+
+export default function Landing(props) {
+  return (
+    <Flex direction="column">
+      <Header />
+      {props.children}
+      <Footer />
+    </Flex>
+  )
+}

pages/api/hello.js

@@ -0,0 +1,138 @@
+import React from "react"
+import {
+  Box,
+  Flex,
+  Text,
+  IconButton,
+  Button,
+  Stack,
+  Collapse,
+  Icon,
+  Link,
+  useColorModeValue,
+  useBreakpointValue,
+  useDisclosure,
+} from "@chakra-ui/react"
+
+import { HamburgerIcon, CloseIcon } from "@chakra-ui/icons"
+
+import menuItems from "../../utils"
+
+const DesktopNav = () => {
+  const linkColor = useColorModeValue("gray.600", "gray.200")
+  const linkHoverColor = useColorModeValue("gray.800", "white")
+
+  return (
+    <Stack direction="row" spacing={4}>
+      {menuItems.map((navItem) => (
+        <Box key={navItem.label}>
+          <Link
+            p={2}
+            href={navItem.path ?? "#"}
+            fontSize={"sm"}
+            fontWeight={500}
+            color={linkColor}
+            _hover={{ textDecoration: "none", color: linkHoverColor }}
+          >
+            {navItem.label}
+          </Link>
+        </Box>
+      ))}
+    </Stack>
+  )
+}
+
+const MobileNavItem = ({ label, path }) => {
+  const { isOpen, onToggle } = useDisclosure()
+
+  return (
+    <Stack spacing={4} onClick={onToggle}>
+      <Flex
+        py={2}
+        as={Link}
+        href={path ?? "#"}
+        justify={"space-between"}
+        align={"center"}
+        _hover={{ textDecoration: "none" }}
+      >
+        <Text
+          fontWeight={600}
+          color={useColorModeValue("gray.600", "gray.200")}
+        >
+          {label}
+        </Text>
+      </Flex>
+
+      <Collapse
+        isOpen={isOpen}
+        animateOpacity
+        style={{ marginTop: "0!important" }}
+      ></Collapse>
+    </Stack>
+  )
+}
+
+const MobileNav = () => {
+  return (
+    <Stack
+      bg={useColorModeValue("white", "gray.800")}
+      p={4}
+      display={{ md: "none" }}
+    >
+      {menuItems.map((navItem) => (
+        <MobileNavItem key={navItem.label} {...navItem} />
+      ))}
+    </Stack>
+  )
+}
+
+export default function Header({ className }) {
+  const { isOpen, onToggle } = useDisclosure()
+
+  return (
+    <Box>
+      <Flex
+        bg={useColorModeValue("white", "gray.800")}
+        color={useColorModeValue("gray.600", "white")}
+        minH={"60px"}
+        py={{ base: 2 }}
+        px={{ base: 4 }}
+        borderBottom={1}
+        borderStyle={"solid"}
+        borderColor={useColorModeValue("gray.300", "gray.800")}
+        align={"center"}
+      >
+        <Flex
+          flex={{ base: 1, md: "auto" }}
+          ml={{ base: -2 }}
+          display={{ base: "flex", md: "none" }}
+        >
+          <IconButton
+            onClick={onToggle}
+            icon={
+              isOpen ? <CloseIcon w={3} h={3} /> : <HamburgerIcon w={5} h={5} />
+            }
+            variant={"ghost"}
+            aria-label={"Toggle Navigation"}
+          />
+        </Flex>
+        <Flex flex={{ base: 1 }} justify={{ base: "center", md: "start" }}>
+          <Text
+            textAlign={useBreakpointValue({ base: "center", md: "left" })}
+            fontFamily={"heading"}
+            color={useColorModeValue("gray.600", "white")}
+          >
+            Logo
+          </Text>
+          <Flex display={{ base: "none", md: "flex" }} ml={10}>
+            <DesktopNav />
+          </Flex>
+        </Flex>
+      </Flex>
+
+      <Collapse isOpen={isOpen} animateOpacity>
+        <MobileNav />
+      </Collapse>
+    </Box>
+  )
+}

pages/index.js

@@ -0,0 +1,12 @@
+import React from "react"
+import { Box, Text } from "@chakra-ui/react"
+
+export default function Logo(props) {
+  return (
+    <Box {...props}>
+      <Text fontSize="lg" fontWeight="bold">
+        Logo
+      </Text>
+    </Box>
+  )
+}