Skip to content
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

Added Rateus Option #317

Closed
wants to merge 11 commits into from
Closed

Added Rateus Option #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
29ba97b
Added Icons
sailaja-adapa Jun 26, 2024
05c56a0
Added RateUs Option
sailaja-adapa Jun 26, 2024
fde6817
Added Rate Us Option
sailaja-adapa Jun 26, 2024
67cbb36
Delete package-lock.json
sailaja-adapa Jun 27, 2024
06c18de
Updated Navbar.tsx
sailaja-adapa Jun 28, 2024
4342ebe
Merge branch 'main' into rateuss
sailaja-adapa Jun 28, 2024
ce25e9e
Merge branch 'VaibhavArora314:main' into rateuss
sailaja-adapa Jul 2, 2024
cbabb27
Updated Navbar.tsx
sailaja-adapa Jul 2, 2024
5b1f1e1
Updated Navbar.tsx
sailaja-adapa Jul 2, 2024
d091606
Updated Navbar.tsx
sailaja-adapa Jul 2, 2024
26029ed
Updated Navbar.tsx
sailaja-adapa Jul 2, 2024
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
9 changes: 8 additions & 1 deletion frontend/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import React from "react";
import Loader from "./components/Loader";
import ContactUs from "./pages/ContactUs";
import About from "./pages/About";
import Rateus from "./pages/Rateus";
import Policy from "./pages/Policy";
import GoTop from "./components/GoTop";
import { Toaster } from 'react-hot-toast';
Expand Down Expand Up @@ -113,6 +114,12 @@ function App() {
}
/>
<Route
path="/app/rateus"
element={
<Rateus theme={theme} />
}
/>
<Route
path="/app/code"
element={
<AuthenticatedRoute>
Expand Down Expand Up @@ -157,4 +164,4 @@ function App() {
);
}

export default App;
export default App;
119 changes: 65 additions & 54 deletions frontend/src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@ import toast from "react-hot-toast";
import logo from '../assets/favicon.png';
import { useTranslation } from "react-i18next";
import LanguageDropdown from "./LanguageDropdown";
import { FaSun, FaMoon } from 'react-icons/fa';
import { FaHome, FaScroll, FaTrophy, FaUser, FaPlus, FaHeart, FaSignOutAlt, FaMoon, FaSun, FaStar } from 'react-icons/fa';
import { IoLogIn, IoPersonAdd } from 'react-icons/io5';
import clsx from 'clsx';

interface NavbarProps {
interface NavbarProps {
theme: 'light' | 'dark';
toggleTheme: () => void;
}

const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme })=> {
const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const setTokenState = useSetRecoilState(tokenState);
const isLoggedIn = useRecoilValue(loggedInState);
Expand All @@ -36,68 +38,81 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme })=> {
};

const getNavLinkClass = (path: string) => {
return location.pathname === path
? "block py-2 px-3 bg-blue-600 rounded md:bg-transparent md:p-0 text-white md:text-blue-300"
: "block py-2 px-3 rounded md:border-0 md:p-0 text-white md:hover:text-blue-300 hover:bg-blue-400 hover:text-white md:hover:bg-transparent";
return clsx(
"block py-2 px-4 rounded md:border-0 md:p-0 text-white md:hover:text-blue-300 hover:bg-blue-400 hover:text-white md:hover:bg-transparent transition duration-300 ease-in-out",
{
"text-blue-600": location.pathname === path,
}
);
};

return (
<nav className={`bg-gradient-to-r from-[#6a11cb] via-[#ab67df] to-[#2575fc] fixed w-full z-20 top-0 start-0 `}>

<nav className="bg-gradient-to-r from-[#6a11cb] via-[#ab67df] to-[#2575fc] fixed w-full z-20 top-0">
<div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<Link to="/app" className="flex items-center justify-between space-x-3 rtl:space-x-reverse" onClick={closeMenu}>
<div className="flex items-center space-x-3 rtl:space-x-reverse dark:text-black">
{/* Favicon, Logo, Language Selector, Close Button */}
<div className="flex items-center space-x-8 lg:space-x-3 w-full lg:w-auto justify-between lg:justify-start mb-4 lg:mb-0">
<Link to="/app" className="flex items-center space-x-4 rtl:space-x-reverse" onClick={closeMenu}>
<img src={logo} className="h-8" alt="Styleshare Logo" />
<span className="self-center text-2xl font-bold text-white font-mono">
{t("navbar.logo")}
</span>
</Link>
<div className="flex items-center space-x-16 lg:hidden ml-8"> {/* Adjusted margin-left */}
<div className="relative z-10">
<LanguageDropdown /> {/* Ensure dropdown appears above */}
</div>
<button
onClick={toggleMenu}
type="button"
className="relative inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
aria-controls="navbar-default"
aria-expanded={isMenuOpen ? "true" : "false"}
>
<span className="sr-only">Open Menu</span>
<div className="flex flex-col gap-1">
<span className={`h-0.5 w-4 bg-white transform transition duration-200 ease-in ${isMenuOpen ? "rotate-[45deg]" : "rotate-0"}`}></span>
<span className={`h-0.5 w-4 ${isMenuOpen ? "bg-transparent" : "bg-white"} transition duration-200 ease-in ${isMenuOpen ? "absolute" : "relative"}`}></span>
<span className={`h-0.5 w-4 bg-white transform transition duration-200 ease-in ${isMenuOpen ? "rotate-[-45deg]" : "rotate-0"} ${isMenuOpen ? "absolute" : "relative"}`}></span>
</div>
</button>
</div>
<div className=" ">
<LanguageDropdown />
</div>
</Link>
<button
onClick={toggleMenu}
type="button"
className="relative inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-100 rounded-lg lg:hidden hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
aria-controls="navbar-default"
aria-expanded={isMenuOpen ? "true" : "false"}
>
<span className="sr-only">Open Menu</span>
<div className="flex flex-col gap-1">
<span className={`h-0.5 w-4 bg-white transform transition duration-200 ease-in ${isMenuOpen?"rotate-[45deg]":"rotate-0"}`}></span>
<span className={`h-0.5 w-4 ${isMenuOpen?"bg-transparent":"bg-white"} transition duration-200 ease-in ${isMenuOpen?"absolute":"relative"} `}></span>
<span className={`h-0.5 w-4 bg-white transform transition duration-200 ease-in ${isMenuOpen?"rotate-[-45deg]":"rotate-0"} ${isMenuOpen?"absolute":"relative"} `}></span>
<div className="hidden lg:flex items-center space-x-3">
<LanguageDropdown /> {/* Keep as is for larger screens */}
</div>
</button>
</div>
<div
className={`${isMenuOpen ? "block" : "hidden"} w-full lg:block lg:w-auto transition-all duration-300 ease-in-out`}
className={`${isMenuOpen ? "block" : "hidden"} w-full lg:w-auto lg:flex lg:flex-grow lg:items-center lg:justify-end lg:order-2 relative`}
id="navbar-default"
>
<ul className="font-medium flex flex-col p-0 text-lg lg:p-0 mt-4 border rounded-lg lg:flex-row lg:space-x-5 rtl:space-x-reverse lg:mt-0 lg:border-0">
<ul className="font-medium flex flex-col p-0 text-lg lg:p-0 mt-4 border rounded-lg lg:flex-row lg:space-x-4 rtl:space-x-reverse lg:mt-0 lg:border-0">
<li className="mt-2 lg:mb-0">
<Link to="/app" className={getNavLinkClass("/app")} aria-current="page" onClick={closeMenu}>
{t("navbar.links.home")}
<FaHome className="inline-block mr-2" /> {t("navbar.links.home")}
</Link>
</li>
<li className="mt-2">
<Link to="/app/posts" className={getNavLinkClass("/app/posts")} onClick={closeMenu}>
{t("navbar.links.posts")}
<FaScroll className="inline-block mr-2" /> {t("navbar.links.posts")}
</Link>
</li>
<li className="mt-2">
<Link to="/app/leaderboard" className={getNavLinkClass("/app/leaderboard")} onClick={closeMenu}>
{t("navbar.links.leaderboard")}
<FaTrophy className="inline-block mr-2" /> {t("navbar.links.leaderboard")}
</Link>
</li>
<li className="mt-2">
<Link to="/app/rateus" className={getNavLinkClass("/app/rateus")} onClick={closeMenu}>
<FaStar className="inline-block mr-2" /> Rate Us
</Link>
</li>
{!isLoggedIn ? (
<div className="flex flex-col lg:flex-row lg:space-x-4">
<li className="mb-2 lg:mb-0">
<>
<li>
<Link to="/app/signin" onClick={closeMenu}>
<button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l from-[#c779e8] to-indigo-500 px-5 text-lg font-small text-white backdrop-blur-3xl">
{t("navbar.links.signin")}
<IoLogIn className="inline-block mr-2" /> {t("navbar.links.signin")}
</span>
</button>
</Link>
Expand All @@ -107,7 +122,7 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme })=> {
<button className="relative inline-flex h-12 overflow-hidden rounded-full p-[1px] focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
<span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#E2CBFF_0%,#393BB2_50%,#E2CBFF_100%)]" />
<span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-gradient-to-l from-[#c779e8] to-indigo-500 px-5 text-lg font-small text-white backdrop-blur-3xl">
{t("navbar.links.signup")}
<IoPersonAdd className="inline-block mr-2" /> {t("navbar.links.signup")}
</span>
</button>
</Link>
Expand All @@ -120,43 +135,39 @@ const Navbar: React.FC<NavbarProps> = ({ theme, toggleTheme })=> {
{theme === 'light' ? <FaMoon className="w-4 h-4 " /> : <FaSun className="w-4 h-4" />}
</button>
</li>

</div>
</>
) : (
<>
<li className="mt-2">
<Link to="/app/new-post" className={getNavLinkClass("/app/new-post")} onClick={closeMenu}>
{t("navbar.links.newpost")}
</Link>
</li>
<li className="mt-2">
<Link to="/app/code" className={getNavLinkClass("/app/code")} onClick={closeMenu}>
{t("navbar.links.codeeditor")}
<FaPlus className="inline-block mr-2" /> {t("navbar.links.newpost")}
</Link>
</li>
<li className="mt-2">
<Link to="/app/profile" className={getNavLinkClass("/app/profile")} onClick={closeMenu}>
{t("navbar.links.profile")}
<FaUser className="inline-block mr-2" /> {t("navbar.links.profile")}
</Link>
</li>
<li className="mt-2">
<Link to="/app/fav" className={getNavLinkClass("/app/fav")} onClick={closeMenu}>
{t("navbar.links.favorite")}
<FaHeart className="inline-block mr-2" /> {t("navbar.links.favorites")}
</Link>
</li>
<li className="mt-1">
<li className="mt-2">
<button
className=" text-white px-4 py-2 -mt-3 rounded-lg bg-blue-500 hover:bg-blue-600"
onClick={handleLogout}
className="inline-flex items-center justify-center w-full lg:w-auto h-12 px-6 text-lg text-white transition duration-300 ease-in-out bg-red-500 rounded-lg focus:outline-none hover:bg-red-600"
>
{t("navbar.links.logout")}
<FaSignOutAlt className="inline-block mr-2" /> {t("navbar.links.logout")}
</button>
</li>
<li>
<button
onClick={toggleTheme}
className="inline-flex mx-1 border-2 border-white items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200"
>
{theme === 'light' ? <FaMoon className="w-4 h-4 " /> : <FaSun className="w-4 h-4" />}
</button>
onClick={toggleTheme}
className="inline-flex mt-1 border-2 border-white items-center justify-center w-10 h-10 text-gray-100 rounded-lg hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-gray-200 lg:hidden"
>
{theme === 'light' ? <FaMoon className="w-4 h-4 " /> : <FaSun className="w-4 h-4" />}
</button>
</li>
</>
)}
Expand Down
76 changes: 76 additions & 0 deletions frontend/src/pages/Rateus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React, { useState } from 'react';
import { FaStar } from 'react-icons/fa';
import toast from 'react-hot-toast';

interface RateUsProps {
theme: 'light' | 'dark';
}

const RateUs: React.FC<RateUsProps> = ({ theme }) => {
const [rating, setRating] = useState<number | null>(null);
const [comment, setComment] = useState<string>('');

const handleStarClick = (index: number) => {
setRating(index + 1); // Rating is 1 to 5 (1 star to 5 stars)
};

const handleCommentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setComment(event.target.value);
};

const handleSubmit = () => {
if (rating !== null && comment.trim() !== '') {
// Handle submit logic here, e.g., send rating and comment to server
console.log('Rating:', rating);
console.log('Comment:', comment);
toast.success('Thanks For Your Feedback :)');
// You can add more logic as needed, such as clearing form fields or navigating away
} else {
toast.error('Please Fill all Details :(');
}
};
const containerClasses = `border-2 border-black p-6 rounded-lg max-w-md w-full mx-auto ${
theme === 'dark' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-black'
} shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:scale-105`;

const starColor = theme === 'dark' ? 'text-yellow-400' : 'text-yellow-500';

return (
<div className="flex items-center justify-center h-screen">
<div className={containerClasses}>
<h2 className="text-lg font-bold mb-4 text-center">Rate Us</h2>
<div className="flex items-center justify-center mb-4">
{[...Array(5)].map((_, index) => (
<FaStar
key={index}
className={`cursor-pointer ${
index < (rating || 0) ? `${starColor} text-4xl` : 'text-2xl text-gray-300'
} transition duration-300 ease-in-out`}
onClick={() => handleStarClick(index)}
/>
))}
</div>
<textarea
className={`w-full h-24 p-2 border-2 border-gray-300 rounded-lg focus:outline-none focus:border-blue-500 resize-none mb-4 ${
theme === 'dark' ? 'bg-gray-800 text-white' : 'bg-white text-black'
}`}
placeholder="Give Us Your Feedback :)"
value={comment}
onChange={handleCommentChange}
></textarea>
<div className="flex justify-center">
<button
className={`bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition duration-300 ease-in-out ${
theme === 'dark' ? 'hover:brightness-110' : 'hover:brightness-105'
}`}
onClick={handleSubmit}
>
Submit
</button>
</div>
</div>
</div>
);
};

export default RateUs;