chore: fix demo (theme and transition selector) (#564)

closes #562

Author: LouisBarranqueiro

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

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]}
         />
     )
 }