Merge pull request #5 from chimobi-justice/ft/create-forum

added create forum

package.json

@@ -18,6 +18,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
+    "react-markdown": "^9.0.1",
+    "react-quill": "^2.0.0",
     "react-router-dom": "^6.24.1",
     "react-syntax-highlighter": "^15.5.0"
   },

src/App.tsx

@@ -8,7 +8,8 @@ import {
 import Layout from '@layout/index'
 import Home from '@pages/Home'
 import Forum from '@pages/Forum'
-import ShowSingleForum from '@pages/Forum/show'
+import ShowForum from '@pages/Forum/show'
+import CreateForum from '@pages/Forum/create'
 import NotFound from '@components/NotFound'
 import Articles from '@pages/Articles'
 import ShowSingleArticle from '@pages/Articles/show'
@@ -22,7 +23,8 @@ const routes = createBrowserRouter(
       <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='/forum/:slug' element={<ShowForum />} />
+        <Route index path='/forum/new' element={<CreateForum />} />
 
         <Route index path='/articles' element={<Articles />} />
         <Route index path='/articles/:slug' element={<ShowSingleArticle />} />

src/index.css

@@ -1,3 +1,13 @@
+* {
+    box-sizing: border-box;
+}
+
 .active {
     color: #7253a4;
 }
+
+.editor-input {
+    height: 90%;
+    width: 100%;
+    border: none;
+}

src/pages/Articles/show/index.tsx

@@ -1,7 +1,16 @@
 import { Box, Stack, Text } from '@chakra-ui/react'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 import { darcula } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+
+
+// // import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
+// // import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
+
+
+// import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+// import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { MdOutlineQuickreply, MdOutlineThumbUp } from 'react-icons/md'
+// import Markdown from 'react-markdown'
 
 import ArticleHeroSection from '@pages/Articles/HeroSection'
 import { CodeHighlight } from '@constant/Code'
@@ -55,11 +64,121 @@ const ShowSingleArticle = () => {
         <Box width={{ base: "100%", md: "80%" }}>
           <SyntaxHighlighter style={darcula}>
             {CodeHighlight}
-          </SyntaxHighlighter>
+          </SyntaxHighlighter> 
+          {/* <Markdown>{CodeHighlight}</Markdown> */}
+          {/* <Markdown
+            children={CodeHighlight}
+            components={{
+              code(props) {
+                const { children, className } = props;
+                // const match = /language-(\w+)/.exec(className || '');
+                return match ? (
+                  <SyntaxHighlighter
+                    style={dark}
+                    language={match[1]}
+                    PreTag="div"
+                    children={String(children).replace(/\n$/, '')}
+                    {...props}
+                  />
+                ) : (
+                  <code className={className}>
+                    {children}
+                  </code>
+                );
+              }
+            }}
+          />*/}
         </Box>
       </Box>
     </Box>
   )
 }
 
-export default ShowSingleArticle
+export default ShowSingleArticle
+
+
+
+// import { Box, Stack, Text } from '@chakra-ui/react';
+// import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+// import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+// import { MdOutlineQuickreply, MdOutlineThumbUp } from 'react-icons/md';
+// import Markdown from 'react-markdown';
+// import ArticleHeroSection from '@pages/Articles/HeroSection';
+// import { CodeHighlight } from '@constant/Code';
+
+// const ShowSingleArticle = () => {
+//   return (
+//     <Box>
+//       <ArticleHeroSection
+//         title="2024 lorem ipsum dolor sit amet consectetur adipisicing elit Minima nemo"
+//         authorAvatar=""
+//         authorName="Droney Abah"
+//         authorUsername="droney-abah"
+//         date="1 week ago"
+//       />
+
+//       <Box
+//         width={"100%"}
+//         maxWidth={{ base: "90%", md: "80%", lg: "70%" }}
+//         m={"2em auto"}
+//         py={"30px"}
+//         display={"flex"}
+//         flexDir={{ base: "column-reverse", md: "row" }}
+//         gap={"10"}
+//       >
+//         <Box width={{ base: "100%", md: "20%" }}>
+//           <Stack
+//             spacing={5}
+//             direction={{ base: "row", md: "column" }}
+//           >
+//             <Text
+//               fontSize={{ base: "15px", md: "18px" }}
+//               display={"flex"}
+//               flexDir={{ base: "row", md: "column" }}
+//               gap={3}
+//               alignItems={"center"}
+//             >
+//               <MdOutlineQuickreply style={{ fontSize: "24px", marginBottom: "5px" }} /> 30
+//             </Text>
+//             <Text
+//               fontSize={"18px"}
+//               display={"flex"}
+//               flexDir={{ base: "row", md: "column" }}
+//               gap={3}
+//               alignItems={"center"}
+//             >
+//               <MdOutlineThumbUp style={{ fontSize: "24px", marginBottom: "5px" }} /> 60
+//             </Text>
+//           </Stack>
+//         </Box>
+
+//         <Box width={{ base: "100%", md: "80%" }}>
+//           <Markdown
+//             children={CodeHighlight}
+//             components={{
+//               code(props) {
+//                 const { children, className } = props;
+//                 const match = /language-(\w+)/.exec(className || '');
+//                 return match ? (
+//                   <SyntaxHighlighter
+//                     style={dark}
+//                     language={match[1]}
+//                     PreTag="div"
+//                     children={String(children).replace(/\n$/, '')}
+//                     {...props}
+//                   />
+//                 ) : (
+//                   <code className={className}>
+//                     {children}
+//                   </code>
+//                 );
+//               }
+//             }}
+//           />
+//         </Box>
+//       </Box>
+//     </Box>
+//   );
+// };
+
+// export default ShowSingleArticle;

src/pages/Auth/Login/index.tsx

@@ -66,7 +66,7 @@ const Login = () => {
             color={"#0009"}
           >
             Don't have an account? {" "}
-            <Link to="/auth/login">
+            <Link to="/auth/register">
               <Text
                 as={"span"}
                 color={colors.primary}

src/pages/Forum/create/index.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { 
+  Box, 
+  FormControl, 
+  Input 
+} from '@chakra-ui/react'
+import ReactQuill from 'react-quill'
+import 'react-quill/dist/quill.snow.css'
+
+import Button from '@components/Button'
+
+const CreateForum = () => {
+  const [value, setValue] = useState('');
+
+  return (
+    <Box width={"50%"} m={"2rem auto"}>
+
+      <form>
+        <FormControl my={"2.5rem"}>
+          <Input type='email' py={"60px"}  size={"lg"} fontSize={"3rem"} variant='flushed' colorScheme="gray" placeholder="Title" />
+        </FormControl>
+
+        <Box height={"400px"}>
+          <ReactQuill
+            theme="snow"
+            value={value}
+            onChange={setValue}
+            className="editor-input"
+            placeholder="write here to post threads"
+          />
+
+        </Box>
+
+        <Box textAlign={"right"} my={"25px"}>
+          <Button
+            variant="solid"
+            size={{ base: "md", lg: "lg" }}
+            width={{ base: "100%", lg: "auto" }}
+            type="button"
+            fontWeight={"semibold"}
+            rounded="sm"
+          >
+            Save
+          </Button>
+        </Box>
+      </form>
+
+    </Box>
+  )
+}
+
+export default CreateForum;

src/pages/Forum/index.tsx

@@ -32,13 +32,27 @@ const Forum = () => {
     >
       <Heading pb={"15px"} size={"xl"}>Forum</Heading>
 
+      <Box mb={"15px"}>
+        <Link to="/forum/new">
+          <Button
+            variant="solid"
+            size={{ base: "md", lg: "lg" }}
+            width={{ base: "100%", lg: "auto" }}
+            type="button"
+            fontWeight={"semibold"}
+            rounded="sm"
+          >
+            Create Forum
+          </Button>
+        </Link>
+      </Box>
       <Box
         display={"flex"}
         justifyContent={"space-between"}
-        flexDir={{ base: "column", md: "row"}}
+        flexDir={{ base: "column", md: "row" }}
         gap={5}
       >
-        <Box width={{ base: "100%", md: "70%"}}>
+        <Box width={{ base: "100%", md: "70%" }}>
           <Card>
             <CardHeader borderBottom={"1px solid #f1f1f1"}>
               <Stack
@@ -99,21 +113,21 @@ const Forum = () => {
                         </Link>
                       </Text>
 
-                      <HStack 
-                        borderTop={"1px solid #f1f1f1"} 
+                      <HStack
+                        borderTop={"1px solid #f1f1f1"}
                         pt={"7px"}
                         gap={3}
                       >
-                        <Text 
-                          fontSize={"12px"} 
+                        <Text
+                          fontSize={"12px"}
                           display={"flex"}
                           gap={1}
                           alignItems={"center"}
                         >
                           <MdOutlineQuickreply /> 30 Replies
                         </Text>
-                        <Text 
-                          fontSize={"12px"} 
+                        <Text
+                          fontSize={"12px"}
                           display={"flex"}
                           gap={1}
                           alignItems={"center"}
@@ -141,7 +155,7 @@ const Forum = () => {
           </Box>
         </Box>
 
-        <Box width={{ base: "100%", md: "30%"}}>
+        <Box width={{ base: "100%", md: "30%" }}>
           <Box>
             <DiscussionCard />
           </Box>

src/pages/Forum/show/index.tsx

@@ -19,7 +19,7 @@ import DiscussionCard from '@pages/Forum/components/discussionCard'
 import RepliesCard from '@pages/Forum/components/repliesCard'
 import AvatarPic from '@assets/images/avatar.jpg'
 
-const ShowSingleForum = () => {
+const ShowForum = () => {
   return (
     <Box
       width={"90%"}
@@ -136,4 +136,4 @@ const ShowSingleForum = () => {
   )
 }
 
-export default ShowSingleForum;
+export default ShowForum;