Updated: Notification component updated.

app/docs/components/notification/notification.mdx

@@ -1,52 +1,41 @@
 import { DefaultNotification, DefaultNotificationCode } from './variant/DefaultNotification'
-import { NotificationWithIcon, NotificationWithIconCode } from './variant/NotificationWithIcon'
-import { NotificationWithAvatar, NotificationWithAvatarCode } from './variant/NotificationWithAvatar'
+import { NotificationPosition, NotificationPositionCode } from './variant/NotificationPosition'
 import { NotificationWithCard, NotificationWithCardCode } from './variant/NotificationWithCard'
-
 import { notificationApi } from './notificationApi'
 
 import CodePreview from '../../../components/CodePreview'
-
 import ComponentApi from '../../../components/ComponentApi'
 
 ## Table of Contents
 
-Notification component in the Keep React allows you to display informative messages or alerts to users. With various styles and options for positioning, you can effectively communicate important updates or messages in a visually appealing manner.
+The Notification component in Keep React allows you to deliver informative messages or alerts to users. With versatile styling and positioning options, you can effectively communicate important updates or messages in a visually appealing manner.
 
 ## Default Notification
 
-Default Notification component in the Keep React allows you to display informative messages or alerts to users.
+Display informative messages or alerts to users with the Default Notification component in Keep React.
 
 <CodePreview github="Notification" code={DefaultNotificationCode}>
   <DefaultNotification />
 </CodePreview>
 
-## Notification With Icon
-
-The Notification component in the Keep React can be enhanced with icons, providing users with visual cues alongside the message. This combination of text and icon ensures that notifications are both informative and easily comprehensible.
-
-<CodePreview github="Notification" code={NotificationWithIconCode}>
-  <NotificationWithIcon />
-</CodePreview>
-
-## Notification With Avatar
+## Notification With Card
 
-The Notification component in the Keep React can include avatars, allowing you to associate user images with notifications. This integration enhances user recognition and engagement by providing personalized and context-rich notifications.
+Enhance the Notification component with a card layout for a more visually appealing display.
 
-<CodePreview github="Notification" code={NotificationWithAvatarCode}>
-  <NotificationWithAvatar />
+<CodePreview github="Notification" code={NotificationWithCardCode}>
+  <NotificationWithCard />
 </CodePreview>
 
-## Notification With Card
+## Notification Position
 
-The Notification component in the Keep React can be enhanced with a card layout, allowing you to present notifications in a visually structured manner. This design accommodates more content and context, providing users with detailed and informative notifications.
+Position notifications according to your preference with available options: `"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`. Default position is `"bottom-right"`.
 
-<CodePreview github="Notification" code={NotificationWithCardCode}>
-  <NotificationWithCard />
+<CodePreview github="Notification" code={NotificationPositionCode}>
+  <NotificationPosition />
 </CodePreview>
 
 ## API Reference
 
-Explore the available props for the notification component
+Explore the available props for the Notification component.
 
 <ComponentApi data={notificationApi} />

app/docs/components/notification/notificationApi.ts

@@ -1,15 +1,15 @@
 export const notificationApi = [
   {
     id: 1,
-    propsName: 'dismiss',
+    propsName: 'isOpen',
     propsType: 'boolean',
-    propsDescription: 'Determines whether the notification can be dismissed.',
+    propsDescription: 'Notification show or not.',
     default: 'false',
   },
   {
     id: 2,
-    propsName: 'onDismiss',
-    propsType: 'boolean | (() => void)',
+    propsName: 'onClose',
+    propsType: '(() => void)',
     propsDescription: 'Function to call when the notification is dismissed.',
     default: 'false',
   },
@@ -18,13 +18,6 @@ export const notificationApi = [
     propsName: 'position',
     propsType: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
     propsDescription: 'Sets the position of the notification.',
-    default: 'top-left',
-  },
-  {
-    id: 4,
-    propsName: 'className',
-    propsType: 'string',
-    propsDescription: 'Custom class name for the notification',
-    default: 'None',
+    default: 'bottom-right',
   },
 ]

app/docs/components/notification/variant/DefaultNotification.tsx

@@ -3,27 +3,28 @@ import { useState } from 'react'
 import { Button, Notification } from '../../../../src'
 
 const DefaultNotification = () => {
-  const [showNotification, setShowNotification] = useState(true)
-
-  const onDismiss = () => {
-    setShowNotification(!showNotification)
-  }
+  const [isOpen, setIsOpen] = useState(false)
+  const control = () => setIsOpen(!isOpen)
 
   return (
     <div className="px-5 py-3">
-      <Button onClick={onDismiss}>Show Notification</Button>
-      <Notification position="bottom-left" dismiss={showNotification} onDismiss={onDismiss}>
+      <Button onClick={control}>Show Notification</Button>
+      <Notification isOpen={isOpen} onClose={control}>
         <Notification.Body>
-          <Notification.Title>Can we store cookies?</Notification.Title>
-          <Notification.Description>
-            Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-          </Notification.Description>
-          <Notification.Container className="!mt-6 flex gap-3">
-            <Button size="sm">Accept</Button>
-            <Button variant="outline" size="sm">
+          <Notification.Content>
+            <Notification.Title>Can we store cookies?</Notification.Title>
+            <Notification.Description>
+              Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            </Notification.Description>
+          </Notification.Content>
+          <Notification.Footer>
+            <Button onClick={control} size="sm">
+              Accept
+            </Button>
+            <Button onClick={control} variant="outline" size="sm">
               Review
             </Button>
-          </Notification.Container>
+          </Notification.Footer>
         </Notification.Body>
       </Notification>
     </div>
@@ -36,33 +37,34 @@ import { useState } from 'react'
 import { Button, Notification } from 'keep-react'
 
 export const NotificationComponent = () => {
-  const [showNotification, setShowNotification] = useState(true)
+  const [isOpen, setIsOpen] = useState(false)
+  const control = () => setIsOpen(!isOpen)
 
-  const onDismiss = () => {
-    setShowNotification(!showNotification)
-  }
   return (
-    <div>
-      <Button onClick={onDismiss}>Show Notification</Button>
-      <Notification dismiss={showNotification} onDismiss={onDismiss}>
+    <div className="px-5 py-3">
+      <Button onClick={control}>Show Notification</Button>
+      <Notification isOpen={isOpen} onClose={control}>
         <Notification.Body>
-          <Notification.Title>Can we store cookies?</Notification.Title>
-          <Notification.Description>
-            Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-          </Notification.Description>
-          <Notification.Container className="!mt-6 flex gap-3">
-            <Button  size="sm">
+          <Notification.Content>
+            <Notification.Title>Can we store cookies?</Notification.Title>
+            <Notification.Description>
+              Default message - Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            </Notification.Description>
+          </Notification.Content>
+          <Notification.Footer>
+            <Button onClick={control} size="sm">
               Accept
             </Button>
-            <Button variant="outline" size="sm">
+            <Button onClick={control} variant="outline" size="sm">
               Review
             </Button>
-          </Notification.Container>
+          </Notification.Footer>
         </Notification.Body>
       </Notification>
     </div>
   )
 }
+
 `
 
 export { DefaultNotification, DefaultNotificationCode }

app/docs/components/notification/variant/NotificationPosition.tsx

@@ -0,0 +1,101 @@
+'use client'
+import { useState } from 'react'
+import { Avatar, Button, Notification } from '../../../../src'
+
+const NotificationPosition = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false)
+  const [position, setPosition] = useState<'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'>('bottom-right')
+  const openController = () => setIsOpen(!isOpen)
+
+  return (
+    <div className="px-5 py-3">
+      <Button.Group>
+        <Button
+          onClick={() => {
+            openController()
+            setPosition('top-left')
+          }}
+          position="start">
+          Top Left
+        </Button>
+        <Button
+          onClick={() => {
+            openController()
+            setPosition('top-right')
+          }}
+          position="center">
+          Top Right
+        </Button>
+        <Button
+          onClick={() => {
+            openController()
+            setPosition('bottom-left')
+          }}
+          position="center">
+          Bottom Left
+        </Button>
+        <Button
+          onClick={() => {
+            openController()
+            setPosition('bottom-right')
+          }}
+          position="end">
+          Bottom Right
+        </Button>
+      </Button.Group>
+      <Notification isOpen={isOpen} onClose={openController} position={position}>
+        <Notification.Body className="max-w-sm p-6">
+          <Notification.Content>
+            <div className="flex items-start gap-2">
+              <div>
+                <Avatar img="/images/avatar/avatar-1.png" className="border-2 border-error-100" />
+              </div>
+              <div className="max-w-[220px]">
+                <p className="text-body-4 font-medium text-metal-700">
+                  Khairul Islam Ridoy comment on your recent posts
+                </p>
+                <p className="text-body-5 font-normal text-metal-400">5 min ago</p>
+              </div>
+            </div>
+          </Notification.Content>
+        </Notification.Body>
+      </Notification>
+    </div>
+  )
+}
+
+const NotificationPositionCode = `
+'use client'
+import { useState } from 'react'
+import { Avatar, Button, Notification } from 'keep-react'
+
+export const NotificationComponent = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const control = () => setIsOpen(!isOpen)
+
+  return (
+    <div className="px-5 py-3">
+      <Button onClick={control}>Show Notification</Button>
+      <Notification isOpen={isOpen} onClose={control}>
+        <Notification.Body className="max-w-sm p-4">
+          <Notification.Content>
+            <div className="flex items-start gap-2">
+              <div>
+                <Avatar img="/images/avatar/avatar-1.png" className="border-2 border-error-100" />
+              </div>
+              <div className="max-w-[220px]">
+                <p className="text-body-4 font-medium text-metal-700">
+                  Khairul Islam Ridoy comment on your recent posts
+                </p>
+                <p className="text-body-5 font-normal text-metal-400">5 min ago</p>
+              </div>
+            </div>
+          </Notification.Content>
+        </Notification.Body>
+      </Notification>
+    </div>
+  )
+}
+`
+
+export { NotificationPosition, NotificationPositionCode }