Instantly share code, notes, and snippets.
Created
October 13, 2024 08:36
-
Star
0
(0)
You must be signed in to star a gist -
Fork
1
(1)
You must be signed in to fork a gist
-
Save klaaz0r/9b805adae33cc8ac778ca5314f087180 to your computer and use it in GitHub Desktop.
simple tailwindcss nextjs footer
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
| import Image from 'next/image' | |
| import { suggestions } from '@/lib/search-suggestions' | |
| import { createSearchUrl, labelMap } from '@/lib/search-url' | |
| import { trpc } from '@/trpc/server' | |
| import { ExperienceLevel, JobType, WorkPlaceType } from '@prisma/client' | |
| import dayjs from 'dayjs' | |
| import { Link } from 'next-view-transitions' | |
| export const revalidate = 3600 * 24 // Revalidate every 24 hours | |
| export const dynamic = 'force-static' | |
| async function Footer() { | |
| const skills = await trpc.skills.all({ | |
| skip: 0, | |
| take: 100 | |
| }) | |
| return ( | |
| <footer | |
| aria-labelledby="footer-heading" | |
| className="bg-white/90 border-t border-gray-200" | |
| > | |
| <h2 id="footer-heading" className="sr-only"> | |
| Footer | |
| </h2> | |
| <div className="mx-auto max-w-6xl px-6 pb-8 pt-16 sm:pt-24 lg:px-8 lg:pt-32"> | |
| <div className="xl:grid xl:grid-cols-3 xl:gap-8"> | |
| <div className="space-y-2"> | |
| <Image | |
| src={'/logo.svg'} | |
| alt={(process.env.WEBSITE_NAME as string) + ' logo'} | |
| width={150} | |
| priority | |
| height={100} | |
| /> | |
| <p className="text-sm leading-6 text-gray-6000"> | |
| Made by{' '} | |
| <a | |
| className="text-blue-500 font-medium" | |
| href="https://twitter.com/forgebitz" | |
| > | |
| @forgebitz | |
| </a> | |
| , Founder and CTO at{' '} | |
| <a | |
| className="text-blue-500 font-medium cursor-pointer" | |
| href="https://meetcara.ai" | |
| > | |
| Meetcara, an AI sales agent | |
| </a> | |
| {' '} | |
| ent. Checkout{' '} | |
| <a | |
| className="text-blue-500 font-medium cursor-pointer" | |
| href="https://homestra.com" | |
| > | |
| Homestra for real estate in Europe. | |
| </a> | |
| </p> | |
| </div> | |
| <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0"> | |
| <div className="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 className="text-sm font-semibold leading-6 text-gray-900"> | |
| Workplaces | |
| </h3> | |
| <ul role="list" className="mt-6 space-y-4"> | |
| {Object.keys(WorkPlaceType).map(type => ( | |
| <li key={type}> | |
| <Link | |
| prefetch={false} | |
| href={createSearchUrl({ | |
| workplace: | |
| type as WorkPlaceType | |
| })} | |
| className="text-sm leading-6 text-gray-600 hover:text-gray-900 capitalize" | |
| > | |
| { | |
| labelMap[ | |
| type as WorkPlaceType | |
| ] | |
| } | |
| </Link> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| <div className="mt-10 md:mt-0"> | |
| <h3 className="text-sm font-semibold leading-6 text-gray-900"> | |
| Seniority | |
| </h3> | |
| <ul role="list" className="mt-6 space-y-4"> | |
| {Object.keys(ExperienceLevel) | |
| .reverse() | |
| .slice(0, 4) | |
| .map(item => ( | |
| <li key={item}> | |
| <Link | |
| prefetch={false} | |
| href={createSearchUrl({ | |
| experienceLevel: | |
| item as ExperienceLevel | |
| })} | |
| className="text-sm leading-6 text-gray-600 hover:text-gray-900 capitalize" | |
| > | |
| { | |
| labelMap[ | |
| item as ExperienceLevel | |
| ] | |
| } | |
| </Link> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| </div> | |
| <div className="md:grid md:grid-cols-2 md:gap-8"> | |
| <div> | |
| <h3 className="text-sm font-semibold leading-6 text-gray-900"> | |
| Job types | |
| </h3> | |
| <ul role="list" className="mt-6 space-y-4"> | |
| {Object.keys(JobType).map(item => ( | |
| <li key={item}> | |
| <Link | |
| href={createSearchUrl({ | |
| jobType: item as JobType | |
| })} | |
| className="text-sm leading-6 text-gray-600 hover:text-gray-900 capitalize" | |
| > | |
| {labelMap[item as JobType]} | |
| </Link> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 className="text-sm font-semibold leading-6 text-gray-900"> | |
| Trending skills | |
| </h3> | |
| <ul role="list" className="mt-6 space-y-4"> | |
| {['react', 'typescript', 'AWS', 'GCP'].map( | |
| item => ( | |
| <li key={item}> | |
| <Link | |
| prefetch={false} | |
| href={createSearchUrl({ | |
| skills: [item] | |
| })} | |
| className="text-sm leading-6 text-gray-6000 hover:text-gray-900 capitalize" | |
| > | |
| {item} | |
| </Link> | |
| </li> | |
| ) | |
| )} | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4"> | |
| {suggestions.map(section => ( | |
| <div key={section.title}> | |
| <h3 className="text-sm font-semibold leading-6 text-gray-900 line-clamp-1"> | |
| {section.title} | |
| </h3> | |
| <ul role="list" className="mt-4 space-y-2"> | |
| {section.items.map(item => ( | |
| <li key={item.name}> | |
| <Link | |
| prefetch={false} | |
| href={createSearchUrl(item.query)} | |
| className="text-sm leading-6 text-gray-600 hover:text-gray-900 line-clamp-1" | |
| > | |
| {item.name} | |
| </Link> | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| ))} | |
| </div> | |
| <div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-16"> | |
| <h3 className="text-sm font-semibold leading-6 text-gray-900 mb-4"> | |
| Popular Job Skills | |
| </h3> | |
| <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"> | |
| {skills?.skills.slice(0, 100).map(skill => ( | |
| <li | |
| key={skill.id} | |
| className="text-sm leading-6 text-gray-600 hover:text-gray-900 line-clamp-1" | |
| > | |
| <Link | |
| prefetch={false} | |
| href={`/skills/${skill.slug}`} | |
| > | |
| {skill.name} | |
| </Link> | |
| <Link | |
| prefetch={false} | |
| href={createSearchUrl({ | |
| skills: [skill.slug] | |
| })} | |
| > | |
| {` (${skill.jobSkillsCount} jobs)`} | |
| </Link> | |
| </li> | |
| ))} | |
| </div> | |
| </div> | |
| <div className="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-16 flex justify-between"> | |
| <p className="text-xs leading-5 text-gray-500"> | |
| © {dayjs().year()} {process.env.WEBSITE_NAME} All | |
| rights reserved. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| ) | |
| } | |
| export default Footer |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment