From 645296371d922249f8ede015ee93e2db3511c553 Mon Sep 17 00:00:00 2001
From: Louis Barranqueiro <louis.barranqueiro@gmail.com>
Date: Sun, 10 Mar 2024 18:38:16 -0700
Subject: [PATCH] chore: fix demo (theme and transition selector)

closes #562
---
 demo/src/components/Demo/Demo.tsx     |  2 +-
 demo/src/components/Notifications.tsx | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/demo/src/components/Demo/Demo.tsx b/demo/src/components/Demo/Demo.tsx
index aa741d21..88ccd7a7 100644
--- a/demo/src/components/Demo/Demo.tsx
+++ b/demo/src/components/Demo/Demo.tsx
@@ -46,7 +46,7 @@ const Demo = () => {
                 <div className={css.description}>{packageJson.description}</div>
                 <NotificationButtons />
             </div>
-            <Notifications />
+            <Notifications themeName={themeName} transitionName={transitionName} />
             {window.innerWidth > 767 ? (
                 <div className={css.sidebar}>
                     <NotificationCreator
diff --git a/demo/src/components/Notifications.tsx b/demo/src/components/Notifications.tsx
index 8f6dc3b5..7534498c 100644
--- a/demo/src/components/Notifications.tsx
+++ b/demo/src/components/Notifications.tsx
@@ -1,18 +1,20 @@
 import {ThemeNames, THEMES, TransitionNames, TRANSITIONS} from '../constants'
 import NotificationsSystem, {dismissNotification, Notification} from '../../../src'
-import React, {useState} from 'react'
+import React from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
 type RootState = {
     notifications: Notification[]
 }
 
-export const Notifications = () => {
+type Props = {
+    themeName: ThemeNames
+    transitionName: TransitionNames
+}
+
+export const Notifications = ({themeName, transitionName}: Props) => {
     const dispatch = useDispatch()
-    const [themeName] = useState<ThemeNames>('Atalho')
-    const [transitionName] = useState<TransitionNames>('Slide')
     const notifications = useSelector((state: RootState) => state.notifications)
-    const theme = THEMES[themeName]
 
     return (
         <NotificationsSystem
@@ -21,7 +23,7 @@ export const Notifications = () => {
             }}
             notifications={notifications}
             dismissNotification={(id) => dispatch(dismissNotification(id))}
-            theme={theme}
+            theme={THEMES[themeName]}
         />
     )
 }