dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

UPDATE: Fix to stream/userpage routing, Added UserPage and Tidy to code;

Browse Source 
Added ability to visit a user's profile page from their stream;
Cleaned up code formatting, primarily changing from single quotes to double quotes;
Removed unused SignupForm component;
This commit is contained in:
Chris-1010
2025-02-04 14:59:18 +00:00
parent f31834bc1d
commit 60c19b3052
24 changed files with 325 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/Layout/ListRow.tsx
View File

@@ -72,12 +72,10 @@ const ListRow: React.FC<ListRowProps> = ({
id={item.id}
type={item.type}
title={item.title}
streamer={item.type === "stream" ? (item.streamer) : undefined}
streamer={item.type === "stream" ? item.streamer : undefined}
viewers={item.viewers}
thumbnail={item.thumbnail}
onItemClick={() =>
onClick?.(item.id, item.streamer || item.title)
}
onItemClick={() => onClick?.(item.id, item.streamer || item.title)}
/>
))}
</div>

8
frontend/src/components/Layout/Logo.tsx
View File

@@ -6,11 +6,13 @@ interface LogoProps {
}
const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
const gradient =
"text-transparent group-hover:mx-1 transition-all";
const gradient = "text-transparent group-hover:mx-1 transition-all";
return (
<Link to="/" className="cursor-pointer">
<div id="logo" className={`group py-3 text-center font-bold hover:scale-110 transition-all ${variant === "home" ? "text-[12vh]" : "text-[4vh]"}`}>
<div
id="logo"
className={`group py-3 text-center font-bold hover:scale-110 transition-all ${variant === "home" ? "text-[12vh]" : "text-[4vh]"}`}
>
<h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
Go on, have a...
</h6>

32
frontend/src/components/Layout/Navbar.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import Logo from "./Logo";
import Button, {ToggleButton} from "./Button";
import Button, { ToggleButton } from "./Button";
import Sidebar from "./Sidebar";
import { Sidebar as SidebarIcon } from "lucide-react";
import {
@@ -13,14 +13,17 @@ import Input from "./Input";
import AuthModal from "../Auth/AuthModal";
import { useAuth } from "../../context/AuthContext";
interface NavbarProps {
variant?: "home" | "default";
isChatOpen: boolean;
toggleChat: () => void;
isChatOpen?: boolean;
toggleChat?: () => void;
}
const Navbar: React.FC<NavbarProps> = ({ variant = "default", isChatOpen, toggleChat }) => {
const Navbar: React.FC<NavbarProps> = ({
variant = "default",
isChatOpen,
toggleChat,
}) => {
const [showAuthModal, setShowAuthModal] = useState(false);
const { isLoggedIn } = useAuth();
const isVideoPage = location.pathname.includes("/EduGuru");
@@ -47,7 +50,10 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default", isChatOpen, toggle
};
return (
<div id="navbar" className={`flex justify-center items-center ${variant === "home" ? "h-[45vh] flex-col" : "h-[15vh] col-span-2 flex-row"}`}>
<div
id="navbar"
className={`flex justify-center items-center ${variant === "home" ? "h-[45vh] flex-col" : "h-[15vh] col-span-2 flex-row"}`}
>
<Logo variant={variant} />
<Button
extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap"
@@ -83,11 +89,13 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default", isChatOpen, toggle
Quick Settings
</Button>
{isVideoPage && (
<ToggleButton onClick={toggleChat} toggled={isChatOpen}
extraClasses="absolute top-[80px] right-[20px] text-[1rem] flex items-center flex-nowrap"
>
{isChatOpen ? "Hide Chat" : "Show Chat"}
</ToggleButton>
<ToggleButton
onClick={toggleChat}
toggled={isChatOpen}
extraClasses="absolute top-[80px] right-[20px] text-[1rem] flex items-center flex-nowrap"
>
{isChatOpen ? "Hide Chat" : "Show Chat"}
</ToggleButton>
)}
<div id="search-bar" className="flex items-center">
@@ -96,10 +104,10 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default", isChatOpen, toggle
placeholder="Search..."
extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
/>
<SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
</div>
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
</div>
);