Browse Source

only show navbar in video app

drawing-pad
Stephanie Gredell 1 month ago
parent
commit
547728b6ec
  1. 12
      frontend/src/App.tsx
  2. 11
      frontend/src/components/Navbar/Navbar.tsx
  3. 32
      frontend/src/config/apps.ts
  4. 31
      frontend/src/pages/LandingPage.tsx

12
frontend/src/App.tsx

@ -4,9 +4,9 @@ import { ErrorBoundary } from './components/ErrorBoundary';
import { Navbar } from './components/Navbar/Navbar'; import { Navbar } from './components/Navbar/Navbar';
import { ProtectedRoute } from './components/ProtectedRoute'; import { ProtectedRoute } from './components/ProtectedRoute';
import { LandingPage } from './pages/LandingPage'; import { LandingPage } from './pages/LandingPage';
import { VideoApp } from './pages/VideoApp';
import { AdminPage } from './pages/AdminPage'; import { AdminPage } from './pages/AdminPage';
import { LoginPage } from './pages/LoginPage'; import { LoginPage } from './pages/LoginPage';
import { APPS } from './config/apps';
import './App.css'; import './App.css';
function App() { function App() {
@ -19,7 +19,15 @@ function App() {
<main className="main-content"> <main className="main-content">
<Routes> <Routes>
<Route path="/" element={<LandingPage />} /> <Route path="/" element={<LandingPage />} />
<Route path="/videos" element={<VideoApp />} /> {/* Dynamically generate routes for enabled apps */}
{APPS.filter(app => !app.disabled).map(app => (
<Route
key={app.id}
path={app.link}
element={<app.component />}
/>
))}
{/* Keep non-app routes separate */}
<Route path="/login" element={<LoginPage />} /> <Route path="/login" element={<LoginPage />} />
<Route <Route
path="/admin" path="/admin"

11
frontend/src/components/Navbar/Navbar.tsx

@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { Link, useLocation, useSearchParams } from 'react-router-dom'; import { Link, useLocation, useSearchParams } from 'react-router-dom';
import { useAuth } from '../../hooks/useAuth'; import { useAuth } from '../../hooks/useAuth';
import { useChannels } from '../../hooks/useChannels'; import { useChannels } from '../../hooks/useChannels';
import { APPS } from '../../config/apps';
import './Navbar.css'; import './Navbar.css';
export function Navbar() { export function Navbar() {
@ -10,7 +11,13 @@ export function Navbar() {
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const { channels } = useChannels(); const { channels } = useChannels();
const isVideoPage = location.pathname.startsWith('/videos'); // Detect current app from registry
const getCurrentApp = (pathname: string) => {
return APPS.find(app => pathname === app.link || pathname.startsWith(app.link + '/'));
};
const currentApp = getCurrentApp(location.pathname);
const isVideoApp = currentApp?.id === 'videos';
const [searchInput, setSearchInput] = useState(searchParams.get('search') || ''); const [searchInput, setSearchInput] = useState(searchParams.get('search') || '');
// Sync search input with URL params // Sync search input with URL params
@ -92,7 +99,7 @@ export function Navbar() {
</div> </div>
</div> </div>
{isVideoPage && ( {isVideoApp && (
<div className="navbar-filters"> <div className="navbar-filters">
<div className="navbar-filters-container"> <div className="navbar-filters-container">
<form onSubmit={handleSearchSubmit} className="navbar-search-form"> <form onSubmit={handleSearchSubmit} className="navbar-search-form">

32
frontend/src/config/apps.ts

@ -0,0 +1,32 @@
import React from 'react';
import { VideoApp } from '../pages/VideoApp';
export type App = {
id: string;
name: string;
description: string;
cta: string;
link: string;
} & (
| { disabled: true; component?: never }
| { disabled?: false; component: React.ComponentType }
);
export const APPS: App[] = [
{
id: 'videos',
name: 'Video Library',
description: 'Browse long-form videos from your trusted kid-friendly channels, already filtered to longer than ten minutes.',
cta: 'Open Videos',
link: '/videos',
component: VideoApp
},
{
id: 'storytime',
name: 'Story Time (Coming Soon)',
description: 'Narrated stories and audio adventures for quiet time.',
cta: 'In Development',
link: '/stories',
disabled: true
}
];

31
frontend/src/pages/LandingPage.tsx

@ -1,40 +1,13 @@
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { APPS } from '../config/apps';
import './LandingPage.css'; import './LandingPage.css';
type App = {
id: string;
name: string;
description: string;
cta: string;
} & (
| { disabled: true; link?: never }
| { disabled?: false; link: string }
);
const APPS: App[] = [
{
id: 'videos',
name: 'Video Library',
description: 'Browse long-form videos from your trusted kid-friendly channels, already filtered to longer than ten minutes.',
cta: 'Open Videos',
link: '/videos'
},
{
id: 'soon',
name: 'Story Time (Coming Soon)',
description: 'Narrated stories and audio adventures for quiet time.',
cta: 'In Development',
disabled: true
}
];
export function LandingPage() { export function LandingPage() {
return ( return (
<div className="landing-page menu"> <div className="landing-page menu">
<header className="menu-header"> <header className="menu-header">
<p className="eyebrow">Choose an experience</p>
<h1>Welcome to Kiddos</h1> <h1>Welcome to Kiddos</h1>
<p>Select an app below to get started. Well keep adding more experiences over time.</p> <p>Select an app below to get started.</p>
</header> </header>
<section className="app-grid"> <section className="app-grid">

Loading…
Cancel
Save