Updated: Modal component updated.

StaticMania · Mar 2, 2024 · 68d3972 · 68d3972
1 parent 843c31e
commit 68d3972
Show file tree

Hide file tree

Showing 45 changed files with 733 additions and 1,544 deletions.
diff --git a/app/components/CodePreview.tsx b/app/components/CodePreview.tsx
@@ -5,20 +5,22 @@ import { ReactNode, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import useCopy from '../../hooks/useCopy'
+import { cn } from '../src/helpers/cn'
 
 interface CodePreviewProps {
   children: ReactNode
   code: string
   github?: string
+  className?: string
 }
 
-const CodePreview = ({ children, code, github }: CodePreviewProps) => {
+const CodePreview = ({ children, code, github, className }: CodePreviewProps) => {
   const [active, setActive] = useState(0)
   const { copy, copyToClipboard } = useCopy()
   const githubUrl = `https://github.com/StaticMania/keep-react/tree/main/app/src/components/${github}`
 
   return (
-    <div className="my-10 w-full overflow-hidden rounded-md border border-metal-200 shadow-small">
+    <div className="my-10 w-full overflow-hidden rounded-xl border border-metal-200 shadow-small">
       <div className="-mb-px flex flex-wrap border-b border-metal-200 bg-metal-900 px-5 text-center">
         <button
           type="button"
@@ -81,7 +83,7 @@ const CodePreview = ({ children, code, github }: CodePreviewProps) => {
             </SyntaxHighlighter>
           </div>
         ) : (
-          <div className="flex w-full items-center justify-center bg-white px-2 py-3 md:p-6">
+          <div className={cn('flex w-full items-center justify-center bg-white px-2 py-3 md:p-6', className)}>
             <div className="h-full w-full overflow-auto">{children}</div>
           </div>
         )}

diff --git a/app/components/ComponentsList.tsx b/app/components/ComponentsList.tsx
@@ -3,7 +3,7 @@ import { CloudArrowUp, DotsThree, HouseLine, Phone, SignIn, User } from 'phospho
 import { useState } from 'react'
 import { CustomizedBarSizeWithAxisData } from '../docs/components/barChart/variant/CustomizedBarSizeWithAxisData'
 import { DefaultRadio } from '../docs/components/radio/variant/DefaultRadio'
-import { Button, DatePicker, Modal, Pagination, Slider, Tabs, Tooltip } from '../src'
+import { Button, DatePicker, Modal, Pagination, Slider, Tabs, Tooltip, Typography } from '../src'
 
 export const SliderComponent = () => {
   return (
@@ -74,28 +74,40 @@ export const RadioSelectComponent = () => {
   )
 }
 export const ModalComponent = () => {
-  const [showModal, setShowModal] = useState(false)
-  const onClick = () => {
-    setShowModal(!showModal)
+  const [isOpen, setIsOpen] = useState(false)
+  const openModal = () => {
+    setIsOpen(true)
+  }
+  const closeModal = () => {
+    setIsOpen(false)
   }
   return (
     <div>
-      <Button onClick={onClick}>Modal</Button>
-      <Modal icon={<CloudArrowUp size={28} color="#1B4DFF" />} size="md" show={showModal} position="center">
-        <Modal.Header>Do you want to upload this file?</Modal.Header>
-        <Modal.Body>
-          <div className="space-y-6">
-            <p className="text-body-4 leading-relaxed text-metal-500">
-              Contrary to popular belief, Lorem Ipsum is not simply random text.
-            </p>
-          </div>
+      <Button onClick={openModal}>Modal</Button>
+      <Modal isOpen={isOpen} onClose={closeModal}>
+        <Modal.Body className="space-y-3">
+          <Modal.Icon>
+            <CloudArrowUp size={28} color="#1B4DFF" />
+          </Modal.Icon>
+          <Modal.Content>
+            <Typography variant="div" className="!mb-6">
+              <Typography variant="h3" className="mb-2 text-body-1 font-medium text-metal-900">
+                Update Modal Status
+              </Typography>
+              <Typography variant="p" className="text-body-4 font-normal text-metal-600">
+                Your document has unsaved changes. Discard or save them as a new page to continue.
+              </Typography>
+            </Typography>
+          </Modal.Content>
+          <Modal.Footer>
+            <Button onClick={closeModal} size="sm" variant="outline" color="secondary">
+              Cancel
+            </Button>
+            <Button onClick={closeModal} size="sm" color="primary">
+              Confirm
+            </Button>
+          </Modal.Footer>
         </Modal.Body>
-        <Modal.Footer>
-          <Button variant="outline" onClick={onClick}>
-            Cancel
-          </Button>
-          <Button onClick={onClick}>Confirm</Button>
-        </Modal.Footer>
       </Modal>
     </div>
   )

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -10,23 +10,27 @@ import Search from './Search'
 
 const Navbar = () => {
   const [active, setActive] = useState(false)
-  const [showModal, setShowModal] = useState(false)
+  const [isOpen, setIsOpen] = useState(false)
   const pathname = usePathname()
 
+  const openModal = () => {
+    setIsOpen(true)
+  }
+
+  const closeModal = () => {
+    setIsOpen(false)
+  }
+
   const IsActive = (str: string) => {
     const lastPart = pathname.toLocaleLowerCase().split('/').pop()
     return str.toLocaleLowerCase() === '/' + lastPart
   }
 
   useEffect(() => {
     setActive(false)
-    setShowModal(false)
+    setIsOpen(false)
   }, [pathname])
 
-  const handleModal = () => {
-    setShowModal(!showModal)
-  }
-
   return (
     <header className="fixed top-0 z-50 w-full border-b border-metal-100 bg-white">
       <div className="relative px-6 2xl:container">
@@ -48,10 +52,10 @@ const Navbar = () => {
               ))}
             </div>
           </div>
-          {showModal && <Search setShowMainModal={setShowModal} showModal={showModal} />}
+          {isOpen && <Search isOpen={isOpen} closeModal={closeModal} />}
           <div className="hidden items-end gap-3 lg:flex">
             <button
-              onClick={handleModal}
+              onClick={openModal}
               className="rounded grayscale transition duration-300 hover:bg-primary-50 hover:grayscale-0 sm:bg-primary-25 sm:p-3">
               <span>
                 <MagnifyingGlass size={20} color="#455468" />
@@ -93,7 +97,7 @@ const Navbar = () => {
           </div>
           <div className="flex items-center justify-between gap-3 lg:hidden">
             <button
-              onClick={handleModal}
+              onClick={openModal}
               className="grayscale transition duration-300 hover:grayscale-0 sm:rounded sm:bg-primary-25 sm:p-2.5 sm:hover:bg-primary-50">
               <MagnifyingGlass size={20} color="#455468" />
             </button>