feat: reuse button component

aienginedev · Apr 30, 2023 · e6d255a · e6d255a
1 parent ee45eda
commit e6d255a
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 72 deletions.
diff --git a/app/(site)/components/AuthForm.tsx b/app/(site)/components/AuthForm.tsx
@@ -79,26 +79,29 @@ const AuthForm = () => {
             <Input 
               register={register}
               errors={errors}
+              required
               id="name" 
               label="Name"
             />
           )}
           <Input 
             register={register}
             errors={errors}
+            required
             id="email" 
             label="Email address" 
             type="email"
           />
           <Input 
             register={register}
             errors={errors}
+            required
             id="password" 
             label="Password" 
             type="password"
           />
           <div>
-            <Button type="submit">
+            <Button fullWidth type="submit">
               {variant === 'LOGIN' ? 'Sign in' : 'Register'}
             </Button>
           </div>

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
@@ -1,35 +1,43 @@
+import clsx from "clsx";
+
 interface ButtonProps {
   type?: "button" | "submit" | "reset" | undefined;
   fullWidth?: boolean;
   children?: React.ReactNode;
+  onClick?: () => void;
+  secondary?: boolean;
+  danger?: boolean;
 }
 
 const Button: React.FC<ButtonProps> = ({
   type = "button",
   fullWidth,
-  children
+  children,
+  onClick,
+  secondary,
+  danger
 }) => {
   return ( 
     <button
+      onClick={onClick}
       type={type}
-      className="
+      className={clsx(`
         flex 
-        w-full 
         justify-center 
         rounded-md 
-        bg-sky-500 
         px-3 
         py-2 
         text-sm 
         font-semibold 
-        text-white 
-        shadow-sm 
-        hover:bg-sky-600 
         focus-visible:outline 
         focus-visible:outline-2 
         focus-visible:outline-offset-2 
-        focus-visible:outline-sky-600
-      "
+        `,
+        fullWidth && 'w-full',
+        secondary ? 'text-gray-900' : 'text-white',
+        danger && 'bg-rose-500 hover:bg-rose-600 focus-visible:outline-rose-600',
+        !secondary && !danger && 'bg-sky-500 hover:bg-sky-600 focus-visible:outline-sky-600'
+      )}
     >
       {children}
     </button>

diff --git a/app/components/modals/GroupChatModal.tsx b/app/components/modals/GroupChatModal.tsx
@@ -13,6 +13,7 @@ import { User } from '@prisma/client';
 import Input from "../inputs/Input";
 import Select from '../inputs/Select';
 import Modal from './Modal';
+import Button from '../Button';
 
 interface GroupChatModalProps {
   isOpen?: boolean;
@@ -96,18 +97,16 @@ const GroupChatModal: React.FC<GroupChatModalProps> = ({
           </div>
         </div>
         <div className="mt-6 flex items-center justify-end gap-x-6">
-          <button 
+          <Button 
             onClick={onClose} 
-            type="button" 
-            className="text-sm font-semibold leading-6 text-gray-900">
-            Cancel
-          </button>
-          <button
-            type="submit"
-            className="rounded-md bg-sky-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
+            type="button"
+            secondary
           >
+            Cancel
+          </Button>
+          <Button type="submit">
             Create
-          </button>
+          </Button>
         </div>
       </form>
     </Modal>

diff --git a/app/components/sidebar/SettingsModal.tsx b/app/components/sidebar/SettingsModal.tsx
@@ -9,6 +9,7 @@ import { CldUploadButton } from 'next-cloudinary';
 
 import Input from "../inputs/Input";
 import Modal from '../modals/Modal';
+import Button from '../Button';
 
 interface SettingsModalProps {
   isOpen?: boolean;
@@ -66,20 +67,19 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
 
             <div className="mt-10 flex flex-col gap-y-8">
               <Input label="Name" id="name" errors={errors} required register={register} />
-
               <div>
                 <label htmlFor="photo" className="block text-sm font-medium leading-6 text-gray-900">
                   Photo
                 </label>
                 <div className="mt-2 flex items-center gap-x-3">
                   <img className="rounded-full h-12 w-12" src={imageUrl || currentUser.imageUrl} />
                   <CldUploadButton options={{ maxFiles: 1 }} onUpload={handleUpload} uploadPreset="pgc9ehd5">
-                    <button
+                    <Button
+                      secondary
                       type="button"
-                      className="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
                     >
                       Change
-                    </button>
+                    </Button>
                   </CldUploadButton>
                 </div>
               </div>
@@ -88,15 +88,12 @@ const SettingsModal: React.FC<SettingsModalProps> = ({
         </div>
 
         <div className="mt-6 flex items-center justify-end gap-x-6">
-          <button type="button" className="text-sm font-semibold leading-6 text-gray-900">
+          <Button secondary onClick={onClose}>
             Cancel
-          </button>
-          <button
-            type="submit"
-            className="rounded-md bg-sky-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
-          >
+          </Button>
+          <Button type="submit">
             Save
-          </button>
+          </Button>
         </div>
       </form>
     </Modal>

diff --git a/app/conversations/[conversationId]/components/ConfirmModal.tsx b/app/conversations/[conversationId]/components/ConfirmModal.tsx
@@ -6,6 +6,7 @@ import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import axios from 'axios';
 import { useParams, useRouter } from 'next/navigation';
 import Modal from '@/app/components/modals/Modal';
+import Button from '@/app/components/Button';
 
 interface ConfirmModalProps {
   isOpen?: boolean;
@@ -76,54 +77,18 @@ const ConfirmModal: React.FC<ConfirmModalProps> = ({
         </div>
       </div>
       <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-        <button
-          type="button"
-          className="
-            inline-flex 
-            w-full 
-            justify-center 
-            rounded-md 
-            bg-red-600 
-            px-3 
-            py-2 
-            text-sm 
-            font-semibold 
-            text-white 
-            shadow-sm 
-            hover:bg-red-500 
-            sm:ml-3 
-            sm:w-auto
-          "
+        <Button
+          danger
           onClick={onDelete}
         >
           Delete
-        </button>
-        <button
-          type="button"
-          className="
-            mt-3 
-            inline-flex 
-            w-full 
-            justify-center 
-            rounded-md 
-            bg-white 
-            px-3 
-            py-2 
-            text-sm 
-            font-semibold 
-            text-gray-900 
-            shadow-sm 
-            ring-1 
-            ring-inset 
-            ring-gray-300 
-            hover:bg-gray-50 
-            sm:mt-0 
-            sm:w-auto
-          "
+        </Button>
+        <Button
+          secondary
           onClick={onClose}
         >
           Cancel
-        </button>
+        </Button>
       </div>
     </Modal>
   )