feat: add delete collection form and controller method

inertia/components/common/form/_button.tsx

@@ -1,27 +1,31 @@
 import styled from '@emotion/styled';
 
-const Button = styled.button(({ theme }) => ({
-  cursor: 'pointer',
-  width: '100%',
-  textTransform: 'uppercase',
-  fontSize: '14px',
-  color: theme.colors.white,
-  background: theme.colors.primary,
-  padding: '0.75em',
-  border: `1px solid ${theme.colors.primary}`,
-  borderRadius: theme.border.radius,
-  transition: theme.transition.delay,
-
-  '&:disabled': {
-    cursor: 'not-allowed',
-    opacity: '0.5',
-  },
-
-  '&:not(:disabled):hover': {
-    boxShadow: `${theme.colors.darkBlue} 0 0 3px 1px`,
-    background: theme.colors.darkBlue,
+const Button = styled.button<{ danger?: boolean }>(({ theme, danger }) => {
+  const btnColor = !danger ? theme.colors.primary : theme.colors.lightRed;
+  const btnDarkColor = !danger ? theme.colors.darkBlue : theme.colors.lightRed;
+  return {
+    cursor: 'pointer',
+    width: '100%',
+    textTransform: 'uppercase',
+    fontSize: '14px',
     color: theme.colors.white,
-  },
-}));
+    background: btnColor,
+    padding: '0.75em',
+    border: `1px solid ${btnColor}`,
+    borderRadius: theme.border.radius,
+    transition: theme.transition.delay,
+
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: '0.5',
+    },
+
+    '&:not(:disabled):hover': {
+      boxShadow: `${btnDarkColor} 0 0 3px 1px`,
+      background: btnDarkColor,
+      color: theme.colors.white,
+    },
+  };
+});
 
 export default Button;

inertia/components/common/form/_input.tsx

@@ -14,6 +14,10 @@ const Input = styled.input(({ theme }) => ({
     borderBottom: `2px solid ${theme.colors.primary}`,
   },
 
+  '&:disabled': {
+    opacity: 0.5,
+  },
+
   '&::placeholder': {
     fontStyle: 'italic',
     color: theme.colors.grey,

inertia/components/form/form_collection.tsx

@@ -18,6 +18,8 @@ interface FormCollectionProps {
   disableHomeLink?: boolean;
   data: FormCollectionData;
   errors?: Record<string, Array<string>>;
+  disableInputs?: boolean;
+  submitBtnDanger?: boolean;
 
   setData: (name: string, value: any) => void;
   handleSubmit: () => void;
@@ -29,6 +31,8 @@ export default function FormCollection({
   disableHomeLink,
   data,
   errors,
+  disableInputs = false,
+  submitBtnDanger = false,
 
   setData,
   handleSubmit,
@@ -48,6 +52,7 @@ export default function FormCollection({
       handleSubmit={onSubmit}
       canSubmit={canSubmit}
       disableHomeLink={disableHomeLink}
+      submitBtnDanger={submitBtnDanger}
     >
       <BackToDashboard>
         <TextBox
@@ -59,6 +64,7 @@ export default function FormCollection({
           errors={errors?.name}
           required
           autoFocus
+          disabled={disableInputs}
         />
         <TextBox
           label={t('collection.description')}
@@ -67,12 +73,14 @@ export default function FormCollection({
           onChange={setData}
           value={data.description ?? undefined}
           errors={errors?.description}
+          disabled={disableInputs}
         />
         <Checkbox
           label="Public"
           name="visibility"
           onChange={handleOnCheck}
           checked={data.visibility === Visibility.PUBLIC}
+          disabled={disableInputs}
         />
       </BackToDashboard>
     </FormLayout>

inertia/components/layouts/form_layout.tsx

@@ -30,16 +30,20 @@ interface FormLayoutProps {
   textSubmitButton?: string;
 
   disableHomeLink?: boolean;
+  submitBtnDanger?: boolean;
   collectionId?: string;
 }
 
 export default function FormLayout({
   title,
   children,
+
   canSubmit,
   handleSubmit,
   textSubmitButton = i18n.t('common:confirm'),
+
   disableHomeLink = false,
+  submitBtnDanger = false,
   collectionId,
 }: FormLayoutProps) {
   const { t } = useTranslation('common');
@@ -50,7 +54,7 @@ export default function FormLayout({
         <h2>{title}</h2>
         <Form onSubmit={handleSubmit}>
           {children}
-          <Button type="submit" disabled={!canSubmit}>
+          <Button type="submit" disabled={!canSubmit} danger={submitBtnDanger}>
             {textSubmitButton}
           </Button>
         </Form>