created activity detail page

tabi-memo · Nov 25, 2023 · 4430fda · 4430fda
1 parent 24ea770
commit 4430fda
Show file tree

Hide file tree

Showing 8 changed files with 302 additions and 2 deletions.
diff --git a/app/activity/details/page.tsx b/app/activity/details/page.tsx
@@ -0,0 +1,97 @@
+'use client'
+import {
+  Heading,
+  Box,
+  Container,
+  useColorModeValue,
+  Flex,
+  Spacer,
+  Text,
+  Textarea,
+  Input,
+  FormControl,
+  FormLabel
+} from '@chakra-ui/react'
+
+import { FiChevronLeft, FiClock, FiMapPin, FiLink2 } from 'react-icons/fi'
+import { Link } from '@/components/link'
+import { Header, Footer } from '@/components/navigation'
+import { TrashIcon, EditIcon } from '@/icons'
+import { Carousel } from '../../components/carousel'
+import { customColors } from '@/theme/color'
+
+export default function ActivityDetails() {
+  const bg = useColorModeValue('white', 'gray.800')
+  const color = useColorModeValue('black', 'gray.300')
+  return (
+    <>
+      <Header />
+      <Box as="main" minH="100vh" bg={bg} color={color}>
+        <Container
+          maxW={{ base: '710px' }}
+          pt={{ base: '20px', md: '30px' }}
+          pb={{ base: '40px', md: '80px' }}
+        >
+          <Flex pb={{ base: '30px', md: '40px' }}>
+            <Heading fontSize={{ base: 'xl', md: '2xl' }}>
+              Asakusa Temple
+            </Heading>
+            <Spacer />
+            <TrashIcon />
+            <EditIcon />
+          </Flex>
+          <Flex flexDirection="column" pb={{ base: '40px', md: '48px' }}>
+            <Box display="flex" alignItems="center" my={1}>
+              <FiClock style={{ color: customColors.gray[400] }} />
+              <Text
+                fontSize={{ base: 'md', md: 'lg' }}
+                fontWeight="semibold"
+                mx={2}
+              >
+                Oct.1, 2023 16:00
+              </Text>
+            </Box>
+            <Box display="flex" alignItems="center" my={1}>
+              <FiMapPin style={{ color: customColors.gray[400] }} />
+              <Text
+                fontSize={{ base: 'md', md: 'lg' }}
+                fontWeight="semibold"
+                mx={2}
+              >
+                10-20 Shibury, Tokyo, Japan
+              </Text>
+            </Box>
+            <Box display="flex" alignItems="center" my={1}>
+              <FiLink2 style={{ color: customColors.gray[400] }} />
+              <Link
+                mx={2}
+                href="/"
+                hasUnderLine
+                color="primary.700"
+                fontSize={{ base: 'md', md: 'lg' }}
+              >
+                https://www.google.com
+              </Link>
+            </Box>
+          </Flex>
+          <Carousel />
+          <Flex flexDirection="column">
+            <FormControl mt={{ base: '40px', md: '48px' }}>
+              <FormLabel>Memo</FormLabel>
+              <Textarea placeholder="Memo" />
+            </FormControl>
+            <FormControl mt={{ base: '30px', md: '40px' }}>
+              <FormLabel>Cost</FormLabel>
+              <Input placeholder="$20,000" />
+            </FormControl>
+          </Flex>
+          <Box mt="60px" display="flex" alignItems="center">
+            <FiChevronLeft />
+            <Link href="/">Got back to Trip Details</Link>
+          </Box>
+        </Container>
+      </Box>
+      <Footer />
+    </>
+  )
+}
diff --git a/app/components/carousel/carousel.tsx b/app/components/carousel/carousel.tsx
@@ -0,0 +1,104 @@
+'use client'
+
+import React from 'react'
+import {
+  Box,
+  IconButton,
+  useBreakpointValue,
+  useColorModeValue
+} from '@chakra-ui/react'
+import { BiLeftArrowAlt, BiRightArrowAlt } from 'react-icons/bi'
+import Slider from 'react-slick'
+
+const settings = {
+  dots: true,
+  arrows: false,
+  fade: true,
+  infinite: true,
+  autoplay: true,
+  speed: 500,
+  autoplaySpeed: 5000,
+  slidesToShow: 1,
+  slidesToScroll: 1
+}
+
+export const Carousel = () => {
+  const color = useColorModeValue('white', 'gray.300')
+  const [slider, setSlider] = React.useState<Slider | null>(null)
+
+  const top = useBreakpointValue({ base: '90%', md: '50%' })
+  const side = useBreakpointValue({ base: '30%', md: '10px' })
+
+  // These are the images used in the slide
+  const cards = [
+    'https://images.unsplash.com/photo-1612852098516-55d01c75769a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+    'https://images.unsplash.com/photo-1627875764093-315831ac12f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60',
+    'https://images.unsplash.com/photo-1571432248690-7fd6980a1ae2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60'
+  ]
+
+  return (
+    <Box
+      position={'relative'}
+      height={'400px'}
+      width={'full'}
+      overflow={'hidden'}
+    >
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+      />
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+      />
+      {/* Left Icon */}
+      <IconButton
+        aria-label="left-arrow"
+        bgColor="gray.400"
+        colorScheme="white"
+        borderRadius="full"
+        position="absolute"
+        left={side}
+        top={top}
+        transform={'translate(0%, -50%)'}
+        zIndex={2}
+        onClick={() => slider?.slickPrev()}
+        _hover={{ opacity: 0.8 }}
+      >
+        <BiLeftArrowAlt />
+      </IconButton>
+      {/* Right Icon */}
+      <IconButton
+        aria-label="right-arrow"
+        bgColor="gray.400"
+        colorScheme="white"
+        borderRadius="full"
+        position="absolute"
+        right={side}
+        top={top}
+        transform={'translate(0%, -50%)'}
+        zIndex={2}
+        onClick={() => slider?.slickNext()}
+        _hover={{ opacity: 0.8 }}
+      >
+        <BiRightArrowAlt />
+      </IconButton>
+      {/* Slider */}
+      <Slider {...settings} ref={(slider) => setSlider(slider)}>
+        {cards.map((url, index) => (
+          <Box
+            key={index}
+            height={'2xl'}
+            position="relative"
+            backgroundPosition="center"
+            backgroundRepeat="no-repeat"
+            backgroundSize="cover"
+            backgroundImage={`url(${url})`}
+          />
+        ))}
+      </Slider>
+    </Box>
+  )
+}
diff --git a/app/components/carousel/index.ts b/app/components/carousel/index.ts
@@ -0,0 +1 @@
+export { Carousel } from './carousel'
diff --git a/app/icons/edit-icon.tsx b/app/icons/edit-icon.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Box } from '@chakra-ui/react'
+
+export const EditIcon = () => {
+  return (
+    <Box
+      w={{ base: '25px', md: '30px' }}
+      h={{ base: '25px', md: '30px' }}
+      _hover={{ opacity: 0.8 }}
+      mx={1}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40">
+        <path
+          fill="#0987A0"
+          fillRule="evenodd"
+          d="M8.333 33.334h23.334a1.667 1.667 0 010 3.333H8.333a1.667 1.667 0 010-3.333zm-1.666-8.333L23.333 8.334l5 5-16.666 16.667h-5v-5zM25 6.667l3.333-3.333 5 5-3.335 3.335L25 6.667z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </Box>
+  )
+}
diff --git a/app/icons/index.ts b/app/icons/index.ts
@@ -0,0 +1,2 @@
+export { TrashIcon } from './trash-icon'
+export {EditIcon} from './edit-icon'
diff --git a/app/icons/trash-icon.tsx b/app/icons/trash-icon.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { Box } from '@chakra-ui/react'
+export const TrashIcon = () => {
+  return (
+    <Box
+      w={{ base: '25px', md: '30px' }}
+      h={{ base: '25px', md: '30px' }}
+      _hover={{ opacity: 0.8 }}
+      mx={1}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40">
+        <path
+          fill="#0987A0"
+          d="M6.667 8.334h5V6.667A3.333 3.333 0 0115 3.334h10a3.333 3.333 0 013.333 3.333v1.667h5a1.666 1.666 0 110 3.333h-1.666v21.667a3.333 3.333 0 01-3.334 3.333H11.667a3.333 3.333 0 01-3.334-3.333V11.667H6.667a1.667 1.667 0 010-3.333zm5 3.333v21.667h16.666V11.667H11.667zM15 8.334h10V6.667H15v1.667zm0 6.667h3.333v15H15V15zm6.667 0H25v15h-3.333V15z"
+        ></path>
+      </svg>
+    </Box>
+  )
+}
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "framer-motion": "^10.16.4",
     "next": "14.0.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
     "@chakra-ui/storybook-addon": "^5.0.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { TrashIcon } from './trash-icon'
		export {EditIcon} from './edit-icon'