M1-TOP Page / UI

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.node-version

@@ -0,0 +1 @@
+20.8.0

app/components/input/index.ts

@@ -0,0 +1 @@
+export { InputSearch } from './input-search'

app/components/input/input-search.tsx

@@ -0,0 +1,41 @@
+import {
+  Input as ChakraInput,
+  InputProps as ChakraInputProps,
+  InputGroup,
+  InputRightElement,
+  IconButton,
+  forwardRef,
+  useColorModeValue
+} from '@chakra-ui/react'
+import { FiSearch } from 'react-icons/fi'
+
+export const InputSearch = forwardRef<ChakraInputProps, 'input'>(
+  ({ ...props }, ref) => {
+    const bgColor = useColorModeValue('white', 'gray.700')
+    const borderColor = useColorModeValue('primary.700', 'gray.500')
+
+    return (
+      <InputGroup minW={{ base: '100%', md: '23.75rem' }}>
+        <ChakraInput
+          ref={ref}
+          {...props}
+          borderColor={borderColor}
+          placeholder="places, dates, tags..."
+          focusBorderColor={'primary.600'}
+          bgColor={bgColor}
+          _placeholder={{ color: 'gray.400' }}
+        />
+        <InputRightElement>
+          <IconButton
+            aria-label="Search Trip"
+            variant="unstyled"
+            type="submit"
+            color="primary.700"
+          >
+            <FiSearch size="24px" />
+          </IconButton>
+        </InputRightElement>
+      </InputGroup>
+    )
+  }
+)

app/components/navigation/footer.tsx

@@ -24,15 +24,9 @@ export const Footer = () => {
             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>
+            <Link href="/">Home</Link>
+            <Link href="/">Terms of Service</Link>
+            <Link href="/">Privacy Policy</Link>
           </Flex>
           <Text as="span" fontSize={{ base: '2xs', md: 'xs' }}>
             Copyright © 2023 Tabi Memo

app/hooks/index.ts

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

app/hooks/useIsMobile.ts

@@ -0,0 +1,7 @@
+import { useBreakpointValue } from '@chakra-ui/react'
+
+type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export const useIsMobile = (breakpoint: BreakpointType = 'md') => {
+  return { isMobile: useBreakpointValue({ base: true, [breakpoint]: false }) }
+}

app/page.tsx

@@ -1,7 +1,43 @@
 'use client'
-import { Heading, Box, Container, useColorModeValue } from '@chakra-ui/react'
+import {
+  Heading,
+  Box,
+  Container,
+  Grid,
+  GridItem,
+  Flex,
+  useColorModeValue
+} from '@chakra-ui/react'
 import { PrimaryButton } from '@/components/button'
 import { Header, Footer } from '@/components/navigation'
+import { TripSearch, TripSort, TripCard } from '@/trip/components'
+
+const dummy = [
+  {
+    id: 1,
+    title: 'Tokyo',
+    date_from: 'Oct 10, 2023',
+    date_to: 'Nov 10, 2023',
+    image_storage_object_id:
+      'https://placehold.jp/6381f8/ffffff/366x277.png?text=Picture',
+    share: [
+      { id: '', image: '' },
+      { id: '', image: '' }
+    ]
+  },
+  {
+    id: 2,
+    title: 'Kyoto',
+    date_from: 'Oct 10, 2023',
+    date_to: 'Nov 10, 2023',
+    image_storage_object_id:
+      'https://placehold.jp/6381f8/ffffff/366x277.png?text=Picture',
+    share: [
+      { id: '', image: '' },
+      { id: '', image: '' }
+    ]
+  }
+]
 
 export default function Top() {
   const bg = useColorModeValue('white', 'gray.800')
@@ -16,8 +52,42 @@ export default function Top() {
           pt={{ base: '20px', md: '30px' }}
           pb={{ base: '40px', md: '80px' }}
         >
-          <Heading>Top Page</Heading>
-          <PrimaryButton>Button</PrimaryButton>
+          <Grid
+            templateRows={'repeat(2, 1fr)'}
+            gridTemplateColumns={{ base: '1fr', lg: '342px 1fr' }}
+            alignItems="center"
+            gap={{ base: '12px', lg: '40px' }}
+          >
+            <GridItem
+              display="flex"
+              alignItems="center"
+              justifyContent="space-between"
+              colSpan={{ base: 2, lg: 1 }}
+            >
+              <Heading as={'h1'} fontSize={{ base: '2xl', md: '4xl' }}>
+                My Trips
+              </Heading>
+              <PrimaryButton w="9.5rem">Add New Trip</PrimaryButton>
+            </GridItem>
+            <GridItem ml={{ base: '', lg: 'auto' }}>
+              <TripSearch />
+            </GridItem>
+            <GridItem>
+              <TripSort />
+            </GridItem>
+          </Grid>
+          <Flex
+            gap={{ base: '20px', md: '60px' }}
+            mt={{ base: '38px', md: '40px' }}
+            flexWrap={'wrap'}
+          >
+            {dummy.map((trip) => (
+              <TripCard key={trip.id} data={trip} />
+            ))}
+          </Flex>
+          <Box textAlign="center" mt={{ base: '40px', md: '60px' }}>
+            <PrimaryButton variant="outline">Load More</PrimaryButton>
+          </Box>
         </Container>
       </Box>
       <Footer />

app/theme/button.ts

@@ -0,0 +1,11 @@
+export const Button = {
+  // Override the default dark mode theme
+  variants: {
+    solid: ({ colorMode }: { colorMode: 'dark' | 'light' }) => ({
+      bg: colorMode === 'dark' ? 'primary.500' : 'primary.500'
+    }),
+    outline: ({ colorMode }: { colorMode: 'dark' | 'light' }) => ({
+      color: colorMode === 'dark' ? 'primary.700' : 'primary.700'
+    })
+  }
+}

app/theme/index.ts

@@ -1,11 +1,22 @@
 import { extendTheme, withDefaultColorScheme } from '@chakra-ui/react'
+import { Button } from '@/theme/button'
 import { customColors } from '@/theme/color'
+
 export const customTheme = extendTheme(
   {
     fonts: {
       heading: 'var(--font-rubik)',
       body: 'var(--font-rubik)'
     },
+    styles: {
+      global: {
+        a: {
+          _hover: {
+            textDecoration: 'none'
+          }
+        }
+      }
+    },
     colors: customColors,
     sizes: {
       // Use with padding (ex: Container component)
@@ -15,6 +26,9 @@ export const customTheme = extendTheme(
         lg: '1024px',
         xl: '1232px'
       }
+    },
+    components: {
+      Button
     }
   },
   withDefaultColorScheme({ colorScheme: 'primary' })

app/trip/components/index.ts

@@ -0,0 +1,3 @@
+export { TripCard } from './trip-card'
+export { TripSearch } from './trip-search'
+export { TripSort } from './trip-sort'

app/trip/components/trip-card.tsx

@@ -0,0 +1,108 @@
+import { Link as NextLink } from '@chakra-ui/next-js'
+import {
+  Card,
+  CardBody,
+  Heading,
+  Flex,
+  Image,
+  Box,
+  useColorModeValue
+} from '@chakra-ui/react'
+import { MdAccountCircle } from 'react-icons/md'
+
+type TripCardProps = {
+  data: {
+    id: number
+    title: string
+    image_storage_object_id: string
+    date_from: string
+    date_to: string
+    share: { id: string; image: string }[]
+  }
+}
+
+export const TripCard = ({ data }: TripCardProps) => {
+  const bgColorSp = useColorModeValue('white', 'gray.800')
+  const bgColorPc = useColorModeValue('white', 'gray.700')
+  const borderColor = useColorModeValue('gray.200', 'gray.600')
+
+  return (
+    <Card
+      as={NextLink}
+      href={`/trip/${data.id}`}
+      role={'group'}
+      maxW={{ base: '100%', lg: '360px' }}
+      pb={{ base: '12px', md: '0px' }}
+      flexDir={{ base: 'row', md: 'column' }}
+      gap={{ base: '14px', md: '0px' }}
+      justify="space-between"
+      w="100%"
+      borderRadius={{ base: 'none', md: 'lg' }}
+      boxShadow={{ base: 'none', md: 'base' }}
+      borderBottom={{ base: '1px', md: 'none' }}
+      borderColor={{ base: borderColor, md: 'none' }}
+      bgColor={{ base: bgColorSp, md: bgColorPc }}
+      align="center"
+      _hover={{
+        textDecoration: 'none'
+      }}
+    >
+      <Box overflow="hidden" w={{ base: '', md: '100%' }}>
+        <Image
+          src={data.image_storage_object_id}
+          alt={`Picture of ${data.title}`}
+          w={{ base: '150px', md: '100%' }}
+          h={{ base: '100px', md: '240px' }}
+          objectFit="cover"
+          _groupHover={{
+            transform: 'scale(1.1)',
+            transition: 'all 0.3s'
+          }}
+        />
+      </Box>
+      <CardBody
+        display="flex"
+        flexDir="column"
+        justifyContent="space-between"
+        overflow="hidden"
+        w="100%"
+        gap="8px"
+        py={{ base: '0', md: '12px' }}
+        px={{ base: '0', md: '8px' }}
+      >
+        <Heading
+          fontSize={{ base: 'lg', md: 'xl' }}
+          color="primary.700"
+          display={'-webkit-box'}
+          overflow={'hidden'}
+          sx={{
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: '2'
+          }}
+          _groupHover={{
+            color: 'primary.600'
+          }}
+        >
+          {data.title}
+        </Heading>
+        <Flex gap="8px" color="gray.400">
+          <Box
+            w={{ base: '26px', md: '38px' }}
+            h={{ base: '26px', md: '38px' }}
+          >
+            <MdAccountCircle size="100%" />
+          </Box>
+          <Box
+            w={{ base: '26px', md: '38px' }}
+            h={{ base: '26px', md: '38px' }}
+          >
+            <MdAccountCircle size="100%" />
+          </Box>
+        </Flex>
+        <Flex fontSize={{ base: 'sm', md: 'md' }}>
+          {data.date_from} - {data.date_to}
+        </Flex>
+      </CardBody>
+    </Card>
+  )
+}

app/trip/components/trip-search.tsx

@@ -0,0 +1,5 @@
+import { InputSearch } from '@/components/input'
+
+export const TripSearch = () => {
+  return <InputSearch />
+}

app/trip/components/trip-sort.tsx

@@ -0,0 +1,47 @@
+import { Menu, MenuButton, MenuList, MenuItem, Flex } from '@chakra-ui/react'
+import { MdOutlineSort, MdArrowDropDown } from 'react-icons/md'
+import { useIsMobile } from '@/hooks'
+
+export const TripSort = () => {
+  const { isMobile } = useIsMobile()
+
+  return (
+    <Menu>
+      <MenuButton
+        borderWidth={{ base: 'none', md: '1px' }}
+        borderColor="gray.300"
+        p={{ base: '0px', md: '8px' }}
+      >
+        {isMobile ? (
+          <Flex as="span" color="primary.700">
+            <MdOutlineSort size="40px" />
+          </Flex>
+        ) : (
+          <Flex
+            as="span"
+            align="center"
+            gap="8px"
+            fontWeight={700}
+            sx={{
+              svg: {
+                _last: {
+                  color: 'gray.400'
+                }
+              }
+            }}
+          >
+            <MdOutlineSort size="18px" />
+            Sort By
+            <MdArrowDropDown size="30px" />
+          </Flex>
+        )}
+      </MenuButton>
+
+      <MenuList>
+        <MenuItem>Date</MenuItem>
+        <MenuItem>Created</MenuItem>
+        <MenuItem>Title</MenuItem>
+      </MenuList>
+    </Menu>
+  )
+}