refactor: add all meetups to footer + spacing

rocket-connect · Nov 12, 2023 · 312111c · 312111c
1 parent 4b03109
commit 312111c
Show file tree

Hide file tree

Showing 2 changed files with 164 additions and 39 deletions.
diff --git a/client/src/components/events.tsx b/client/src/components/events.tsx
@@ -19,15 +19,15 @@ export function Events() {
  }, []);
 
  return (
- <div className="drop-shadow-lg w-full bg-white grow border-t-2 border-graphql-border p-4">
+ <div className="drop-shadow-lg w-full bg-white grow border-t-2 border-graphql-border p-20">
  <Container>
- <h2 className="text-3xl mb-5">Events</h2>
- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+ <h2 className="text-3xl mb-10 font-bold">Events</h2>
+ <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-20">
  {events.map((event) => (
  <a
  href={event.eventLink}
  key={event.slug}
- className="bg-white rounded-lg border border-graphql-border shadow-md overflow-hidden hover:border-2 hover:border-graphql-pink hover:cursor-pointer transition-colors duration-300"
+ className="bg-white rounded-lg border border-graphql-border shadow-md overflow-hidden hover:border hover:border-graphql-pink hover:cursor-pointer transition-colors duration-300"
  target="_blank"
  rel="noopener noreferrer"
  >

diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx
@@ -1,63 +1,188 @@
 import { Container } from "./container";
 
-const urlGroups = [
- [
- { href: "https://graphql.org/", text: "graphql.org" },
- { href: "https://graphql.org/foundation/", text: "graphql.org/foundation" },
- { href: "https://twitter.com/GraphQL", text: "twitter.com/GraphQL" },
- { href: "https://www.graphql-events.org/", text: "graphql-events.org" },
+const meetups = {
+ Europe: [
  {
- href: "https://github.com/rocket-connect/graphql-events",
- text: "Github",
+ href: "https://www.meetup.com/graphql-london/",
+ text: "GraphQL London",
  },
- ],
- [
  {
- href: "https://www.meetup.com/graphql-sf/",
- text: "meetup.com/graphql-sf",
+ href: "https://www.meetup.com/Amsterdam-GraphQL-Meetup/",
+ text: "GraphQL Amsterdam",
+ },
+ {
+ href: "https://www.meetup.com/graphql-berlin/",
+ text: "GraphQL Berlin",
+ },
+ {
+ href: "https://www.meetup.com/GraphQL-Barcelona/",
+ text: "GraphQL Barcelona",
+ },
+ {
+ href: "https://www.meetup.com/Budapest-GraphQL/",
+ text: "GraphQL Budapest",
+ },
+ {
+ href: "https://www.meetup.com/Copenhagen-GraphQL-Meetup-Group/",
+ text: "GraphQL Copenhagen",
+ },
+ {
+ href: "https://www.meetup.com/GraphQL-Milano/",
+ text: "GraphQL Milano",
+ },
+ {
+ href: "https://www.meetup.com/graphql-munich/",
+ text: "GraphQL Munich",
+ },
+ {
+ href: "https://www.meetup.com/fr-FR/parisgraphql/",
+ text: "GraphQL Paris",
+ },
+ {
+ href: "https://www.meetup.com/graphql-sarajevo/",
+ text: "GraphQL Sarajevo",
  },
+ {
+ href: "https://www.meetup.com/GraphQL-Stockholm/",
+ text: "GraphQL Stockholm",
+ },
+ {
+ href: "https://www.meetup.com/graphql-zurich/",
+ text: "GraphQL Zurich",
+ },
+ {
+ href: "https://www.meetup.com/GraphQL-Wroclaw/",
+ text: "GraphQL Wroclaw",
+ },
+ ],
+ Asia: [
  {
  href: "https://www.meetup.com/graphql-bangkok/",
- text: "meetup.com/graphql-bangkok",
+ text: "GraphQL Bangkok",
  },
  {
  href: "https://www.meetup.com/graphql-sg/",
- text: "meetup.com/graphql-sg",
+ text: "GraphQL Singapore",
+ },
+ {
+ href: "https://www.meetup.com/graphql-seoul/",
+ text: "GraphQL Seoul",
+ },
+ {
+ href: "https://www.facebook.com/groups/graphql.kr",
+ text: "GraphQL Korea",
+ },
+ {
+ href: "https://www.meetup.com/graphqlshenzhen/",
+ text: "GraphQL Shenzhen",
+ },
+ {
+ href: "https://www.meetup.com/GraphQLHongKong/",
+ text: "GraphQL Hongkong",
+ },
+ {
+ href: "https://www.meetup.com/graphql-bangalore/",
+ text: "GraphQL Bangalore",
  },
  {
- href: "https://guild.host/graphql-london/",
- text: "guild.host/graphql-london",
+ href: "https://www.meetup.com/GraphQL-Tokyo/",
+ text: "GraphQL Tokyo",
+ },
+ {
+ href: "https://www.meetup.com/GraphQL-TLV/",
+ text: "GraphQL Tel Aviv",
+ },
+ ],
+ "North America": [
+ {
+ href: "https://www.meetup.com/graphql-sf/",
+ text: "GraphQL San Francisco",
  },
  {
  href: "https://www.meetup.com/graphql-seattle",
- text: "meetup.com/graphql-seattle",
+ text: "GraphQL Seattle",
+ },
+ {
+ href: "https://www.meetup.com/graphql-boston/",
+ text: "GraphQL Boston",
+ },
+ {
+ href: "https://www.meetup.com/graphql-newyork/",
+ text: "GraphQL NYC",
+ },
+ {
+ href: "https://www.meetup.com/ATX-GraphQL/",
+ text: "GraphQL Austin",
+ },
+ {
+ href: "https://www.meetup.com/GraphQL-MN/",
+ text: "GraphQL Minneapolis",
+ },
+ {
+ href: "https://www.meetup.com/graphql-denver/",
+ text: "GraphQL Denver",
+ },
+ {
+ href: "https://www.meetup.com/graphql-chicago/",
+ text: "GraphQL Chicago",
  },
  ],
-];
+ "South America": [
+ {
+ href: "https://www.meetup.com/graphql-sp/",
+ text: "GraphQL São Paulo",
+ },
+ {
+ href: "https://www.meetup.com/GraphQL-BA/",
+ text: "GraphQL Buenos Aires",
+ },
+ ],
+ Australia: [
+ {
+ href: "http://graphql.melbourne/",
+ text: "GraphQL Melbourne",
+ },
+ {
+ href: "https://graphql.sydney/",
+ text: "GraphQL Sydney",
+ },
+ ],
+ Africa: [
+ {
+ href: "https://www.meetup.com/nairobi-graphql-meetup/",
+ text: "GraphQL Nairobi",
+ },
+ ],
+};
 
-const UrlList = ({ urls }) => (
- <ul className="marker:text-graphql-pink list-disc ml-6">
- {urls.map((link) => (
- <li key={link.href}>
- <a
- href={link.href}
- className="block p-1 hover:text-graphql-pink transition-colors duration-300"
- >
- {link.text}
- </a>
- </li>
- ))}
- </ul>
-);
+function UrlList({ continent, urls }) {
+ return (
+ <div className="w-full">
+ <h2 className="text-xl font-semibold text-left mb-4">{continent}</h2>
+ <ul className="marker:text-graphql-pink list-disc ml-6">
+ {urls.map((link) => (
+ <li key={link.href}>
+ <a
+ href={link.href}
+ className="block p-1 hover:text-graphql-pink transition-colors duration-300"
+ >
+ {link.text}
+ </a>
+ </li>
+ ))}
+ </ul>
+ </div>
+ );
+}
 
 export function Footer() {
  return (
  <div className="text-white bg-graphql-blue py-10 mt-auto">
  <Container>
  <div className="flex flex-col items-center justify-center gap-10">
- <div className="w-full flex flex-col sm:flex-row sm:justify-center gap-10">
- {urlGroups.map((urls, index) => (
- <UrlList key={index} urls={urls} />
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-10 w-full">
+ {Object.entries(meetups).map(([continent, urls], index) => (
+ <UrlList key={index} continent={continent} urls={urls} />
  ))}
  </div>
  <div className="w-full pt-5">