Merge pull request #4 from tabi-memo/common_components

Common components (Header, Footer, Link)

app/components/link/index.ts

@@ -0,0 +1 @@
+export { Link } from './link'

app/components/link/link.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Link as NextLink } from '@chakra-ui/next-js'
+import {
+  Link as ChakraLink,
+  LinkProps as ChakraLinkProps
+} from '@chakra-ui/react'
+
+export type LinkProps = {
+  isExternal?: boolean
+  hasUnderLine?: boolean
+  href: string
+  children?: React.ReactNode
+}
+
+const underLineStyles = {
+  textDecoration: 'underline',
+  textUnderlineOffset: 2,
+  _hover: {
+    opacity: '.8',
+    textDecoration: 'underline',
+    textUnderlineOffset: 2
+  }
+}
+
+export const Link = ({
+  isExternal = false,
+  hasUnderLine = false,
+  href,
+  children,
+  ...props
+}: LinkProps & ChakraLinkProps) => {
+  const linkStyles = hasUnderLine
+    ? {
+        ...underLineStyles,
+        ...props
+      }
+    : {
+        _hover: underLineStyles,
+        ...props
+      }
+
+  return isExternal ? (
+    <ChakraLink href={href} {...linkStyles} isExternal>
+      {children}
+    </ChakraLink>
+  ) : (
+    <NextLink href={href} {...linkStyles}>
+      {children}
+    </NextLink>
+  )
+}

app/components/link/stories/link.stories.tsx

@@ -0,0 +1,19 @@
+import { Link } from '@/components/link'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Link> = {
+  title: 'Link/Link',
+  component: Link
+}
+
+export default meta
+type Story = StoryObj<typeof Link>
+
+export const Default: Story = {
+  args: {
+    children: 'Link',
+    href: '/',
+    isExternal: false,
+    hasUnderLine: false
+  }
+}

app/components/navigation/footer.tsx

@@ -0,0 +1,44 @@
+import {
+  Container,
+  Flex,
+  Box,
+  VStack,
+  Text,
+  useColorModeValue
+} from '@chakra-ui/react'
+import { Link } from '@/components/link'
+
+export const Footer = () => {
+  const bg = useColorModeValue('primary.800', 'primary.910')
+  const color = useColorModeValue('white', 'gray.300')
+
+  return (
+    <Box as="footer" bg={bg} color={color}>
+      <Container
+        maxW={{ base: '100%', lg: 'container.xl' }}
+        py={{ base: '12px', md: '24px' }}
+      >
+        <VStack gap={{ base: '10px', md: '18px' }}>
+          <Flex
+            fontSize={{ base: 'xs', md: 'sm' }}
+            gap={{ base: '14px', md: '60px' }}
+          >
+            {/* TODO Change Link URL */}
+            <Link href="/" hasUnderLine>
+              Home
+            </Link>
+            <Link href="/" hasUnderLine>
+              Terms of Service
+            </Link>
+            <Link href="/" hasUnderLine>
+              Privacy Policy
+            </Link>
+          </Flex>
+          <Text as="span" fontSize={{ base: '2xs', md: 'xs' }}>
+            Copyright © 2023 Tabi Memo
+          </Text>
+        </VStack>
+      </Container>
+    </Box>
+  )
+}

app/components/navigation/header.tsx

@@ -0,0 +1,84 @@
+import {
+  Container,
+  Flex,
+  Box,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  IconButton,
+  useColorMode,
+  useColorModeValue
+} from '@chakra-ui/react'
+import Image from 'next/image'
+import { FiMoon, FiSun } from 'react-icons/fi'
+import { MdAccountCircle, MdLogout } from 'react-icons/md'
+
+export const Header = () => {
+  const { colorMode, toggleColorMode } = useColorMode()
+  const bg = useColorModeValue('white', 'gray.800')
+  const borderColor = useColorModeValue('gray.200', 'gray.600')
+
+  return (
+    <Flex
+      as="header"
+      justifyContent="center"
+      borderBottomWidth="1px"
+      borderBottomColor={borderColor}
+      bg={bg}
+    >
+      <Container
+        maxW={{ base: '100%', lg: 'container.xl' }}
+        py={{ base: '8px', md: '12px' }}
+      >
+        <Flex justifyContent="space-between" align="center">
+          <Image src="/logo/logo.png" width={144} height={40} alt="Tabi Memo" />
+          <Flex gap={{ base: '20px', md: '28px' }}>
+            <Menu>
+              <MenuButton
+                as={IconButton}
+                aria-label="Options"
+                icon={<MdAccountCircle size="100%" />}
+                variant="unstyled"
+                color="gray.400"
+                w={{ base: '26px', md: '40px' }}
+                h={{ base: '26px', md: '40px' }}
+              />
+              {/* TODO Change Link and Add Logout logic */}
+              <MenuList fontSize={{ base: 'md', md: 'lg' }} bgColor="white">
+                <MenuItem bgColor="white" _hover={{ bgColor: 'gray.100' }}>
+                  Account Info
+                </MenuItem>
+                <MenuItem
+                  icon={<MdLogout size="20px" />}
+                  bgColor="white"
+                  _hover={{ bgColor: 'gray.100' }}
+                  sx={{
+                    svg: {
+                      color: 'primary.700'
+                    }
+                  }}
+                >
+                  Logout
+                </MenuItem>
+              </MenuList>
+            </Menu>
+            <Box
+              as="button"
+              w={{ base: '26px', md: '40px' }}
+              h={{ base: '26px', md: '40px' }}
+              color="gray.400"
+              onClick={toggleColorMode}
+            >
+              {colorMode === 'light' ? (
+                <FiMoon size="100%" />
+              ) : (
+                <FiSun size="100%" />
+              )}
+            </Box>
+          </Flex>
+        </Flex>
+      </Container>
+    </Flex>
+  )
+}

app/components/navigation/index.ts

@@ -0,0 +1,2 @@
+export { Footer } from './footer'
+export { Header } from './header'

app/components/navigation/stories/footer.stories.tsx

@@ -0,0 +1,14 @@
+import { Footer } from '@/components/navigation'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Footer> = {
+  title: 'Navigation/Footer',
+  component: Footer
+}
+
+export default meta
+type Story = StoryObj<typeof Footer>
+
+export const Default: Story = {
+  args: {}
+}

app/components/navigation/stories/header.stories.tsx

@@ -0,0 +1,14 @@
+import { Header } from '@/components/navigation'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof Header> = {
+  title: 'Navigation/Header',
+  component: Header
+}
+
+export default meta
+type Story = StoryObj<typeof Header>
+
+export const Default: Story = {
+  args: {}
+}

app/page.tsx

@@ -1,49 +1,26 @@
 'use client'
-import { Link } from '@chakra-ui/next-js'
-import { Heading, VStack, Box, useColorMode } from '@chakra-ui/react'
+import { Heading, Box, Container, useColorModeValue } from '@chakra-ui/react'
 import { PrimaryButton } from '@/components/button'
+import { Header, Footer } from '@/components/navigation'
 
-export default function Home() {
-  const { colorMode, toggleColorMode } = useColorMode()
+export default function Top() {
+  const bg = useColorModeValue('white', 'gray.800')
+  const color = useColorModeValue('black', 'gray.300')
 
   return (
     <>
-      <Heading>Home</Heading>
-      <Link
-        href="/auth/login"
-        color="primary.700"
-        _hover={{ color: 'primary.900' }}
-      >
-        Login
-      </Link>
-      <br />
-      <Link
-        href="/auth/signup"
-        color="primary.700"
-        _hover={{ color: 'primary.900' }}
-      >
-        SignUp
-      </Link>
-
-      <Box>
-        <PrimaryButton onClick={toggleColorMode} variant="outline">
-          {colorMode === 'light' ? 'To Dark' : 'To Light'}
-        </PrimaryButton>
+      <Header />
+      <Box as="main" minH="100vh" bg={bg} color={color}>
+        <Container
+          maxW={{ base: '100%', lg: 'container.xl' }}
+          pt={{ base: '20px', md: '30px' }}
+          pb={{ base: '40px', md: '80px' }}
+        >
+          <Heading>Top Page</Heading>
+          <PrimaryButton>Button</PrimaryButton>
+        </Container>
       </Box>
-
-      <VStack>
-        <Box>Button List (only primary)</Box>
-        <PrimaryButton>Button</PrimaryButton>
-        <PrimaryButton isActive>Button</PrimaryButton>
-        <PrimaryButton isDisabled>Button</PrimaryButton>
-        <PrimaryButton variant={'outline'}>Button</PrimaryButton>
-        <PrimaryButton isActive variant={'outline'}>
-          Button
-        </PrimaryButton>
-        <PrimaryButton isDisabled variant={'outline'}>
-          Button
-        </PrimaryButton>
-      </VStack>
+      <Footer />
     </>
   )
 }

app/theme/index.ts

@@ -1,6 +1,5 @@
 import { extendTheme, withDefaultColorScheme } from '@chakra-ui/react'
 import { customColors } from '@/theme/color'
-
 export const customTheme = extendTheme(
   {
     fonts: {
@@ -9,11 +8,12 @@ export const customTheme = extendTheme(
     },
     colors: customColors,
     sizes: {
+      // Use with padding (ex: Container component)
       container: {
         sm: '648px',
         md: '710px',
         lg: '1024px',
-        xl: '1200px'
+        xl: '1232px'
       }
     }
   },

package.json

@@ -45,6 +45,7 @@
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-storybook": "^0.6.15",
     "prettier": "^3.0.3",
+    "react-icons": "^4.12.0",
     "sb": "^7.5.3",
     "storybook": "^7.5.3",
     "typescript": "^5"