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 the button only using tailwind #142

Closed
wants to merge 6 commits into from
Closed

added the button only using tailwind #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
69cebfd
Added Button. Issue: #66
maitri-vv Oct 5, 2024
2f92d19
Merge branch 'main' of https://github.com/RamakrushnaBiswal/PlayCafe
maitri-vv Oct 5, 2024
33972d7
Updated the CSS for button
maitri-vv Oct 7, 2024
5b59584
removed it
maitri-vv Oct 8, 2024
e857ce6
Merge branch 'main' of https://github.com/maitri-vv/PlayCafe
maitri-vv Oct 8, 2024
8b68c29
Done changes
maitri-vv Oct 8, 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
2 changes: 1 addition & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"gsap": "^3.12.5",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-icons": "^5.3.0",
"react-intersection-observer": "^9.13.0",
"react-lazy-load-image-component": "^1.6.2",
"react-pageflip": "^2.0.3",
Expand Down
23 changes: 10 additions & 13 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,13 @@ body{
background: #F1EADC;
}

.rating-button {
@apply flex-grow bg-neutral-50 text-center p-2 rounded-md cursor-pointer select-none
}

input[type="radio"] {
display: none;
}

.star {
cursor: pointer;
font-size: 2rem;
margin-bottom: 0;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
Comment on lines +22 to +29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider using Tailwind's animation utilities instead of custom CSS keyframes.

While the added bounce animation doesn't contradict the PR objectives, Tailwind CSS provides built-in animation utilities that could be used instead. This would align better with the goal of using "only Tailwind" for styling.

Instead of defining a custom keyframe animation, you can use Tailwind's animate-bounce class directly in your JSX. For example:

<div className="animate-bounce">
  {/* Your bouncing content */}
</div>

If you need to customize the animation, you can extend Tailwind's animation configuration in the tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      animation: {
        'custom-bounce': 'bounce 1s infinite',
      },
      keyframes: {
        bounce: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' },
        }
      }
    }
  }
}

Then use it in your JSX:

<div className="animate-custom-bounce">
  {/* Your bouncing content */}
</div>

This approach maintains the use of Tailwind for all styling, including animations.


55 changes: 39 additions & 16 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,51 @@
// src/App.js

import "./App.css";
import Navbar from "../src/components/Shared/Navbar";
import './App.css';
import Navbar from '../src/components/Shared/Navbar';
import Footer from "../src/components/Shared/Footer";
import { Outlet } from "react-router-dom";
import { AuthProvider } from './components/Shared/AuthContext';
import { Outlet } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import { KindeProvider } from "@kinde-oss/kinde-auth-react";

function App() {
const [showButton, setShowButton] = useState(false);

// Show the "Back to Top" button when the user scrolls down
useEffect(() => {
const handleScroll = () => {
const isBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
setShowButton(isBottom);
};

window.addEventListener("scroll", handleScroll);

return () => window.removeEventListener("scroll", handleScroll);
}, []);

const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};

return (
<AuthProvider>
<KindeProvider
clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
domain={import.meta.env.VITE_KINDE_DOMAIN}
redirectUri={import.meta.env.VITE_KINDE_REDIRECT_URI}
logoutUri={import.meta.env.VITE_KINDE_LOGOUT_REDIRECT_URI}
>
<Navbar />
<Outlet />
<Footer />
</KindeProvider>
</AuthProvider>
clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
domain={import.meta.env.VITE_KINDE_DOMAIN}
redirectUri={import.meta.env.VITE_KINDE_REDIRECT_URI}
logoutUri={import.meta.env.VITE_KINDE_LOGOUT_REDIRECT_URI}
>
<Navbar />
<Outlet />
<Footer />

{showButton && (
<button
onClick={scrollToTop}
className="fixed bottom-8 right-8 bg-[#E0F0B1] hover:bg-amber-300 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-transform duration-300 transform hover:scale-110" >
↑
</button>
)}
</KindeProvider>
);
}

export default App;
export default App;
20 changes: 10 additions & 10 deletions frontend/src/components/Shared/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ const Navbar = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const location = useLocation();
const wasAuthenticated = useRef(null);
const { setEmail } = useAuth();

// Get setEmail from useAuth, or fallback to an empty object if useAuth is undefined
const { setEmail } = useAuth() || {};

const menuItems = [
{ name: "Home", path: "/" },
Expand Down Expand Up @@ -44,7 +46,6 @@ const Navbar = () => {
}
if (!wasAuthenticated.current && isAuthenticated) {
message.success("Login successful!");
// Fetch user details only when authentication is successful
fetchUserDetails();
}
wasAuthenticated.current = isAuthenticated;
Expand All @@ -53,8 +54,8 @@ const Navbar = () => {
const fetchUserDetails = async () => {
try {
const user = getUser();
if (user) {
setEmail(user.email); // Store email in the context
if (user && setEmail) {
setEmail(user.email); // Only call setEmail if it's defined
console.log("User email:", user.email);
}
} catch (error) {
Expand Down Expand Up @@ -92,7 +93,7 @@ const Navbar = () => {
const handleLogout = async () => {
try {
await logout();
setEmail(null);
if (setEmail) setEmail(null);
} catch (error) {
message.error("Logout failed. Please try again.");
}
Expand Down Expand Up @@ -127,7 +128,6 @@ const Navbar = () => {
))}
{isAuthenticated ? (
<button

onClick={handleLogout}
className={`${baseTextColorClass} ${hoverTextColorClass} transform hover:scale-110 hover:-translate-y-1 transition `}
type="button"
Expand Down Expand Up @@ -184,7 +184,7 @@ const Navbar = () => {
key={item.name}
to={item.path}
className={`block px-4 py-3 rounded-md text-base font-semibold transition duration-300
${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
>
{item.name}
</Link>
Expand All @@ -193,15 +193,15 @@ const Navbar = () => {
<button
onClick={handleLogout}
className={`block w-full text-left px-4 py-3 rounded-md text-base font-semibold transition duration-300
${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
>
Log Out
</button>
) : (
<button
onClick={handleLogin}
className={`block w-full text-left px-4 py-3 rounded-md text-base font-semibold transition duration-300
${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
${mobileMenuBaseTextColorClass} hover:bg-amber-300 hover:text-black`}
>
Log In
</button>
Expand All @@ -213,4 +213,4 @@ const Navbar = () => {
);
};

export default Navbar;
export default Navbar;
4 changes: 3 additions & 1 deletion frontend/src/components/ui/FeedbackForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ const FeedbackForm = () => {
placeholder="Name"
onChange={(e) => setName(e.target.value)}
required
autoComplete="off"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
/>
</div>
Expand All @@ -136,6 +137,7 @@ const FeedbackForm = () => {
value={email}
onChange={(e) => setEmail(e.target.value)}
required
autoComplete="off"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
/>
</div>
Expand All @@ -153,7 +155,7 @@ const FeedbackForm = () => {
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
required
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43] resize-none"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-[#004D43] focus:border-[#004D43]"
></textarea>
</div>
<div className="flex flex-row justify-center gap-2">
Expand Down