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

Footer #8

Merged
merged 3 commits into from
Apr 10, 2024
Merged

Footer #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5011410
Completed Footer Basics, Needs further improvement.
Michael-Ballard-Isaiah-Silaen Mar 24, 2024
5868dac
Fix code style issues with Prettier
lint-action Mar 24, 2024
7ce8054
added footer component
yonatan-nyo Apr 10, 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: 7 additions & 2 deletions src/components/BPACard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,10 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
return (
<div className="w-[38%] sm:w-[18%] min-w-[200px] max-w-[200px] h-auto text-center drop-shadow-xl border-4 rounded-xl flex flex-col bg-slate-50 border-slate-50 hover:scale-110 duration-150 ease-in hover:shadow-lg hover:font-semibold flex-grow-0 aspect-[3/4]">
<Image
src={imgUrl || "https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"}
src={
imgUrl ||
"https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
}
alt={name}
width={300}
height={700}
Expand All @@ -21,7 +24,9 @@ const BPACard = ({ imgUrl, name, position, hideName }: memberBPA) => {
{!hideName && (
<div className="flex justify-center items-center flex-grow">
<p className="border-t-2 border-slate-300 px-2 py-3">{name}</p>
{position && <p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>}
{position && (
<p className="border-t-2 border-slate-300 px-2 py-3">{position}</p>
)}
</div>
)}
</div>
Expand Down
9 changes: 7 additions & 2 deletions src/components/BPAbutton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,15 @@ const BPAbutton = ({ data }: { data: bpaType }) => {
return (
<Link
href={`/tentang-bpa/#${getSlug(data.name)}`}
className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75">
className="border-2 rounded-full border-[#101351] md:border-slate-200 h-fit px-2 py-0.5 hover:bg-slate-50/50 ease-in duration-75"
>
<p className="button">
<span className="text-[#101351] md:text-white">{data.name}</span>{" "}
{data.members.length > 1 && <span className="font-bold text-[#79B5EE]">{data.members.length}</span>}
{data.members.length > 1 && (
<span className="font-bold text-[#79B5EE]">
{data.members.length}
</span>
)}
</p>
</Link>
);
Expand Down
28 changes: 23 additions & 5 deletions src/components/BPAinfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,28 +26,46 @@ const BPAInfo = ({ data }: { data: bpaType }) => {
};

return (
<div className="w-full pb-8 py-2" id={getSlug(data.name)} data-aos="fade-right">
<div
className="w-full pb-8 py-2"
id={getSlug(data.name)}
data-aos="fade-right"
>
<div className="flex w-full border-b-2 gap-2 items-center">
<h2 className="font-bold text-xl">{data.name}</h2>
<span className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500" onClick={handleCopyLink}>
<span
className="text-xl font-bold text-blue-600 cursor-pointer hover:text-blue-500"
onClick={handleCopyLink}
>
#
</span>
{copySuccess && <span className="text-blue-500 ml-2 text-sm">Copied!</span>}
{copySuccess && (
<span className="text-blue-500 ml-2 text-sm">Copied!</span>
)}
</div>
{data.members.length > 1 ? (
<>
<p className="py-2 font-light">{data.jobDesc}</p>
<div className="flex gap-4 flex-wrap w-full justify-center sm:justify-start">
{data.members.map((member, idx) => (
<BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} />
<BPACard
key={`${idx}-${member}-${data.name}`}
name={member.name}
imgUrl={member.imgUrl}
/>
))}
</div>
</>
) : (
<div className="flex flex-col lg:flex-row gap-2 w-full py-4">
<div className="flex gap-4 flex-wrap w-full sm:w-fit flex-grow-0 justify-center sm:justify-start">
{data.members.map((member, idx) => (
<BPACard key={`${idx}-${member}-${data.name}`} name={member.name} imgUrl={member.imgUrl} hideName={true} />
<BPACard
key={`${idx}-${member}-${data.name}`}
name={member.name}
imgUrl={member.imgUrl}
hideName={true}
/>
))}
</div>
<p className="py-2 font-light">
Expand Down
57 changes: 57 additions & 0 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import Link from "next/link";
import React from "react";
import { IoIosStarOutline } from "react-icons/io";
import { FaInstagram } from "react-icons/fa";
import { FaYoutube } from "react-icons/fa6";
import { FaTiktok } from "react-icons/fa";
import { FaXTwitter } from "react-icons/fa6";
import { SiLinktree } from "react-icons/si";

const Footer = () => {
return (
<footer className="w-full h-fit px-4 md:px-8 bg-[#151655] text-white">
<div className="w-full h-full grow-0 flex flex-col mx-auto py-2">
<div className="border-b-2 border-white flex flex-col md:flex-row justify-between py-2">
<div className="flex gap-2 items-center">
<div className="w-10 h-10 bg-white rounded-full" />
<div className="flex flex-col justify-center">
<p>Syntax</p>
<p>Code Create Connect</p>
</div>
</div>
<div className="flex gap-1 md:gap-12 pl-2 py-4 md:py-0 flex-col md:flex-row items-start md:items-center">
<Link href="/">About Us</Link>
<Link href="/">Support Us</Link>
<Link href="/">Contact Us</Link>
<Link href="/">Media Kit</Link>
</div>
<div className="flex flex-col justify-center pb-2 md:pb-0 items-start md:items-end">
<p>Like What You&apos;re Seeing?</p>
<p>Give us feedback!</p>
<div className="flex">
<IoIosStarOutline />
<IoIosStarOutline />
<IoIosStarOutline />
<IoIosStarOutline />
<IoIosStarOutline />
</div>
</div>
</div>
<div className="w-full flex justify-between gap-4">
<div className="py-2">
<p>&copy; 2024 BPA Academics STEI-K 2023. All rights reserved.</p>
</div>
<div className="py-2 gap-4 flex flex-row items-center">
<FaInstagram />
<FaYoutube />
<FaTiktok />
<FaXTwitter />
<SiLinktree />
</div>
</div>
</div>
</footer>
);
};

export default Footer;
101 changes: 78 additions & 23 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,26 @@ import { GoHome, GoCopilot } from "react-icons/go";
import { IoMdBook } from "react-icons/io";
import { RiGroupLine } from "react-icons/ri";

const NavListDesktop = ({ href, routerPathname, lable }: { href: string; routerPathname: string; lable: string }) => (
const NavListDesktop = ({
href,
routerPathname,
lable,
}: {
href: string;
routerPathname: string;
lable: string;
}) => (
<Link href={href} className="hidden md:block h-full">
<p
className={
routerPathname === href ? "border-b-2 border-gray-400" : "hover:brightness-110 hover:border-b-2 border-gray-400"
}>
<span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">{lable}</span>
routerPathname === href
? "border-b-2 border-gray-400"
: "hover:brightness-110 hover:border-b-2 border-gray-400"
}
>
<span className="text-[16px] lg:text-[18px] font-outfit tracking-wider">
{lable}
</span>
</p>
</Link>
);
Expand Down Expand Up @@ -68,12 +81,20 @@ const Navbar = () => {
<>
<header
className={`sticky left-0 top-0 z-50 h-[5.2rem] flex w-full items-center px-0 duration-500 ease-in-out ${scrollDirection ? "translate-y-0" : "-translate-y-24"} ${
router.pathname === "/" && !scrolledOneThirdvw ? "bg-none" : "bg-[#101351]"
}`}>
router.pathname === "/" && !scrolledOneThirdvw
? "bg-none"
: "bg-[#101351]"
}`}
>
<div className="w-full px-2 mx-auto">
<div className="relative flex items-center justify-between">
<Link href="/" className="w-fit h-[5rem] flex items-center gap-4 pl-4">
<div className={`h-4 min-h-full py-2 transition-all duration-300`}>
<Link
href="/"
className="w-fit h-[5rem] flex items-center gap-4 pl-4"
>
<div
className={`h-4 min-h-full py-2 transition-all duration-300`}
>
<Image
src="https://utfs.io/f/7648af4a-e902-454b-b937-b7433ef9aa2b-vbi1vd.svg"
className={`w-full h-full cursor-pointer object-contain`}
Expand All @@ -86,11 +107,13 @@ const Navbar = () => {
</div>
<div className="flex flex-col justify-center gap-0 pt-1">
<h1
className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}>
className={`font-extrabold uppercase text-2xl duration-100 ease-in tracking-wider font-outfit h-fit leading-4 ${getTextColor()}`}
>
Syntax
</h1>
<p
className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}>
className={`text-[16px] lg:text-lg duration-100 ease-in tracking-wider font-outfit leading-6 ${getTextColor()}`}
>
code, create, connect
</p>
</div>
Expand All @@ -100,11 +123,28 @@ const Navbar = () => {
<div className="flex gap-2 sm:gap-4 md:gap-6 lg:gap-10 items-center">
{/* Desktop navigation list */}
<div
className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}>
<NavListDesktop href="/" routerPathname={router.pathname} lable="Home" />
<NavListDesktop href="/tentang-bpa" routerPathname={router.pathname} lable="BPA" />
<NavListDesktop href="/akademik" routerPathname={router.pathname} lable="Akademik" />
<NavListDesktop href="/acara-kemahasiswaan" routerPathname={router.pathname} lable="Acara" />
className={`flex gap-0 py-1 text-[#6B778C] md:gap-6 lg:gap-8 lg:py-5 xl:gap-12 uppercase items-center ${getTextColor()}`}
>
<NavListDesktop
href="/"
routerPathname={router.pathname}
lable="Home"
/>
<NavListDesktop
href="/tentang-bpa"
routerPathname={router.pathname}
lable="BPA"
/>
<NavListDesktop
href="/akademik"
routerPathname={router.pathname}
lable="Akademik"
/>
<NavListDesktop
href="/acara-kemahasiswaan"
routerPathname={router.pathname}
lable="Acara"
/>
</div>

{/* Mobile Nav Button */}
Expand All @@ -113,39 +153,54 @@ const Navbar = () => {
</div>
<button
className="block md:hidden hover:brightness-95 p-2 rounded-md ml-2 text-[#6B778C]"
onClick={() => handleNav(true)}>
onClick={() => handleNav(true)}
>
<RxHamburgerMenu size={30} />
</button>

{/* Mobile Nav List */}
<div
onClick={() => handleNav(false)}
className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}>
className={`text-slate-800 ${navMobile ? "md:hidden fixed left-0 top-0 w-full h-screen bg-black/70" : ""}`}
>
<div
className={
navMobile
? "fixed right-0 top-0 w-[240px] h-screen bg-slate-50 p-4 pt-10 ease-in duration-500 flex flex-col gap-4"
: "fixed right-[-150%] w-[240px] h-screen bg-slate-50 top-0 p-4 pt-10 ease-in duration-500 flex flex-col gap-4 items-start"
}>
}
>
<section className="space-y-2">
<p className="text-3xl font-bold leading-none">SYNTAX</p>
<p className="font-bold">STEI-K 23</p>
<p className="text-sm font-bold italic leading-none mb-10">Code, Create, Connect!</p>
<p className="text-sm font-bold italic leading-none mb-10">
Code, Create, Connect!
</p>
</section>

<section className="flex flex-col gap-1">
<Link href="/" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
<Link
href="/"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
<GoHome size={19} /> Home
</Link>
<Link href="/tentang-bpa" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
<Link
href="/tentang-bpa"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
<GoCopilot size={19} /> BPA
</Link>
<Link href="/akademik" className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
<Link
href="/akademik"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
<IoMdBook size={19} /> Akademik
</Link>
<Link
href="/acara-kemahasiswaan"
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2">
className="bg-slate-50 hover:brightness-95 pl-2 py-1 flex items-center gap-2"
>
<RiGroupLine size={19} /> Acara Kemahasiswaan
</Link>
</section>
Expand Down
2 changes: 2 additions & 0 deletions src/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Footer from "@/components/Footer";
import { Html, Head, Main, NextScript } from "next/document";

export default function MyDocument() {
Expand Down Expand Up @@ -76,6 +77,7 @@ export default function MyDocument() {
<body>
<Main />
<NextScript />
<Footer />
</body>
</Html>
);
Expand Down
Loading
Loading