REFACTOR: Repositioning of Components in Project Structure
This commit is contained in:
Chris-1010
@@ -1,53 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
interface ButtonProps {
|
||||
type?: "button" | "submit" | "reset";
|
||||
extraClasses?: string;
|
||||
children?: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const Button: React.FC<ButtonProps> = ({
|
||||
type = "button",
|
||||
children = "Submit",
|
||||
extraClasses = "",
|
||||
onClick,
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
className={`${extraClasses} p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
interface ToggleButtonProps extends ButtonProps {
|
||||
toggled?: boolean;
|
||||
}
|
||||
|
||||
export const ToggleButton: React.FC<ToggleButtonProps> = ({
|
||||
children = "Toggle",
|
||||
extraClasses = "",
|
||||
onClick,
|
||||
toggled = false
|
||||
}) => {
|
||||
toggled
|
||||
? (extraClasses += " cursor-default bg-purple-600")
|
||||
: (extraClasses +=
|
||||
" cursor-pointer hover:text-purple-600 hover:bg-black/80 hover:border-purple-500 hover:border-b-4 hover:border-l-4");
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
className={`${extraClasses} p-2 text-[1.5rem] text-white bg-black/30 rounded-[1rem] border border-gray-300 transition-all`}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -1,39 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
||||
extraClasses?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
const Input: React.FC<InputProps> = ({
|
||||
name,
|
||||
type = "text",
|
||||
placeholder = "",
|
||||
value = "",
|
||||
extraClasses = "",
|
||||
onChange = () => { },
|
||||
onKeyDown = () => { },
|
||||
children,
|
||||
...props // all other HTML input props
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
name={name}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
onKeyDown={onKeyDown}
|
||||
{...props}
|
||||
className={`${extraClasses} relative p-2 rounded-[1rem] w-[20vw] focus:w-[21vw] bg-black/40 border border-gray-300 focus:border-purple-500 focus:outline-purple-500 text-center text-white text-xl transition-all`}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
export default Input;
|
||||
@@ -1,118 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Logo from "./Logo";
|
||||
import Button from "./Button";
|
||||
import Sidebar from "./Sidebar";
|
||||
import { Sidebar as SidebarIcon } from "lucide-react";
|
||||
import {
|
||||
LogIn as LogInIcon,
|
||||
LogOut as LogOutIcon,
|
||||
Settings as SettingsIcon,
|
||||
} from "lucide-react";
|
||||
import SearchBar from "./SearchBar";
|
||||
import AuthModal from "../Auth/AuthModal";
|
||||
import { useAuthModal } from "../../hooks/useAuthModal";
|
||||
import { useAuth } from "../../context/AuthContext";
|
||||
import QuickSettings from "./QuickSettings";
|
||||
|
||||
interface NavbarProps {
|
||||
variant?: "home" | "default";
|
||||
}
|
||||
|
||||
const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
|
||||
const { isLoggedIn } = useAuth();
|
||||
const { showAuthModal, setShowAuthModal } = useAuthModal();
|
||||
const [showSideBar, setShowSideBar] = useState(false);
|
||||
const [showQuickSettings, setShowQuickSettings] = useState(false);
|
||||
|
||||
const handleLogout = () => {
|
||||
console.log("Logging out...");
|
||||
fetch("/api/logout")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
window.location.reload();
|
||||
});
|
||||
};
|
||||
|
||||
const handleQuickSettings = () => {
|
||||
setShowQuickSettings(!showQuickSettings);
|
||||
};
|
||||
|
||||
const handleSideBar = () => {
|
||||
setShowSideBar(!showSideBar);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<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"
|
||||
onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
|
||||
>
|
||||
{isLoggedIn ? (
|
||||
<>
|
||||
<LogOutIcon className="h-15 w-15 mr-1" />
|
||||
Logout
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<LogInIcon className="h-15 w-15 mr-1" />
|
||||
Login / Register
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{isLoggedIn && (
|
||||
<>
|
||||
<Button
|
||||
onClick={() => handleSideBar()}
|
||||
extraClasses={`fixed ${showSideBar
|
||||
? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
|
||||
bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
|
||||
over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
|
||||
: "top-[75px] left-[20px]"
|
||||
} transition-all duration-300 z-[99]`}
|
||||
>
|
||||
<SidebarIcon className="top-[0.20em] left-[10em] mr-1 z-[90]" />
|
||||
</Button>
|
||||
<div
|
||||
className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
|
||||
transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
|
||||
}`}
|
||||
>
|
||||
<Sidebar />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<Button
|
||||
extraClasses={`absolute top-[20px] right-[20px] text-[1rem] flex items-center flex-nowrap z-[9999]`}
|
||||
onClick={() => handleQuickSettings()}
|
||||
>
|
||||
<SettingsIcon className="h-15 w-15 mr-1 " />
|
||||
Quick Settings
|
||||
</Button>
|
||||
|
||||
<div
|
||||
className={`fixed top-0 right-0 w-[250px] h-screen ] z-[90] overflow-y-auto scrollbar-hide
|
||||
transition-opacity duration-500 ease-in-out ${showQuickSettings? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
|
||||
}`}
|
||||
>
|
||||
<QuickSettings />
|
||||
</div>
|
||||
|
||||
<SearchBar />
|
||||
|
||||
{showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
import Theme from "./Theme";
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
|
||||
const QuickSettings: React.FC = () => {
|
||||
const { theme } = useTheme();
|
||||
|
||||
return (
|
||||
<div className="fixed top-0 right-0 w-[250px] h-screen p-4 z-[90] overflow-y-auto"
|
||||
style={{ backgroundColor: 'var(--bg-color)', color: 'var(--text-color)' }}>
|
||||
<h3 className="text-xl">Current Theme: {theme}</h3>
|
||||
<Theme />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default QuickSettings;
|
||||
@@ -1,83 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import Input from "./Input";
|
||||
import { Search as SearchIcon } from "lucide-react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const SearchBar: React.FC = () => {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
//const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Debounce the search query
|
||||
{/*
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setDebouncedQuery(searchQuery);
|
||||
}, 500); // Wait 500ms after user stops typing
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]); */}
|
||||
|
||||
// Perform search when debounced query changes
|
||||
const handleSearch = async () => {
|
||||
if (!searchQuery.trim()) return;
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/search", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ query: searchQuery }), // <-- Fixed payload
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
console.log("Search results:", data);
|
||||
|
||||
navigate("/results", { state: { searchResults: data, query: searchQuery } });
|
||||
|
||||
// Handle the search results here
|
||||
} catch (error) {
|
||||
console.error("Error performing search:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
console.log("Key pressed:", e.key); // Debugging
|
||||
|
||||
e.preventDefault(); // Prevent unintended form submission
|
||||
handleSearch(); // Trigger search when Enter key is pressed
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearchQuery(e.target.value);
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="search-bar" className="flex items-center">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={searchQuery}
|
||||
onChange={handleSearchChange}
|
||||
onKeyDown={handleKeyPress}
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBar;
|
||||
@@ -1,76 +0,0 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { SunMoon as SunMoonIcon } from "lucide-react"
|
||||
import Theme from "./Theme";
|
||||
import "../../assets/styles/sidebar.css"
|
||||
|
||||
interface SideBarProps {
|
||||
extraClasses?: string;
|
||||
}
|
||||
|
||||
const Sidebar: React.FC<SideBarProps> = () => {
|
||||
const [isCursorOnSidebar, setIsCursorOnSidebar] = useState(false);
|
||||
const [triggerAnimation, setTriggerAnimation] = useState(false);
|
||||
useEffect(() => {
|
||||
const sideBarScroll = () => {
|
||||
document.body.style.overflow = isCursorOnSidebar ? "hidden" : "unset";
|
||||
};
|
||||
sideBarScroll()
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = "unset";
|
||||
};
|
||||
}, [isCursorOnSidebar]);
|
||||
|
||||
|
||||
const testStreamer: Record<string, string> = {
|
||||
"Markiplier": "Slink1",
|
||||
"Jacksepticeye": "Slink2",
|
||||
"8-BitRyan": "Slink3",
|
||||
};
|
||||
|
||||
const testCategory: Record<string, { dummyLink: string; dummyImage: string }> = {
|
||||
"Action": { dummyLink: "link1", dummyImage: "../../../images/icons/Action.webp" },
|
||||
"Horror": { dummyLink: "link2", dummyImage: "../../../images/icons/Horror.png" },
|
||||
"Psychological": { dummyLink: "link3", dummyImage: "../../../images/icons/Psychological.png" },
|
||||
"Adult": { dummyLink: "link4", dummyImage: "../../../images/icons/R-18.png" },
|
||||
"Shooter": { dummyLink: "link5", dummyImage: "../../../images/icons/Shooter.png" }
|
||||
};
|
||||
|
||||
const shownStreamers = Object.entries(testStreamer).map(([dummyCategory, dummyLink]) => {
|
||||
return (
|
||||
<li key={dummyCategory}>
|
||||
<a href={dummyLink}>{dummyCategory}</a>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => {
|
||||
return (
|
||||
<li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
|
||||
hover:bg-[#800020] hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
|
||||
<img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" />
|
||||
<a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<div className="overflow-hidden">
|
||||
<h1 className="style"> Followed </h1>
|
||||
<ul>
|
||||
{shownStreamers}
|
||||
</ul>
|
||||
|
||||
<h1 className="category-style pt-[0.50em] overflow-hidden"> Your Categories </h1>
|
||||
<ul>
|
||||
{shownCategory}
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
@@ -1,44 +0,0 @@
|
||||
import React from "react";
|
||||
import { Sun as SunIcon, Moon as MoonIcon, Droplet as BlueIcon, Leaf as GreenIcon, Flame as OrangeIcon } from "lucide-react";
|
||||
import { useTheme } from "../../context/ThemeContext";
|
||||
|
||||
const themeIcons = {
|
||||
light: <SunIcon size={27} className="text-yellow-400" />,
|
||||
dark: <MoonIcon size={27} className="text-white" />,
|
||||
blue: <BlueIcon size={27} className="text-blue-500" />,
|
||||
green: <GreenIcon size={27} className="text-green-500" />,
|
||||
orange: <OrangeIcon size={27} className="text-orange-500" />,
|
||||
};
|
||||
|
||||
const themes = ["light", "dark", "blue", "green", "orange"];
|
||||
|
||||
const Theme: React.FC = () => {
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
const handleNextTheme = () => {
|
||||
const currentIndex = themes.indexOf(theme);
|
||||
const nextIndex = (currentIndex + 1) % themes.length;
|
||||
const nextTheme = themes[nextIndex];
|
||||
setTheme(nextTheme);
|
||||
document.body.setAttribute("data-theme", nextTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleNextTheme}
|
||||
className="p-2 text-[1.5rem] flex items-center gap-2 rounded-md border transition-all"
|
||||
>
|
||||
{themeIcons[theme as keyof typeof themeIcons]} {theme}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
|
||||
{/*
|
||||
${isMode ?
|
||||
`text-white bg-[#3478ef] hover:text-[#3478ef] hover:bg-[#000000]
|
||||
border-[#3478ef] hover:border-[##3478ef]` :
|
||||
`text-yellow-400 bg-white hover:text-yellow-400 hover:bg-white
|
||||
border-yellow-400 hover:border-yellow-400`}
|
||||
hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `} */}
|
||||
Reference in New Issue
Block a user