feat #27 added #38
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,12 @@ | ||
| import React from "react"; | ||
| import Footer from "./footer/Footer"; | ||
|
|
||
| const StickyFooter = () => { | ||
| return ( | ||
| <div> | ||
| <Footer /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default StickyFooter; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import Logo from "../../../assets/Logo/logo.png"; | ||
| import { FaFacebook, FaInstagram, FaTiktok } from "react-icons/fa"; | ||
|
|
||
| export default function Content() { | ||
| return ( | ||
| <div className="bg-black pt-24 py-8 px-12 h-full w-full flex flex-col justify-between"> | ||
| <Nav /> | ||
| <Section2 /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const Section2 = () => { | ||
| const [isWide, setIsWide] = useState(window.innerWidth > 640); | ||
|
|
||
| useEffect(() => { | ||
| const handleResize = () => { | ||
| setIsWide(window.innerWidth > 640); | ||
| }; | ||
|
|
||
| window.addEventListener("resize", handleResize); | ||
|
|
||
| // Cleanup the event listener on component unmount | ||
| return () => window.removeEventListener("resize", handleResize); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <> | ||
| {!isWide && ( | ||
| <div className="flex justify-center"> | ||
| <img | ||
| className="w-20 bg-white p-2 rounded-3xl h-20" | ||
| alt="logo" | ||
| src={Logo} | ||
| /> | ||
| </div> | ||
| )} | ||
|
|
||
| {isWide && ( | ||
| <div className="flex justify-between items-end text-white"> | ||
| <h1 className="text-[9vw] leading-[0.8] mt-10">BoardGame Cafe</h1> | ||
| <p>©2024 by Sip & Play</p> | ||
| </div> | ||
| )} | ||
| {!isWide && ( | ||
| <> | ||
| <div className="flex relative font-bold text-[12vw] top-10 flex-wrap justify-between items-end text-white"> | ||
| <div> | ||
| <h1 className=" leading-[0.8]">BoardGame</h1> | ||
| </div> | ||
| <div className="flex justify-center h-fit w-full"> | ||
| <h1 className="leading-[0.8] mt-4">Cafe</h1> | ||
| </div> | ||
| </div> | ||
| <div className="flex justify-center text-white"> | ||
| <p className="mt-8">©2024 by Sip & Play</p> | ||
| </div> | ||
| </> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
There was a problem hiding this comment. 🛠️ Refactor suggestion Improve responsive implementation and simplify rendering logic. While the Section2 component has a good responsive approach, there are still areas for improvement:
Consider the following improvements:
const [isWide, setIsWide] = useState(null);
useEffect(() => {
const handleResize = () => setIsWide(window.innerWidth > 640);
handleResize(); // Set initial value
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
if (isWide === null) return null;
return (
<>
{!isWide && (
<div className="flex justify-center">
<img
className="w-20 bg-white p-2 rounded-3xl h-20"
alt="logo"
src={Logo}
/>
</div>
)}
<div className={`flex ${isWide ? 'justify-between items-end' : 'flex-col items-center'} text-white`}>
<h1 className={`${isWide ? 'text-[9vw]' : 'text-[12vw] mt-10'} leading-[0.8]`}>
BoardGame {!isWide && <br />} Cafe
</h1>
<p className={isWide ? '' : 'mt-8'}>©2024 by Sip & Play</p>
</div>
</>
);These changes will improve the component's performance, readability, and maintainability. |
||
|
|
||
| const Nav = () => { | ||
| const navLinks = [ | ||
| { | ||
| name: "Home", | ||
| link: "/", | ||
| }, | ||
| { | ||
| name: "Events", | ||
| link: "/event", | ||
| }, | ||
|
|
||
| { | ||
| name: "Reservation", | ||
| link: "/register", | ||
| }, | ||
| { | ||
| name: "Boardgame", | ||
| link: "/boardgame", | ||
| }, | ||
| { | ||
| name: "About", | ||
| link: "/about", | ||
| }, | ||
| ]; | ||
| const socialLink = [ | ||
| { name: "Facebook", link: "https://www.facebook.com/sipnplaynyc/" }, | ||
| { name: "Instagram", link: "https://www.instagram.com/sipnplaynyc/?hl=en" }, | ||
| { | ||
| name: "Tiktok", | ||
| link: "https://www.tiktok.com/@sipnplaynycofficial?lang=en", | ||
| }, | ||
| ]; | ||
| const emailAddress = "[email protected]"; | ||
|
|
||
| return ( | ||
| <div className="flex shrink-0 gap-4 sm:gap-20"> | ||
| <div className="flex flex-col gap-2 text-gray-400"> | ||
| <h3 className="mb-2 uppercase text-white">About</h3> | ||
| {navLinks.map((item, index) => ( | ||
| <a | ||
| className="hover:text-white duration-300" | ||
| key={index} | ||
| href={item.link} | ||
| > | ||
| {item.name} | ||
| </a> | ||
| ))} | ||
| </div> | ||
| <div className="flex flex-col gap-2 text-gray-400"> | ||
| <h3 className="mb-2 uppercase text-white">Socials</h3> | ||
| {socialLink.map((item, index) => ( | ||
| <a | ||
| target="_blank" | ||
| className="hover:text-white duration-300" | ||
| key={index} | ||
| href={item.link} | ||
| > | ||
| {item.name} | ||
| </a> | ||
| ))} | ||
| </div> | ||
| <div className="flex flex-col gap-2 text-gray-400"> | ||
| <h3 className="mb-2 uppercase text-white">Contact Us</h3> | ||
| <a | ||
| href={`mailto:${emailAddress}`} | ||
| className="block mb-2 hover:underline" | ||
| > | ||
| {emailAddress} | ||
| </a> | ||
| <a href="tel:+17189711684" className="mb-2 hover:underline"> | ||
| 718-971-1684 | ||
| </a> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from "react"; | ||
| import Content from "./Content"; | ||
|
|
||
| const Footer = () => { | ||
| return ( | ||
| <footer | ||
| className="relative h-[800px]" | ||
| style={{ clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)" }} | ||
| > | ||
| <div className="relative h-[calc(100vh+800px)] -top-[100vh]"> | ||
| <div className="h-[600px] sticky top-[calc(100vh-600px)]"> | ||
| <Content /> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Footer; |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🛠️ Refactor suggestion
Optimize icon imports for better performance.
The current import of icons from react-icons is correct, but it can be optimized to reduce the bundle size.
Consider importing only the specific icons you need instead of the entire
faset:This change will help reduce the bundle size by only including the necessary icons.