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

Jump to bottom

Footer change #41

Merged
merged 3 commits into from
Apr 27, 2024
Merged

Footer change #41

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d9803e1
Replace custom link components with class string
TyHil Feb 8, 2024
a0a9ee2
Remove LinkProps
TyHil Feb 8, 2024
6e1f844
Merge branch 'develop' into footer-change
TyHil Apr 27, 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
159 changes: 87 additions & 72 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,7 @@
import Image from 'next/image';
import Link, { LinkProps } from 'next/link';
import Link from 'next/link';

interface StyledNextLinkBaseProps {
className?: string;
children?: React.ReactNode;
}

type StyledNextLinkProps = StyledNextLinkBaseProps & LinkProps;

const StyledNextLink = (props: StyledNextLinkProps) => {
const { className, children, ...rest } = props;
return (
<Link
{...props}
className={
'underline decoration-transparent hover:decoration-inherit transition ' + className ?? ''
}
>
{children ?? null}
</Link>
);
};

interface StyledALinkProps {
className?: string;
children?: React.ReactNode;
href?: string;
}

const StyledALink = (props: StyledALinkProps) => (
<a
href={props.href ?? ''}
target="_blank"
className={
'underline decoration-transparent hover:decoration-inherit transition ' + props.className ??
''
}
>
{props.children ?? null}
</a>
);
const linkClasses = 'underline decoration-transparent hover:decoration-inherit transition';

interface FooterProps {
royalBg?: Boolean;
Expand Down Expand Up @@ -83,74 +45,127 @@ const Footer = (props: FooterProps) => {
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-10">
<div className="flex flex-col items-start gap-3">
<StyledNextLink href="/about">
<Link className={linkClasses} href="/about">
<h3 className="text-xl font-semibold mb-4">About us</h3>
</StyledNextLink>
<StyledNextLink href="/about/mission">Mission</StyledNextLink>
<StyledNextLink href="/about/governance">Project Governance</StyledNextLink>
<StyledNextLink href="/membership">Membership</StyledNextLink>
<StyledNextLink href="/newsletter">Newsletter</StyledNextLink>
<StyledNextLink href="/contact">Contact Us</StyledNextLink>
</Link>
<Link className={linkClasses} href="/about/mission">
Mission
</Link>
<Link className={linkClasses} href="/about/governance">
Project Governance
</Link>
<Link className={linkClasses} href="/membership">
Membership
</Link>
<Link className={linkClasses} href="/newsletter">
Newsletter
</Link>
<Link className={linkClasses} href="/contact">
Contact Us
</Link>
</div>
<div className="flex flex-col items-start gap-3">
<StyledNextLink href="/projects">
<Link className={linkClasses} href="/projects">
<h3 className="text-xl font-semibold mb-4">Projects</h3>
</StyledNextLink>
<StyledNextLink href="/projects/planner">Planner</StyledNextLink>
<StyledNextLink href="/projects/jupiter">Jupiter</StyledNextLink>
<StyledNextLink href="/projects/trends">Trends</StyledNextLink>
<StyledNextLink href="/projects/skedge">Skedge</StyledNextLink>
<StyledNextLink href="/projects/api">API & Platform</StyledNextLink>
</Link>
<Link className={linkClasses} href="/projects/planner">
Planner
</Link>
<Link className={linkClasses} href="/projects/jupiter">
Jupiter
</Link>
<Link className={linkClasses} href="/projects/trends">
Trends
</Link>
<Link className={linkClasses} href="/projects/skedge">
Skedge
</Link>
<Link className={linkClasses} href="/projects/api">
API & Platform
</Link>
</div>
<div className="flex flex-col items-start gap-3">
<h3 className="text-xl font-semibold mb-4">Resources</h3>
<StyledNextLink href="/resources/roles">Roles</StyledNextLink>
<StyledNextLink href="/about/governance">Project Governance</StyledNextLink>
<StyledNextLink href="/resources/meetings">Meetings</StyledNextLink>
<StyledNextLink href="/resources/calendar">Calendar</StyledNextLink>
<StyledNextLink href="/resources/design-guide">Design Guide</StyledNextLink>
<Link className={linkClasses} href="/resources/roles">
Roles
</Link>
<Link className={linkClasses} href="/about/governance">
Project Governance
</Link>
<Link className={linkClasses} href="/resources/meetings">
Meetings
</Link>
<Link className={linkClasses} href="/resources/calendar">
Calendar
</Link>
<Link className={linkClasses} href="/resources/design-guide">
Design Guide
</Link>
</div>
<div className="flex flex-col items-start gap-4 lg:ml-auto">
<a className="mb-6 hover:scale-105 transition" href="https://discord.gg/tcpcnfxmeQ">
<a
className="mb-6 hover:scale-105 transition"
href="https://discord.gg/tcpcnfxmeQ"
target="_blank"
>
<Image src={'/join-discord-' + color + '.svg'} alt="discord" width="200" height="60" />
</a>
<StyledALink className="flex items-center gap-2" href="https://instagram.com/utdnebula">
<a
className={linkClasses + ' flex items-center gap-2'}
href="https://instagram.com/utdnebula"
target="_blank"
>
<Image
src={'/instagram-' + color + '.svg'}
alt="Instagram logo"
width="30"
height="30"
/>
Instagram
</StyledALink>
<StyledALink
className="flex items-center gap-2"
</a>
<a
className={linkClasses + ' flex items-center gap-2'}
href="https://linkedin.com/company/utdnebula"
target="_blank"
>
<Image src={'/linkedin-' + color + '.svg'} alt="LinkedIn logo" width="30" height="30" />
LinkedIn
</StyledALink>
<StyledALink className="flex items-center gap-2" href="https://github.com/utdnebula">
</a>
<a
className={linkClasses + ' flex items-center gap-2'}
href="https://github.com/utdnebula"
target="_blank"
>
<Image src={'/github-' + color + '.svg'} alt="GitHub logo" width="30" height="30" />
GitHub
</StyledALink>
</a>
</div>
</div>
<div className="md:pt-40 pt-10">
<div className={'border-t-2 ' + (royalBg ? 'border-white' : 'border-black')} />
<div className="flex md:flex-row flex-col justify-between gap-8 pt-8">
<div className="flex gap-x-8 gap-y-1 justify-around md:justify-normal flex-wrap">
<StyledNextLink href="/legal/terms-of-service.txt">Terms of Service</StyledNextLink>
<StyledNextLink href="/legal/privacy-policy.txt">Privacy Policy</StyledNextLink>
<StyledNextLink href="/sitemap.xml">Sitemap</StyledNextLink>
<Link className={linkClasses} href="/legal/terms-of-service.txt">
Terms of Service
</Link>
<Link className={linkClasses} href="/legal/privacy-policy.txt">
Privacy Policy
</Link>
<Link className={linkClasses} href="/sitemap.xml">
Sitemap
</Link>
</div>
<div className="md:text-right text-center text-xs">
<p>© 2023 Nebula Labs Maintainers. All rights reserved.</p>
<p>
Site design by{' '}
<StyledALink className="font-bold" href="https://hilary-nguyen.com/">
<a
className={linkClasses + ' font-bold'}
href="https://hilary-nguyen.com/"
target="_blank"
>
Hilary Nguyen
</StyledALink>
</a>
</p>
</div>
</div>
Expand Down
Loading