[SCSE-121] Added leave a comment component

packages/ui/components/comment/Comment.stories.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Comment } from "./Comment";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+export default {
+    title: 'Components/Comment',
+    component: Comment,
+    argTypes: {
+
+    }
+} as ComponentMeta<typeof Comment>;
+
+const Template: ComponentStory<typeof Comment> = (args) => <Comment {...args}/>
+
+export const Default = Template.bind({});
+Default.args = {
+
+};

packages/ui/components/comment/Comment.tsx

@@ -0,0 +1,68 @@
+import {
+    FormControl,
+    FormLabel,
+    Heading,
+    AlertIcon,
+    AlertDescription,
+    Flex,
+    Input,
+    Alert,
+    Textarea,
+    Box,
+    Button
+} from "@chakra-ui/react";
+import { useState } from "react";
+import "@fontsource/inter";
+import "@fontsource/inder";
+
+export interface CommentProps {}
+
+interface commentType {
+    name: string,
+    email: string,
+    comment: string
+}
+
+export const Comment = (_props: CommentProps) => {
+    const [commentData, setCommentData] = useState<commentType>({ name: '', email: '', comment: '' })
+    const [showAlert, setShowAlert] = useState<boolean>(false);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        setCommentData({ name: '', email: '', comment: '' });
+        setShowAlert(true);
+    }
+
+    return (
+        <Box w='801px' h='457px'>
+            {showAlert ? (<Alert status='success'>
+                <AlertIcon />
+                <AlertDescription>The comment has been posted!</AlertDescription>
+            </Alert>) : <Box></Box>}
+            <Heading fontSize='48px' fontWeight={'400px'} fontFamily={"Inder"}>Leave a comment</Heading>
+            <Heading mt='29px' fontSize='24px' fontWeight={'400px'} fontFamily={"Inder"}>Your email address will not be published. Required fields are marked *</Heading>
+            <Box fontFamily={"Inter"}>
+                <form onSubmit={handleSubmit}>
+                    <FormControl>
+                        <Flex flexDirection='row' mt='59px' mb='29px' fontWeight={'500px'}>
+                            <Flex flexDirection='column' mr='54px'>
+                            <FormLabel>Name *</FormLabel>
+                            <Input w='320px'  placeholder='Your Name' type='text' required value={commentData.name} onChange={(e) => {setCommentData({ ...commentData, name: e.target.value })}} />
+                            </Flex>
+                            <Flex flexDirection='column'>
+                            <FormLabel>Email *</FormLabel>
+                            <Input w='320px' placeholder='eg. scse@ntu.edu.sg' type='email' required value={commentData.email} onChange={(e) => {setCommentData({ ...commentData, email: e.target.value })}} />
+                            </Flex>
+                        </Flex>
+                        <FormLabel>Comment *</FormLabel>
+                        <Textarea w='694px' placeholder='Your Comment' required value={commentData.comment} onChange={(e) => {setCommentData({ ...commentData, comment: e.target.value })}}/>
+                    </FormControl>
+                    <Button type='submit' mt={'29'} h={'48px'} w={'177px'}><Box fontWeight={'600px'}>Post Comment</Box> </Button>
+                </form>
+            </Box>
+        </Box>
+
+
+
+    )
+}

packages/ui/components/comment/index.tsx

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

packages/ui/package.json

@@ -38,5 +38,8 @@
     "tsconfig": "*",
     "typescript": "^4.5.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@fontsource/inder": "^4.5.11",
+    "@fontsource/inter": "^4.5.14"
+  }
 }

yarn.lock

@@ -2373,6 +2373,16 @@
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
+"@fontsource/inder@^4.5.11":
+  version "4.5.11"
+  resolved "https://registry.yarnpkg.com/@fontsource/inder/-/inder-4.5.11.tgz#9198f1a339acb2a44af8ad2f29b0c7c57631d287"
+  integrity sha512-TtfYxEU1wNEUfQkNSPS5s6M8ljOaJpWU/YKWsZnP/tKvjgZnADd+CCk2r71URyr1yb9OB6wWmhfZRNR4mDv8Kw==
+
+"@fontsource/inter@^4.5.14":
+  version "4.5.14"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.14.tgz#3944b809aa7bf27dacd20bdc04a49fb738959724"
+  integrity sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q==
+
 "@formatjs/ecma402-abstract@1.11.4":
   version "1.11.4"
   resolved "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz"