feat: add Forms component

front/components/Pages/CourseEdit/NewChapter.tsx

@@ -1,6 +1,9 @@
+import FormLayout, { Flex, FormField, Input, Textarea, FormLabel, ButtonBlack } from "@components/UI/Form/Form";
+import { FormMessage } from "@radix-ui/react-form";
+import * as Form from '@radix-ui/react-form';
 import React, { useState } from "react";
 
-function NewChapterModal({ submitChapter , closeModal }: any) {
+function NewChapterModal({ submitChapter, closeModal }: any) {
   const [chapterName, setChapterName] = useState("");
   const [chapterDescription, setChapterDescription] = useState("");
 
@@ -15,17 +18,37 @@ function NewChapterModal({ submitChapter , closeModal }: any) {
   const handleSubmit = async (e: any) => {
     e.preventDefault();
     console.log({ chapterName, chapterDescription });
-    submitChapter({ name : chapterName, description : chapterDescription , activities : [] });
+    submitChapter({ name: chapterName, description: chapterDescription, activities: [] });
   };
 
   return (
-    <div>
-      <button onClick={closeModal}>X</button>
-      <input type="text" onChange={handleChapterNameChange} placeholder="Chapter Name" /> <br />
-      <input type="text" onChange={handleChapterDescriptionChange} placeholder="Chapter Description" />
-      <br />
-      <button onClick={handleSubmit}>Add Chapter</button>
-    </div>
+
+    <FormLayout onSubmit={handleSubmit}>
+      <FormField name="chapter-name">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Chapter name</FormLabel>
+          <FormMessage match="valueMissing">Please provide a chapter name</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Input onChange={handleChapterNameChange} type="text" required />
+        </Form.Control>
+      </FormField>
+      <FormField name="chapter-desc">
+        <Flex css={{ alignItems: 'baseline', justifyContent: 'space-between' }}>
+          <FormLabel>Chapter description</FormLabel>
+          <FormMessage match="valueMissing">Please provide a chapter description</FormMessage>
+        </Flex>
+        <Form.Control asChild>
+          <Textarea onChange={handleChapterDescriptionChange} required />
+        </Form.Control>
+      </FormField>
+
+      <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+        <Form.Submit asChild>
+          <ButtonBlack type="submit" css={{ marginTop: 10 }}>Create chapter</ButtonBlack>
+        </Form.Submit>
+      </Flex>
+    </FormLayout>
   );
 }
 

front/components/UI/Form/Form.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import * as Form from '@radix-ui/react-form';
+import { styled, keyframes } from '@stitches/react';
+import { blackA, violet, mauve } from '@radix-ui/colors';
+
+const FormLayout = (props: any, onSubmit : any ) => (
+    <FormRoot onSubmit={props.onSubmit}>
+        {props.children}
+    </FormRoot>
+);
+
+export const FormRoot = styled(Form.Root, {
+    margin: 7
+});
+
+export const FormField = styled(Form.Field, {
+    display: 'grid',
+    marginBottom: 10,
+});
+
+export const FormLabel = styled(Form.Label, {
+    fontSize: 15,
+    fontWeight: 500,
+    lineHeight: '35px',
+    color: 'black',
+});
+
+export const FormMessage = styled(Form.Message, {
+    fontSize: 13,
+    color: 'white',
+    opacity: 0.8,
+});
+
+export const Flex = styled('div', { display: 'flex' });
+
+export const inputStyles = {
+    all: 'unset',
+    boxSizing: 'border-box',
+    width: '100%',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 4,
+    fontSize: 15,
+    color: '#7c7c7c',
+    background: "#F9FAFB",
+    boxShadow: `0 0 0 1px #edeeef`,
+    '&:hover': { boxShadow: `0 0 0 1px #edeeef` },
+    '&:focus': { boxShadow: `0 0 0 2px #edeeef` },
+    '&::selection': { backgroundColor: blackA.blackA9, color: 'white' },
+    
+};
+
+export const Input = styled('input', {
+    ...inputStyles,
+    height: 35,
+    lineHeight: 1,
+    padding: '0 10px',
+    border: 'none',
+});
+
+export const Textarea = styled('textarea', {
+    ...inputStyles,
+    resize: 'none',
+    padding: 10,
+});
+
+export const ButtonBlack = styled('button', {
+    all: 'unset',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 8,
+    padding: '0 15px',
+    fontSize: 15,
+    lineHeight: 1,
+    fontWeight: 500,
+    height: 35,
+
+    background: "#000000",
+    color: "#FFFFFF",
+    '&:hover': { backgroundColor: "#181818" , cursor: "pointer"},
+    '&:focus': { boxShadow: `0 0 0 2px black` },
+});
+
+export default FormLayout;

front/components/UI/Modal/Modal.tsx

@@ -21,7 +21,7 @@ const Modal = (params: ModalParams) => (
                 {params.dialogTrigger}
             </Dialog.Trigger>
         ) : null}
-        
+
         <Dialog.Portal>
             <DialogOverlay />
             <DialogContent minHeight={params.minHeight}>
@@ -32,10 +32,15 @@ const Modal = (params: ModalParams) => (
                     </DialogDescription>
                 </DialogTopBar>
                 {params.dialogContent}
-                <Dialog.Close asChild>
-                    {params.dialogClose}
-                </Dialog.Close>
+                {params.dialogClose ? (
+                    <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                        <Dialog.Close asChild>
+                            {params.dialogClose}
+                        </Dialog.Close>
+                    </Flex>
+                ) : null}
             </DialogContent>
+
         </Dialog.Portal>
     </Dialog.Root>
 );