feat: add Forms component

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;