Merge pull request #46 from the-collab-lab/dtp-teampage

Issue #16: Create Team Component and Loading Screen

src/App.jsx

@@ -1,5 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import { Home, Layout, ManageList } from './views';
+import { Suspense } from 'react';
+import { Home, Layout, ManageList, Team } from './views';
+import { Loading } from './components/Loading';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { useAuth, useShoppingListData, useShoppingLists } from './api';
 import { useStateWithStorage } from './utils';
@@ -64,6 +66,14 @@ export function App() {
 							</ProtectedRoute>
 						}
 					/>
+					<Route
+						path="developers"
+						element={
+							<Suspense fallback={<Loading />}>
+								<Team />
+							</Suspense>
+						}
+					/>
 				</Route>
 			</Routes>
 		</Router>

src/api/useAuth.jsx

@@ -9,15 +9,23 @@ import { useNavigate } from 'react-router-dom';
  * the button redirects the user to the Google OAuth sign-in page.
  * After the user signs in, they are redirected back to the app.
  */
-export const SignInButton = ({ children, className }) => (
-	<button
-		type="button"
-		className={className}
-		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-	>
-		{children}
-	</button>
-);
+
+export const SignInButton = ({ children, className }) => {
+	const navigate = useNavigate();
+	const handleSignIn = async () => {
+		try {
+			await signInWithPopup(auth, new GoogleAuthProvider());
+			navigate('/');
+		} catch (error) {
+			console.error('Error signing in: ', error);
+		}
+	};
+	return (
+		<button type="button" className={className} onClick={handleSignIn}>
+			{children}
+		</button>
+	);
+};
 
 /**
  * A button that signs the user out of the app using Firebase Auth.

src/components/Loading.jsx

@@ -0,0 +1,12 @@
+export function Loading() {
+	return (
+		<div style={{ textAlign: 'center', padding: '20px' }}>
+			<img
+				src={`${import.meta.env.BASE_URL}logo.png`}
+				alt="Loading..."
+				style={{ width: '150px' }}
+			/>
+			<h2>Please hold on while we prepare your experience.</h2>
+		</div>
+	);
+}

src/views/LandingPage.jsx

@@ -1,13 +1,10 @@
 import './LandingPage.css';
+import logo from '../assets/logo.png';
 
 export function LandingPage() {
 	return (
 		<div className="landing-container">
-			<img
-				src={`${import.meta.env.BASE_URL}logo.png`}
-				alt="Logo"
-				className="logo"
-			/>
+			<img src={logo} alt="Logo" className="logo" />
 			<h1 className="main-heading">
 				<strong>CollabShop</strong> is more than just a grocery app—it&apos;s a
 				tool that embodies the spirit of teamwork and collaboration. Created by

src/views/Layout.jsx

@@ -9,6 +9,7 @@ import {
 import { IconButton } from '../components/IconButton';
 import { useAuth, SignOutButton, SignInButton } from '../api/useAuth.jsx';
 import { auth } from '../api/config.js';
+import logo from '../assets/logo.png';
 import './Layout.css';
 
 /**
@@ -27,7 +28,7 @@ export function Layout() {
 				<header className="Layout-header">
 					{!!user && (
 						<div>
-							<h1 className="text-3xl font-bold underline">CollabShop</h1>
+							<img src={logo} alt="Logo" className="logo" />
 							<span>Signed in as {auth.currentUser.displayName}</span>
 						</div>
 					)}
@@ -69,8 +70,8 @@ export function Layout() {
 									as={NavLink}
 									className="Nav-link"
 									IconComponent={FaInfoCircle}
-									label="Meet The Team"
-									to="/meet-the-team"
+									label="Developers"
+									to="/developers"
 								/>
 								<IconButton
 									aria-label="Sign In"

src/views/Team.jsx

@@ -0,0 +1,149 @@
+import { FaGithub, FaLinkedin, FaGlobe } from 'react-icons/fa';
+import doribelAvatar from '../assets/avatars/doribelAvatar.jpg';
+import nicholasAvatar from '../assets/avatars/nicholasAvatar.png';
+import shuvekshaAvatar from '../assets/avatars/shuvekshaAvatar.jpg';
+import stacyAvatar from '../assets/avatars/stacyAvatar.jpg';
+
+const developers = [
+	{
+		name: 'Doribel Tercero-Parker',
+		photo: doribelAvatar,
+		github: 'https://github.com/dterceroparker',
+		linkedin: 'https://www.linkedin.com/in/doribelt-p/',
+		portfolio: 'http://doribel-portfolio.netlify.app/',
+	},
+	{
+		name: 'Nicholas Rocco',
+		photo: nicholasAvatar,
+		github: 'https://github.com/NickRoccodev11',
+		linkedin: 'https://www.linkedin.com/in/nicholasroccodev/',
+		portfolio: 'https://nicholasroccodev.netlify.app/',
+	},
+	{
+		name: 'Shuveksha Tuladhar',
+		photo: shuvekshaAvatar,
+		github: 'https://github.com/shuveksha-tuladhar',
+		linkedin: 'https://www.linkedin.com/in/shuvekshatuladhar/',
+		portfolio: 'https://shuveksha-tuladhar.github.io/',
+	},
+	{
+		name: 'Stacy Daniel',
+		photo: stacyAvatar,
+		github: 'https://github.com/stacy-tech',
+		linkedin: 'https://www.linkedin.com/in/stacy-d/',
+	},
+];
+
+export function Team() {
+	return (
+		<div
+			style={{
+				padding: '20px',
+				textAlign: 'center',
+				backgroundColor: '#f9f9f9',
+			}}
+		>
+			<h1
+				style={{
+					marginBottom: '20px',
+					color: '#333',
+					fontSize: '2em',
+				}}
+			>
+				Meet the Tgit eam Behind CollabShop
+			</h1>
+			<p
+				style={{
+					marginBottom: '40px',
+					color: '#555',
+					fontSize: '1em',
+					lineHeight: '1.6',
+				}}
+			>
+				We are a passionate group of developers, united by our love for learning
+				and collaboration. Our goal is to create an experience that feels
+				friendly, inclusive, and helpful for all users. Let&apos;s connect and
+				grow together!
+			</p>
+			<div
+				className="team-container"
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					gap: '20px',
+				}}
+			>
+				{developers.map((dev, index) => (
+					<div
+						className="developer-card"
+						key={index}
+						style={{
+							backgroundColor: '#fff',
+							borderRadius: '8px',
+							padding: '20px',
+							boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
+							width: '250px',
+							transition: 'transform 0.3s, box-shadow 0.3s',
+						}}
+						onMouseEnter={(e) => {
+							e.currentTarget.style.transform = 'translateY(-5px)';
+							e.currentTarget.style.boxShadow = '0 8px 16px rgba(0, 0, 0, 0.2)';
+						}}
+						onMouseLeave={(e) => {
+							e.currentTarget.style.transform = 'translateY(0)';
+							e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
+						}}
+					>
+						<img
+							src={dev.photo}
+							alt={dev.name ? `${dev.name}'s photo` : 'Developer photo'}
+							style={{
+								width: '100px',
+								height: 'auto',
+								borderRadius: '5%',
+								boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+								marginBottom: '15px',
+							}}
+						/>
+						<h3 style={{ color: '#555', marginBottom: '10px' }}>{dev.name}</h3>
+						<div
+							className="developer-links"
+							style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}
+						>
+							<a
+								href={dev.github}
+								target="_blank"
+								rel="noopener noreferrer"
+								aria-label={`${dev.name} GitHub`}
+								style={{ color: '#333' }}
+							>
+								<FaGithub size={24} />
+							</a>
+							<a
+								href={dev.linkedin}
+								target="_blank"
+								rel="noopener noreferrer"
+								aria-label={`${dev.name} LinkedIn`}
+								style={{ color: '#0077b5' }}
+							>
+								<FaLinkedin size={24} />
+							</a>
+							{dev.portfolio && (
+								<a
+									href={dev.portfolio}
+									target="_blank"
+									rel="noopener noreferrer"
+									aria-label={`${dev.name} Portfolio`}
+									style={{ color: '#000' }}
+								>
+									<FaGlobe size={24} />
+								</a>
+							)}
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

src/views/index.js

@@ -4,3 +4,4 @@ export * from './Layout';
 export * from './LandingPage';
 export * from './List';
 export * from './Disclosure';
+export * from './Team';