Merge pull request #2 from chimobi-justice/ft/forum

added forum

src/App.tsx

@@ -7,13 +7,17 @@ import {
 
 import Layout from '@layout/index'
 import Home from '@pages/Home'
+import Forum from '@pages/Forum'
+import ShowSingleForum from '@pages/Forum/show'
 import NotFound from '@components/NotFound'
 
 const routes = createBrowserRouter(
   createRoutesFromElements(
     <>
       <Route path="/" element={<Layout />}>
         <Route index path='/' element={<Home />} />
+        <Route index path='/forum' element={<Forum />} />
+        <Route index path='/forum/:slug' element={<ShowSingleForum />} />
 
         <Route index path='*' element={<NotFound />} />
       </Route>

src/components/Footer/index.tsx

@@ -55,7 +55,7 @@ const Footer: FunctionComponent = () => {
               size={"md"}
               color={colors.primary}
             >
-              Product
+              Main
             </Heading>
             <List
               my={"25px"}

src/components/Search/index.tsx

@@ -0,0 +1,57 @@
+import { useRef } from 'react'
+import {
+  Input,
+  InputGroup,
+  InputLeftElement,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  useDisclosure
+} from '@chakra-ui/react'
+import { FiSearch } from 'react-icons/fi'
+import Button from '@components/Button'
+
+const Search = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  const initialRef = useRef(null)
+  const finalRef = useRef(null)
+
+  return (
+    <>
+      <Button
+        size="md"
+        rounded="md"
+        type="button"
+        variant="outline"
+        onClick={onOpen}
+
+      >
+        <FiSearch />
+      </Button>
+
+      <Modal
+        initialFocusRef={initialRef}
+        finalFocusRef={finalRef}
+        isOpen={isOpen}
+        onClose={onClose}
+        size={"2xl"}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalBody py={6}>
+            <InputGroup>
+              <InputLeftElement pointerEvents='none'>
+                <FiSearch />
+              </InputLeftElement>
+              <Input type='tel' placeholder="Search..." ref={initialRef} />
+            </InputGroup>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+export default Search;

src/components/index.tsx

@@ -5,6 +5,7 @@ import Footer from '@components/Footer'
 import HeroSection from '@components/HeroSection'
 import NavBar from '@components/NavBar'
 import NotFound from '@components/NotFound'
+import Search from '@components/Search'
 
 export {
   Button,
@@ -14,4 +15,5 @@ export {
   LatestArticleCard,
   NavBar,
   NotFound,
+  Search,
 }

src/pages/Forum/components/discussionCard.tsx

@@ -0,0 +1,64 @@
+import { Link } from 'react-router-dom'
+import {
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+  Stack,
+  StackDivider,
+  Text
+} from '@chakra-ui/react'
+import { FaArrowRight } from 'react-icons/fa6'
+
+import truncate from '@helpers/truncate'
+
+const DiscussionCard = () => {
+  const data = [1, 2, 3];
+  return (
+    <Card>
+      <CardHeader pb={"4px"}>
+        <Heading size={"sm"}>Top Discussions this week</Heading>
+      </CardHeader>
+
+      <CardBody>
+        <Stack
+          divider={<StackDivider />}
+          spacing={4}
+          lineHeight={"1.5em"}
+        >
+          {data.map((index) => (
+            <Box key={index}>
+              <Text
+                fontSize={"13px"}
+                fontWeight={"300"}
+              >
+                {truncate("Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum alias corporis quae sed illum sunt!", 70)}
+              </Text>
+
+              <Link to="hhs">
+                <Text
+                  as="span"
+                  display={"flex"}
+                  alignItems={"center"}
+                  fontSize={"13px"}
+                  fontWeight={"bold"}
+                  mt={"3px"}
+
+                  gap={2}
+                  _hover={{
+                    textDecoration: "underline"
+                  }}
+                >
+                  Details <FaArrowRight color="#0009" />
+                </Text>
+              </Link>
+            </Box>
+          ))}
+        </Stack>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default DiscussionCard;

src/pages/Forum/components/followCard.tsx

@@ -0,0 +1,68 @@
+import { Link } from 'react-router-dom'
+import {
+  Avatar,
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Flex,
+  Heading,
+  Text,
+} from '@chakra-ui/react'
+
+import { colors } from '../../../colors'
+import { Button } from '@components/index'
+import AvatarPic from '@assets/images/avatar.jpg'
+
+const FollowCard = () => {
+  const data = [1, 2, 3];
+
+  return (
+    <Card>
+      <CardHeader pb={"4px"}>
+        <Heading size={"sm"}>People to follow</Heading>
+      </CardHeader>
+
+      <CardBody>
+        {data.map((index) => (
+          <Flex key={index} mb={"8px"}>
+            <Flex flex="1" gap="4" alignItems="center" flexWrap="wrap">
+              <Avatar size={"sm"} name="Justice Chimobi" src={AvatarPic} />
+
+              <Box>
+                <Heading size="xs">Justice Chimobi</Heading>
+                <Text fontSize={"13px"} color={"#0009"}>Developer at Retailloop</Text>
+              </Box>
+            </Flex>
+
+            <Button
+              size="sm"
+              rounded="lg"
+              type="button"
+              variant="outline"
+
+            >
+              follow
+            </Button>
+          </Flex>
+        ))}
+
+        <Link to="/follow/people">
+          <Text 
+            fontSize={"13px"} 
+            color={colors.primary} 
+            mt={"20px"} 
+            _hover={{
+              color: "#101828",
+              textDecoration: "underline"
+            }}
+          >
+            See more suggestions
+          </Text>
+        </Link>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default FollowCard;

src/pages/Forum/components/recommendTopicCard.tsx

@@ -0,0 +1,55 @@
+import { Link } from 'react-router-dom'
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+  Tag,
+  Text,
+  Wrap,
+  WrapItem
+} from '@chakra-ui/react'
+
+import { colors } from '../../../colors'
+
+const RecommendTopicCard = () => {
+  const data = [1, 2, 3, 4, 5];
+
+  return (
+    <Card>
+      <CardHeader pb={"4px"}>
+        <Heading size={"sm"}>Recommended topics</Heading>
+      </CardHeader>
+
+      <CardBody>
+        <Wrap>
+          {data.map((index) => (
+            <WrapItem key={index}>
+              <Link to="/topics/programming">
+                <Tag size={"sm"} p={"7px"} variant='solid' bg={colors.primary}>
+                  programming
+                </Tag>
+              </Link>
+            </WrapItem>
+          ))}
+        </Wrap>
+
+        <Link to="/topics/programming">
+          <Text 
+            fontSize={"13px"} 
+            color={colors.primary} 
+            mt={"20px"} 
+            _hover={{
+              color: "#101828",
+              textDecoration: "underline"
+            }}
+          >
+            See more topics
+          </Text>
+        </Link>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default RecommendTopicCard;

src/pages/Forum/components/repliesCard.tsx

@@ -0,0 +1,59 @@
+import { Fragment } from 'react'
+import { Link } from 'react-router-dom'
+import {
+  Avatar,
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Flex,
+  Heading,
+  Stack,
+  StackDivider,
+  Text,
+} from '@chakra-ui/react'
+
+const RepliesCard = () => {
+  const data = [1, 2, 3, 4, 5, 6, 7];
+
+  return (
+    <Card mt={"20px"} ml={"35px"}>
+      <CardHeader pb={"4px"}>
+        <Heading size={"sm"}>Replies</Heading>
+      </CardHeader>
+
+      <CardBody>
+        <Stack
+          divider={<StackDivider />}
+          spacing={4}
+          lineHeight={"1.5em"}
+        >
+          {data.map((index) => (
+            <Fragment key={index}>
+              <Flex flex="1" gap="4" alignItems="flex-start" flexWrap="wrap">
+                <Link to="/user/jacob-warren">
+                  <Avatar size={"sm"} name="Jacob Warren" src="AvatarPic" />
+                </Link>
+
+                <Box>
+                  <Heading size="xs"
+                    color={"#0009"}
+                    _hover={{
+                      textDecoration: "underline"
+                    }}>
+                    <Link to="/user/jacob-warren">Jacob Warren</Link>
+                  </Heading>
+                  <Text fontSize={"13px"} color={"#0009"}>Author CEO at di</Text>
+
+                  <Text mb={"15px"} fontSize={"13px"} color={"#0009"}>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis animi veritatis itaque tempore ab aut.</Text>
+                </Box>
+              </Flex>
+            </Fragment>
+          ))}
+        </Stack>
+      </CardBody>
+    </Card>
+  )
+}
+
+export default RepliesCard;