Modal component

src/app/page.tsx

@@ -21,7 +21,7 @@ export default function Page () {
  </div>
 
  <div className="w-full">
- <div className="p-8 max-w-screen-xl mx-auto h-full flex flex-col justify-end gap-8">
+ <div className="p-8 max-w-screen-lg mx-auto h-full flex flex-col justify-end gap-8">
  <Chat/>
  <ChatForm/>
  </div>

src/components/buttons/Button.tsx

@@ -22,7 +22,7 @@ export default function Button ({
 }: Props) {
  if (type !== 'button' && typeof onClick === 'function') throw new Error(`<Button type="${type}" /> can not use onClick prop only for "button" type`)
 
- const theClassName = `min-h-[2.5rem] px-4 rounded-md flex justify-center items-center ${colors[color] ?? colors.primary}`
+ const theClassName = `min-h-[3rem] px-4 rounded-md flex items-center ${colors[color] ?? colors.primary}`
 
  return (
  <button

src/components/home/sidebar/bottom/Settings.tsx

@@ -1,14 +1,35 @@
+'use client'
+import { useState } from 'react'
 import { Button } from 'components/buttons'
+import { HiCog8Tooth } from 'react-icons/hi2'
+import { ModalNormal } from 'components/modals'
 
 export default function Settings () {
+ const [show, setShow] = useState<boolean>(false)
+
+ const handleOnClick = () => {
+ setShow(true)
+ }
+
  return (
+ <>
  <Button
- className="w-full"
+ className="w-full gap-4 py-3"
  type="button"
+ color="transparent"
+ onClick={handleOnClick}
  >
- <div>
-
- </div>
+ <HiCog8Tooth
+ className="w-8 h-8"
+ />
+
+ <span>Settings</span>
  </Button>
+
+ <ModalNormal show={show} setShow={setShow}>
+ asdasd
+
+ </ModalNormal>
+ </>
  )
 }

src/components/modals/Normal.tsx

@@ -0,0 +1,59 @@
+'use client'
+import type { ReactNode } from 'react'
+import { HiXMark } from 'react-icons/hi2'
+
+interface Props {
+ className?: string
+ show: boolean
+ setShow: (value: boolean | ((prev: boolean) => boolean)) => void
+ children: ReactNode
+}
+
+export default function Normal ({
+ className = '',
+ show,
+ setShow,
+ children
+}: Props) {
+ const handleOnClickX = () => {
+ setShow(false)
+ }
+
+ const handleOnMouseDown = (e: any) => {
+ if (
+ !show ||
+ (
+ e.currentTarget !== e.target &&
+ e.currentTarget !== e.target.parentElement
+ )
+ ) return
+
+ setShow(false)
+ }
+
+ return (
+ <div
+ className={`fixed inset-0 bg-black bg-opacity-50 grid place-items-center transition-all ${show ? 'opacity-100 visible' : 'opacity-0 invisible'}`}
+ onMouseDown={handleOnMouseDown}
+ >
+ <div className="w-full p-8 max-h-screen overflow-y-auto">
+ <div className="max-w-xl mx-auto bg-stone-900 rounded-md">
+ <div className="flex justify-end p-4 border-b border-stone-700">
+ <button
+ type="button"
+ onClick={handleOnClickX}
+ >
+ <HiXMark
+ className="w-7 h-7"
+ />
+ </button>
+ </div>
+
+ <div className={`p-4 ${className}`}>
+ {children}
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}

src/components/modals/index.ts

@@ -0,0 +1 @@
+export { default as ModalNormal } from './Normal'