Update discord invite link, remove past meetings, meetings map (#67)

Dvadeset-Jedan · Apr 19, 2023 · 2bcc1ca · 2bcc1ca
1 parent dc1125f
commit 2bcc1ca
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 33 deletions.
diff --git a/components/header.tsx b/components/header.tsx
@@ -4,11 +4,11 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Dispatch, SetStateAction, useEffect } from "react";
 import { routes } from "../utils/routes";
-import { BarcodeHeaderIcon } from "./icons/barcode-header";
 import { BarsIcon } from "./icons/bars";
-import { TextLogoIcon } from "./icons/text-logo";
 import { DvadesetJedan } from "./icons/dvadesetjedan";
 import { XMarkIcon } from "./icons/x-mark";
+import { urls } from "../utils/urls";
+import { ArrowUpRight } from "./icons/arrow-up-right";
 
 function useLinks() {
   const router = useRouter();
@@ -26,8 +26,9 @@ function useLinks() {
     },
     {
       name: "Sastanci",
-      route: routes.meetups,
+      route: urls.meetup,
       active: router.asPath === routes.meetups,
+      Icon: <ArrowUpRight />,
     },
     {
       name: "Blog",
@@ -47,18 +48,18 @@ export function Header({
 
   return (
     <>
-      <div className="relative flex items-center justify-between w-full px-4 md:px-0 py-8 md:flex-row md:py-10 bg-dark max-w-7xl mx-auto">
+      <div className="relative flex items-center justify-between w-full px-4 py-8 mx-auto md:px-0 md:flex-row md:py-10 bg-dark max-w-7xl">
         <Link href={routes.home}>
           <a>
-            <div className="relative flex items-center md:ml-4 z-20">
+            <div className="relative z-20 flex items-center md:ml-4">
               <span className="sr-only">DvadesetJedan</span>
-              <DvadesetJedan className="w-60 md:w-96 mt-px ml-2" />
+              <DvadesetJedan className="mt-px ml-2 w-60 md:w-96" />
             </div>
           </a>
         </Link>
 
-        <ul className="hidden mt-8 mx-8 lg:flex md:mt-0">
-          {links.map(({ name, route, active }, index) => (
+        <ul className="hidden mx-8 mt-8 lg:flex md:mt-0">
+          {links.map(({ name, route, active, Icon }, index) => (
             <li
               key={name}
               className={classNames("font-medium text-right text-19 ", {
@@ -67,11 +68,15 @@ export function Header({
             >
               <Link href={route}>
                 <a
-                  className={classNames("hover:text-purple", {
+                  className={classNames("hover:text-purple whitespace-nowrap", {
                     "text-purple": active,
                   })}
+                  target={name === "Sastanci" ? "_blank" : undefined}
                 >
-                  {name}
+                  <div className="flex items-center">
+                    {name}
+                    <span className="mt-1 ml-2">{Icon}</span>
+                  </div>
                 </a>
               </Link>
             </li>
@@ -88,18 +93,25 @@ export function Header({
 
                 <Popover.Panel className="absolute z-10 w-full h-screen bg-dark/90 backdrop-blur-md z-5">
                   <ul className="flex flex-col mt-28 h-[60%] justify-evenly">
-                    {links.map(({ name, route, active }) => (
+                    {links.map(({ name, route, active, Icon }) => (
                       <li key={name} className="text-center">
                         <button
                           className={classNames("font-medium text-4xl hover:text-purple", {
                             "text-purple": active,
                           })}
                           onClick={() => {
-                            router.push(route);
+                            if (name === "Sastanci") {
+                              window.open(route, "_blank");
+                            } else {
+                              router.push(route);
+                            }
                             close();
                           }}
                         >
-                          {name}
+                          <div className="flex items-center">
+                            {name}
+                            <span className="mt-1 ml-2">{Icon}</span>
+                          </div>
                         </button>
                       </li>
                     ))}

diff --git a/components/icons/arrow-up-right.tsx b/components/icons/arrow-up-right.tsx
@@ -0,0 +1,18 @@
+export function ArrowUpRight() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="w-4 h-4"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"
+      />
+    </svg>
+  );
+}
diff --git a/components/meetups-section.tsx b/components/meetups-section.tsx
@@ -30,25 +30,25 @@ export function MeetupsSection({ events }: { events: EventType[] }) {
           </ActionLink>
         </div>
       </div>
-      <div className="px-4 mt-32 3xl:px-20">
-        <h3 className="mb-14 text-3xl md:text-[2.5rem] font-bold text-center">Nedavni Događaji</h3>
-        <div className="justify-between grid grid-cols-1 gap-y-10 sm:gap-20 sm:grid-cols-2 md:grid-cols-3">
-          {[...pastEvents].splice(0, 3).map((event) => (
-            <div key={new Date(event.date).toString()}>
-              <MeetupPreview
-                {...event}
-                imgSrc={`/${event.imgSrc}`}
-                date={format(new Date(event.date), "EEEE, MMMM dd, yyyy")}
-              />
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="flex justify-center w-full mt-14">
-        <ActionLink href="https://www.meetup.com/dvadeset-jedan/events/">
-          Pregledaj događaje
-        </ActionLink>
-      </div>
+      {/* <div className="px-4 mt-32 3xl:px-20"> */}
+      {/*   <h3 className="mb-14 text-3xl md:text-[2.5rem] font-bold text-center">Nedavni Događaji</h3> */}
+      {/*   <div className="justify-between grid grid-cols-1 gap-y-10 sm:gap-20 sm:grid-cols-2 md:grid-cols-3"> */}
+      {/*     {[...pastEvents].splice(0, 3).map((event) => ( */}
+      {/*       <div key={new Date(event.date).toString()}> */}
+      {/*         <MeetupPreview */}
+      {/*           {...event} */}
+      {/*           imgSrc={`/${event.imgSrc}`} */}
+      {/*           date={format(new Date(event.date), "EEEE, MMMM dd, yyyy")} */}
+      {/*         /> */}
+      {/*       </div> */}
+      {/*     ))} */}
+      {/*   </div> */}
+      {/* </div> */}
+      {/* <div className="flex justify-center w-full mt-14"> */}
+      {/*   <ActionLink href="https://www.meetup.com/dvadeset-jedan/events/"> */}
+      {/*     Pregledaj događaje */}
+      {/*   </ActionLink> */}
+      {/* </div> */}
     </section>
   );
 }
diff --git a/utils/urls.ts b/utils/urls.ts
@@ -1,7 +1,8 @@
 export const urls = {
-  discord: "https://discord.gg/HjmfXq5Z",
+  discord: "https://discord.com/invite/WSNA28kd",
   youtube: "https://www.youtube.com/channel/UCYXly5XM_SO07vLHh2yPlCw",
   spotify: "https://open.spotify.com/show/0K4Ak2oNQdCU3Tsr3Tajkx?si=34af43f494d3487b",
   github: "https://github.com/Dvadeset-Jedan",
   telegram: "https://t.me/dvadesetjedan21",
+  meetup: "https://www.meetup.com/dvadeset-jedan",
 } as const;