Skip to content

Add Explore page with video thumbnails and modal, use Header componen… #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mdejesus23 wants to merge 3 commits into
base: staging
Choose a base branch
from
Open

Add Explore page with video thumbnails and modal, use Header componen… #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a6bf680
Add Explore page with video thumbnails and modal, use Header componen…
mdejesus23 Mar 19, 2025
e4866c7
Add VideoCard component for optimized video rendering using lazy loading
mdejesus23 Mar 19, 2025
d4a5754
Revert formatting changes in src/App.css and src/utils/storage.js
mdejesus23 Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 33 additions & 24 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,43 @@
import './App.css'
import React, { Fragment, useEffect, useState } from 'react';
import VideoGenerator from './components/VideoGenerator'
import Header from './components/Header';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ProtectedRoute from './components/ProtectedRoute';
import Admin from './pages/Admin';
import SignIn from './components/SignIn';
import Error from './pages/Error';
import { initializeFirebase } from './utils/storage';
import "./App.css";
import React, { Fragment, useEffect, useState } from "react";
import VideoGenerator from "./components/VideoGenerator";
import Header from "./components/Header";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import ProtectedRoute from "./components/ProtectedRoute";
import Admin from "./pages/Admin";
import SignIn from "./components/SignIn";
import Error from "./pages/Error";
import { initializeFirebase } from "./utils/storage";
import { ToastContainer } from "react-toastify";
import Explore from "./pages/Explore";
import "react-toastify/dist/ReactToastify.css";

function App() {
useEffect(() => {
initializeFirebase();
}, []);
}, []);
return (
<Router>
<Fragment>
<Header />
<ToastContainer position="top-left" autoClose={6000} />
<Routes>
<Route exact path="/" element={<VideoGenerator />} />
<Route path ="/error" element={<Error />} />
<Route path="/signin" element={<SignIn />} />
<Route path="/admin" element={<ProtectedRoute><Admin /></ProtectedRoute>} />
</Routes>
<Router>
<Fragment>
<Header />
<ToastContainer position="top-left" autoClose={6000} />
<Routes>
<Route exact path="/" element={<Explore />} />
<Route exact path="/create" element={<VideoGenerator />} />
<Route path="/error" element={<Error />} />
<Route path="/signin" element={<SignIn />} />
<Route
path="/admin"
element={
<ProtectedRoute>
<Admin />
</ProtectedRoute>
}
/>
</Routes>
</Fragment>
</Router>
)
</Router>
);
}

export default App
export default App;
Binary file added src/assets/images/video-placeholder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 56 additions & 12 deletions src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,56 @@
import React from 'react';
import logoSlogan from '../assets/images/logo_slogan.png'

const Header = () => {
return (
<header className="absolute top-0 left-0 w-full p-4">
{/* <img src={logoSlogan} alt="micespace logo" className="w-48"/> */}
</header>
);
}

export default Header;
import React from "react";
import { NavLink } from "react-router-dom";
import logoSlogan from "../assets/images/logo_slogan.png";

const Header = () => {
return (
<header className="absolute top-0 left-0 w-full py-6 px-4">
<nav className="max-w-2xl mx-auto flex items-center gap-6">
{/* Logo Section */}
<NavLink to="/" className="flex-shrink-0">
<img
src={logoSlogan}
alt="micespace logo"
className="hidden w-48 md:block"
/>

<img
src={logoSlogan}
alt="micespace logo"
className="w-28 md:hidden"
/>
</NavLink>

{/* Navigation Links */}
<ul className="flex items-center gap-4">
<li>
<NavLink
to="/"
className={({ isActive }) =>
isActive
? "font-semibold text-sm text-black"
: "font-semibold text-sm text-gray-500"
}
>
Explore
</NavLink>
</li>
<li>
<NavLink
to="/create"
className={({ isActive }) =>
isActive
? "font-semibold text-sm text-black"
: "font-semibold text-sm text-gray-500"
}
>
Create
</NavLink>
</li>
</ul>
</nav>
</header>
);
};

export default Header;
47 changes: 27 additions & 20 deletions src/components/Modal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,33 @@
import React from 'react';
import React from "react";

const Modal = ({ isOpen, onClose, children, showOkButton = true }) => {
if (!isOpen) return null;
if (!isOpen) return null;

return (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center z-10">
<div className="bg-white p-6 rounded-lg shadow-lg w-11/12 md:w-1/2">
<div className="flex justify-end items-center">
<button onClick={onClose} className="text-gray-600 hover:text-gray-900">&times;</button>
</div>
<div className="overflow-y-auto">
{children}
</div>
{showOkButton && (
<div className="flex justify-end mt-4">
<button onClick={onClose} className="bg-primary text-white px-4 py-2 rounded">Ok</button>
</div>
)}

</div>
return (
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex justify-center items-center z-10">
<div className="bg-white p-6 rounded-lg shadow-lg w-11/12 md:w-1/2">
<div className="flex justify-end items-center">
<button
onClick={onClose}
className="text-gray-600 hover:text-gray-900"
>
&times;
</button>
</div>
);
<div className="overflow-y-auto">{children}</div>
{showOkButton && (
<div className="flex justify-end mt-4">
<button
onClick={onClose}
className="bg-primary text-white px-4 py-2 rounded"
>
Ok
</button>
</div>
)}
</div>
</div>
);
};

export default Modal;
export default Modal;
Loading