Skip to content

Commit

Permalink
Mobile Footer (#240)
Browse files Browse the repository at this point in the history 
* Fix texts

* Replace Twitter with X

* Add condensed list component with displayText prop in SocialLinkProps

* Fix styling of LinkCondensedList

* Create remaining Icon componenents

* Fix sizing and spacing of icons

* Fix links for condensed links section

* Create separate mobile and non-mobile sections

* Fix links

* Fix spacing for both mobile and desktop
  • Loading branch information
@lizageorge
lizageorge authored Aug 30, 2024
1 parent 0336a17 commit 79bdf51
Show file tree
Hide file tree
Showing 9 changed files with 342 additions and 59 deletions.
302 changes: 246 additions & 56 deletions src/components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import clsx from 'clsx'
import type { FC, ReactNode } from 'react'
import { ArrowUpRightIcon, HeartIcon } from '@heroicons/react/24/solid'
import Link from 'next/link'

import CapitalizedTitle from '../text/CapitalizedTitle'
import InstagramIcon from '../icon/InstagramIcon'
import FacebookIcon from '../icon/FacebookIcon'
import TwitterIcon from '../icon/TwitterIcon'
import XIcon from '../icon/XIcon'
import GitHubIcon from '../icon/GitHubIcon'
import MainIcon from '../icon/MailIcon'
import LinkedInIcon from '../icon/LinkedIn'
import ThreadsIcon from '../icon/ThreadsIcon'

interface LinkSubsectionProps {
title: string
Expand All @@ -16,11 +20,18 @@ interface LinkSubsectionProps {
}[]
}

interface LinkCondensedListProps {
links: {
href: string
socialType: SocialType
}[]
}

const LinkSubsection = ({ title, links }: LinkSubsectionProps) => {
return (
<div className="mb-10 w-full flex-1 text-center lg:text-left">
<h3 className="text-lg">{title}</h3>
<div className="mt-8 flex flex-col items-center lg:items-start">
<div className="w-full flex-1 text-center md:mb-10 lg:text-left">
<h3 className="hidden text-lg md:inline">{title}</h3>
<div className="mt-4 flex flex-col md:mt-8 md:items-center lg:items-start">
{links.map(({ href, text }) => (
<Link
key={href}
Expand All @@ -36,110 +47,289 @@ const LinkSubsection = ({ title, links }: LinkSubsectionProps) => {
)
}

const LinkCondensedList = ({ links }: LinkCondensedListProps) => {
return (
<div className="mt-4 flex items-center">
{links.map(({ href, socialType }) => (
<Link
key={href}
className="mr-3 w-fit transition duration-500 hover:text-clementine"
href={href}
target="_blank"
>
<SocialLink type={socialType} displayText={false} />
</Link>
))}
</div>
)
}

enum SocialType {
Instagram = 'instagram',
Facebook = 'facebook',
X = 'X',
Github = 'github',
Mail = 'mail',
LinkedIn = 'linkedin',
Threads = 'threads',
}

interface SocialLinkProps {
type: 'instagram' | 'facebook' | 'twitter' | 'github'
type: SocialType
displayText: boolean
}

const SocialLink = ({ type }: SocialLinkProps) => {
const SocialLink = ({ type, displayText }: SocialLinkProps) => {
const icon = {
instagram: <InstagramIcon className="mr-2" />,
facebook: <FacebookIcon className="mr-2" />,
twitter: <TwitterIcon className="mr-2" />,
github: <GitHubIcon className="mr-2" />,
instagram: <InstagramIcon className="w-5 md:w-5" />,
facebook: <FacebookIcon className="w-7 md:w-7" />,
X: <XIcon className="w-5 md:w-5" />,
github: <GitHubIcon className="ml-0.5 w-3 md:w-5" />,
mail: <MainIcon className="w-5 md:w-7" />,
linkedin: <LinkedInIcon className="w-5 md:w-6" />,
threads: <ThreadsIcon className="w-5 md:w-6" />,
}

const displayText = {
const textToDisplay = {
instagram: 'Instagram',
facebook: 'Facebook',
twitter: 'Twitter',
X: 'X',
github: 'GitHub',
mail: '[email protected]',
linkedin: 'Linkedin',
threads: 'Threads',
}

return (
<span className="group flex items-center">
{icon[type]}
<span className="group-hover:fill-clementine">{displayText[type]}</span>
{displayText && (
<span className="ml-2 group-hover:fill-clementine">
{textToDisplay[type]}
</span>
)}
</span>
)
}

const FooterMobileHeader: FC<{ text: string; className?: string }> = ({
text,
className,
}) => {
return (
<p
className={clsx(
'mb-2 pb-3 uppercase underline decoration-clementine underline-offset-[14px]',
className,
)}
>
{text}
</p>
)
}

const FooterExternalLink: FC<{ org: string }> = ({ org }) => {
return (
<a
className="mt-4 flex underline underline-offset-4"
href={
org == 'secs'
? 'https://secsatuiuc.web.illinois.edu/'
: 'https://uiuc.hack4impact.org/'
}
>
{org == 'secs' ? 'SECS' : 'Hack4Impact UIUC'}{' '}
<ArrowUpRightIcon className="ml-1 w-5" />
</a>
)
}

export const Footer: FC = () => (
<footer>
<div className="bg-darkTeal p-10 text-white">
<div className="flex flex-wrap">
<div className="mb-5 w-full text-center md:mb-0 lg:w-1/2 lg:pl-14 lg:text-left">
<CapitalizedTitle className="justify-center pr-2 text-sm sm:text-base md:m-0 md:text-base lg:justify-start lg:text-xl" />

<div className="mb-4">
<p className="mt-8 text-sm">Can’t find what you are looking for?</p>
<p className="text-sm">Contact us through email to get in touch!</p>
</div>

<Link
className="bg-red text-clementine"
href="mailto:[email protected]"
>
[email protected]
</Link>
</div>

<div className="flex w-full flex-wrap lg:w-1/2">
<div className="flex-col md:hidden">
<FooterMobileHeader text="Contact Us" />
<p className="text-sm">Can’t find what you are looking for?</p>
<p className="text-sm">Get in touch!</p>
<LinkSubsection
title="About us"
title="Follow SECS"
links={[
{
href: 'mailto:[email protected]',
text: <SocialLink type={SocialType.Mail} displayText={true} />,
},
]}
/>
<FooterMobileHeader text="Follow Us" className="mt-8" />
<LinkCondensedList
links={[
{
href: 'https://secsatuiuc.web.illinois.edu',
text: (
<span className="flex underline underline-offset-4">
SECS <ArrowUpRightIcon className="ml-1 w-5" />
</span>
),
href: 'https://github.com/toriis-portal/toriis',
socialType: SocialType.Github,
},
{
href: 'https://www.linkedin.com/company/toriis/',
socialType: SocialType.LinkedIn,
},
{
href: 'https://uiuc.hack4impact.org/',
text: (
<span className="flex underline underline-offset-4">
Hack4Impact UIUC <ArrowUpRightIcon className="ml-1 w-5" />
</span>
),
href: 'https://twitter.com/toriis_earth',
socialType: SocialType.X,
},
{
href: 'https://www.instagram.com/toriis.earth',
socialType: SocialType.Instagram,
},
{
href: 'https://www.threads.net/@toriis.earth',
socialType: SocialType.Threads,
},
]}
/>
<LinkSubsection
title="Follow SECS"
<FooterMobileHeader
text="About our collaborators"
className="mt-11"
/>
<FooterExternalLink org="secs" />
<LinkCondensedList
links={[
{
href: 'https://www.instagram.com/secsuiuc',
text: <SocialLink type="instagram" />,
href: 'https://instagram.com/secsuiuc',
socialType: SocialType.Instagram,
},
{
href: 'https://twitter.com/secsuiuc',
text: <SocialLink type="twitter" />,
href: 'https://x.com/secsuiuc',
socialType: SocialType.X,
},
{
href: 'https://www.facebook.com/SECSUIUC',
text: <SocialLink type="facebook" />,
socialType: SocialType.Facebook,
},
]}
/>
<LinkSubsection
title="Follow Hack4Impact UIUC"
<FooterExternalLink org="hack" />
<LinkCondensedList
links={[
{
href: 'https://www.instagram.com/hack4impactuiuc/',
text: <SocialLink type="instagram" />,
socialType: SocialType.Instagram,
},
{
href: 'https://github.com/hack4impact-uiuc',
text: <SocialLink type="github" />,
socialType: SocialType.Github,
},
{
href: 'https://www.facebook.com/h4iuiuc/',
text: <SocialLink type="facebook" />,
href: 'https://www.facebook.com/h4iuiuc',
socialType: SocialType.Facebook,
},
]}
/>
</div>
<div className="hidden md:flex">
<div className="mb-5 w-full text-center md:mb-0 lg:w-1/2 lg:pl-14 lg:text-left">
<CapitalizedTitle className="justify-center pr-2 text-sm sm:text-base md:m-0 md:text-base lg:justify-start lg:text-xl" />
<div className="mb-4">
<p className="mt-8 text-sm">
Can’t find what you are looking for?
</p>
<p className="text-sm">Get in touch!</p>
</div>
<LinkCondensedList
links={[
{
href: 'mailto:[email protected]',
socialType: SocialType.Mail,
},
{
href: 'https://github.com/toriis-portal/toriis',
socialType: SocialType.Github,
},
{
href: 'https://www.linkedin.com/company/toriis/',
socialType: SocialType.LinkedIn,
},
{
href: 'https://twitter.com/toriis_earth',
socialType: SocialType.X,
},
{
href: 'https://www.instagram.com/toriis.earth',
socialType: SocialType.Instagram,
},
{
href: 'https://www.threads.net/@toriis.earth',
socialType: SocialType.Threads,
},
]}
/>
</div>

<div className="flex w-full flex-wrap lg:w-1/2">
<LinkSubsection
title="About Our Collaborators"
links={[
{
href: 'https://secsatuiuc.web.illinois.edu',
text: <FooterExternalLink org="secs" />,
},
{
href: 'https://uiuc.hack4impact.org/',
text: <FooterExternalLink org="hack" />,
},
]}
/>
<LinkSubsection
title="Follow SECS"
links={[
{
href: 'https://www.instagram.com/secsuiuc',
text: (
<SocialLink
type={SocialType.Instagram}
displayText={true}
/>
),
},
{
href: 'https://twitter.com/secsuiuc',
text: <SocialLink type={SocialType.X} displayText={true} />,
},
{
href: 'https://www.facebook.com/SECSUIUC',
text: (
<SocialLink type={SocialType.Facebook} displayText={true} />
),
},
]}
/>
<LinkSubsection
title="Follow Hack4Impact UIUC"
links={[
{
href: 'https://www.instagram.com/hack4impactuiuc/',
text: (
<SocialLink
type={SocialType.Instagram}
displayText={true}
/>
),
},
{
href: 'https://github.com/hack4impact-uiuc',
text: (
<SocialLink type={SocialType.Github} displayText={true} />
),
},
{
href: 'https://www.facebook.com/h4iuiuc/',
text: (
<SocialLink type={SocialType.Facebook} displayText={true} />
),
},
]}
/>
</div>
</div>
</div>
</div>

Expand Down
1 change: 0 additions & 1 deletion src/components/icon/FacebookIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ const FacebookIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
className={clsx(
'w',
'transition duration-500 group-hover:fill-clementine',
'w-5',
className,
)}
viewBox="-5.5 0 32 32"
Expand Down
2 changes: 1 addition & 1 deletion src/components/icon/GitHubIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const GitHubIcon = ({ className, ...props }: React.ComponentProps<'svg'>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="28px"
width="32px"
height="28px"
viewBox="0 0 20 20"
version="1.1"
Expand Down
Loading

0 comments on commit 79bdf51

Please sign in to comment.