Merge pull request #6 from chimobi-justice/create-article

create article

package.json

@@ -15,18 +15,17 @@
     "@emotion/styled": "^11.11.5",
     "@tanstack/react-query": "^5.50.1",
     "framer-motion": "^11.2.13",
+    "highlight.js": "^11.10.0",
     "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"
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vitejs/plugin-react": "^4.3.1",

src/App.tsx

@@ -12,7 +12,8 @@ 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'
+import ShowArticle from '@pages/Articles/show'
+import CreateArticle from '@pages/Articles/create'
 
 import Login from '@pages/Auth/Login'
 import Register from '@pages/Auth/Register'
@@ -27,7 +28,8 @@ const routes = createBrowserRouter(
         <Route index path='/forum/new' element={<CreateForum />} />
 
         <Route index path='/articles' element={<Articles />} />
-        <Route index path='/articles/:slug' element={<ShowSingleArticle />} />
+        <Route index path='/articles/:slug' element={<ShowArticle />} />
+        <Route index path='/articles/new' element={<CreateArticle />} />
 
         <Route index path='/auth/login' element={<Login />} />
         <Route index path='/auth/register' element={<Register />} />

src/components/ArticleCard/Articles.tsx

@@ -37,18 +37,18 @@ const ArticlesCard: FunctionComponent<IProps> = ({
       <CardBody p={"0px"}>
         <Box
           display={"flex"}
+          flexDir={{base: "column", md: "row"}}
           alignItems={"center"}
           gap={2}
         >
-          <Box width={"35%"}>
+          <Box width={{ base: "100%", md: "35%"}}>
             <Image
               src={articleImg}
-              boxSize='250px'
               alt='Just'
             />
           </Box>
 
-          <Box width={"65%"}>
+          <Box width={{ base: "100%", md: "65%"}} p={"5px"}>
             <Heading
               size="lg"
               lineHeight={"1.6em"}

src/pages/Articles/create/index.tsx

@@ -0,0 +1,99 @@
+import { useRef, useState } from 'react'
+import {
+  Box,
+  FormControl,
+  Input,
+  Text
+} from '@chakra-ui/react'
+import ReactQuill from 'react-quill'
+import 'react-quill/dist/quill.snow.css'
+import { FaUpload, FaImage } from 'react-icons/fa6'
+
+import Button from '@components/Button'
+
+const CreateArticle = () => {
+  const [value, setValue] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleUploadClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  return (
+    <Box width={{ base: "98%", md: "50%"}} m={"2rem auto"}>
+      <form>
+        <Box borderRadius="9px" p="10px" bg="#f1f1f1">
+          <Box
+            textAlign="center"
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            height="200px"
+            flexDirection="column"
+          >
+            <Box mb="15px">
+              <FaImage style={{ fontSize: "35px" }} />
+            </Box>
+
+            <Text fontSize="17px" mb="15px">
+              We recommend uploading an image that is 1920x1080 pixels
+            </Text>
+
+            <Button
+              variant="outline"
+              size={{ base: "md", lg: "lg" }}
+              width={{ base: "100%", lg: "auto" }}
+              type="button"
+              fontWeight="semibold"
+              rounded="sm"
+              leftIcon={<FaUpload />}
+              onClick={handleUploadClick}
+            >
+              Upload from computer
+            </Button>
+          </Box>
+
+          <input 
+            type="file"
+            ref={fileInputRef} 
+            style={{ display: 'none' }}
+          />
+        </Box>
+
+
+        <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 CreateArticle

src/pages/Articles/index.tsx

@@ -6,6 +6,7 @@ import {
   ArticlesCard,
   Button
 } from '@components/index'
+import { Link } from 'react-router-dom';
 
 const Articles = () => {
   const CardLatestData = [1, 2, 3];
@@ -16,7 +17,28 @@ const Articles = () => {
       width={"90%"}
       m={"4rem auto"}
     >
-      <Heading pb={"15px"} size={"xl"}>Articles</Heading>
+      <Box 
+        display={"flex"} 
+        justifyContent={"space-between"}
+        flexDir={{base: "column", md: "row"}}
+      >
+        <Heading pb={"15px"} size={"xl"}>Articles</Heading>
+
+        <Box mb={"15px"}>
+          <Link to="/articles/new">
+            <Button
+              variant="solid"
+              size={{ base: "md", lg: "lg" }}
+              width={{ base: "100%", lg: "auto" }}
+              type="button"
+              fontWeight={"semibold"}
+              rounded="sm"
+            >
+              Create Articles
+            </Button>
+          </Link>
+        </Box>
+      </Box>
 
       <SimpleGrid minChildWidth="300px" spacing={3}>
         {CardLatestData?.map((index) => (

src/pages/Articles/show/index.tsx

@@ -1,21 +1,34 @@
+// import React from 'react';
 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 { MdOutlineQuickreply, MdOutlineThumbUp } from 'react-icons/md'
+import Markdown from 'react-markdown'
 
+import ArticleHeroSection from '@pages/Articles/HeroSection'
+import { CodeHighlight } from '@constant/Code'
 
-// // import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
-// // import {dark} from 'react-syntax-highlighter/dist/esm/styles/prism'
+// import 'highlight.js/styles/github.css';
+// import hljs from 'highlight.js';
 
+// const CodeBlock = ({ language, value }: { language: any, value: any }) => {
+//   const ref = React.useRef(null);
 
-// 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'
+//   React.useEffect(() => {
+//     if (ref.current) {
+//       hljs.highlightElement(ref.current);
+//     }
+//   }, [value, language]);
 
-import ArticleHeroSection from '@pages/Articles/HeroSection'
-import { CodeHighlight } from '@constant/Code'
+//   return (
+//     <pre>
+//       <code ref={ref} className={`language-${language}`}>
+//         {value}
+//       </code>
+//     </pre>
+//   );
+// };
 
-const ShowSingleArticle = () => {
+
+const ShowArticle = () => {
   return (
     <Box>
       <ArticleHeroSection
@@ -62,123 +75,32 @@ const ShowSingleArticle = () => {
         </Box>
 
         <Box width={{ base: "100%", md: "80%" }}>
-          <SyntaxHighlighter style={darcula}>
-            {CodeHighlight}
-          </SyntaxHighlighter> 
-          {/* <Markdown>{CodeHighlight}</Markdown> */}
           {/* <Markdown
             children={CodeHighlight}
             components={{
-              code(props) {
-                const { children, className } = props;
-                // const match = /language-(\w+)/.exec(className || '');
+              code({ node, className, children, ...props }) {
+                const match = /language-(\w+)/.exec(className || '');
+
                 return match ? (
-                  <SyntaxHighlighter
-                    style={dark}
+                  <CodeBlock
                     language={match[1]}
-                    PreTag="div"
-                    children={String(children).replace(/\n$/, '')}
+                    value={String(children).replace(/\n$/, '')}
                     {...props}
                   />
                 ) : (
-                  <code className={className}>
+                  <code className={className} {...props}>
                     {children}
                   </code>
                 );
               }
             }}
-          />*/}
+          /> */}
+
+          <Markdown>{CodeHighlight}</Markdown>
         </Box>
       </Box>
     </Box>
   )
 }
 
-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;
+export default ShowArticle

src/pages/Forum/create/index.tsx

@@ -10,11 +10,10 @@ import 'react-quill/dist/quill.snow.css'
 import Button from '@components/Button'
 
 const CreateForum = () => {
-  const [value, setValue] = useState('');
+  const [value, setValue] = useState<string>('');
 
   return (
-    <Box width={"50%"} m={"2rem auto"}>
-
+    <Box width={{ base: "98%", md: "50%"}} m={"2rem auto"}>
       <form>
         <FormControl my={"2.5rem"}>
           <Input type='email' py={"60px"}  size={"lg"} fontSize={"3rem"} variant='flushed' colorScheme="gray" placeholder="Title" />