Skip to content

Commit 4d0b455

Browse files
drumnationdrumnation
committed
feat: Integrate react-joyride for guided tours
- Added react-joyride dependency to package.json for implementing user tours. - Created JoyrideProvider to manage tour state and steps. - Implemented useJoyrideTour hook for encapsulating tour logic. - Integrated tour steps into StandardPlayer components for both mobile and web. - Updated PillControlBar to include a tour button, enhancing user experience. - Refactored layout to wrap ClientLayout with JoyrideProvider for tour context.
1 parent 15889fe commit 4d0b455

File tree

9 files changed

+701
-58
lines changed

9 files changed

+701
-58
lines changed

‎app/layout.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import '../src/styles/globals.css';
77
import '../src/styles/print.css';
88
import '@mantine/core/styles.css';
99
import '@mantine/carousel/styles.css';
10+
import { JoyrideProvider } from '@/providers/JoyrideProvider';
1011

1112
export const metadata: Metadata = {
1213
title: 'David Mieloch Portfolio',
@@ -23,7 +24,9 @@ export default function RootLayout({
2324
<body style={{ overflowX: 'hidden' }}>
2425
<StyledComponentsRegistry>
2526
<ThemeProvider>
26-
<ClientLayout>{children}</ClientLayout>
27+
<JoyrideProvider>
28+
<ClientLayout>{children}</ClientLayout>
29+
</JoyrideProvider>
2730
</ThemeProvider>
2831
</StyledComponentsRegistry>
2932
</body>

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"react": "^18.2.0",
7676
"react-dom": "^18.2.0",
7777
"react-icons": "^5.5.0",
78+
"react-joyride": "3.0.0-7",
7879
"react-markdown": "^10.1.0",
7980
"react-player": "^2.16.0",
8081
"react-redux": "^9.2.0",

‎pnpm-lock.yaml‎

Lines changed: 119 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/ClientLayout.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,16 @@ export default function ClientLayout({
7878
{children}
7979
</AppShell.Main>
8080

81-
{/* Render PersistentFooter INSIDE AppShell.Footer */}
82-
<AppShell.Footer style={{ padding: 0, border: 0 }}>
83-
{/* Ensure the test footer is removed */}
84-
{/* <footer style={{ height: '100%', width: '100%', background: 'cyan', zIndex: 9999, color: 'black', textAlign: 'center', fontSize: '20px', borderTop: '3px solid blue', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
85-
APPSHELL FOOTER TEST - IS THIS VISIBLE?
86-
</footer> */}
81+
{/* Apply styles directly to AppShell.Footer */}
82+
<AppShell.Footer
83+
style={{
84+
padding: 0,
85+
border: 0,
86+
position: 'relative', // Add relative positioning
87+
zIndex: 10000 // Add high z-index
88+
}}
89+
>
90+
{/* Test footer removed */}
8791

8892
{/* Render the actual PersistentFooter here */}
8993
<PersistentFooter data-print-hidden="true" />

0 commit comments

Comments
 (0)