add socials to calendar

Author: lassejaco

lib/assets/icons/instagram.svg

@@ -58,6 +58,17 @@ export const atprotoToCalendarFormat = (event: any) => {
 
   const manualOverrides = {} as any;
 
+  if (event.id === 29) {
+    // 29 = ETH DAY
+    // 23 = COWORKING
+    // manualOverrides.spanRows = 5;
+    console.log(event, "event");
+    console.log("manual override for coworking");
+    // event.spanRows = 3;
+  }
+
+  const socials = event.socials || {};
+
   return {
     id: event.id,
     name: event.title,
@@ -72,6 +83,9 @@ export const atprotoToCalendarFormat = (event: any) => {
     imageUrl: event.image_url || "",
     showTimeOfDay: event.showTimeOfDay,
     ticketsAvailable: event.requires_ticket || false,
+    xHandle: socials.x_url || "",
+    instagramHandle: socials.instagram_url || "",
+    farcasterHandle: socials.farcaster_url || "",
     ...manualOverrides,
   };
 };

lib/assets/icons/x.svg

@@ -21,6 +21,9 @@ import ZupassConnection from "../zupass/zupass";
 import { eventShops } from "../zupass/event-shops-list";
 import VoxelButton from "lib/components/voxel-button/button";
 import { convert } from "html-to-text";
+import XIcon from "lib/assets/icons/x.svg";
+import FarcasterIcon from "lib/assets/icons/farcaster.svg";
+import InstagramIcon from "lib/assets/icons/instagram.svg";
 import { TicketTag } from "../calendar.components";
 
 type EventProps = {
@@ -253,19 +256,41 @@ const Event: React.FC<EventProps> = ({
 
               <div className="text-sm">{convert(event.description)}</div>
 
-              {event.eventLink !== "https://devconnect.org/calendar" && (
-                <Link href={event.eventLink} className="self-start">
-                  <VoxelButton
-                    color="blue-1"
-                    size="sm"
-                    fill
-                    className="shrink-0  mt-2 self-start"
-                  >
-                    Visit Site
-                    <ArrowUpRight className="w-4 h-4 mb-0.5" />
-                  </VoxelButton>
-                </Link>
-              )}
+              <div className="flex justify-between items-center gap-2">
+                {event.eventLink !== "https://devconnect.org/calendar" && (
+                  <Link href={event.eventLink} className="self-start">
+                    <VoxelButton
+                      color="blue-1"
+                      size="sm"
+                      fill
+                      className="shrink-0  mt-2 self-start"
+                    >
+                      Visit Site
+                      <ArrowUpRight className="w-4 h-4 mb-0.5" />
+                    </VoxelButton>
+                  </Link>
+                )}
+
+                <div className="flex gap-1 text-xl mt-2 mr-1">
+                  {event.xHandle && (
+                    <Link href={`${event.xHandle}`} className="p-1">
+                      <XIcon className="icon self-end" />
+                    </Link>
+                  )}
+
+                  {event.instagramHandle && (
+                    <Link href={`${event.instagramHandle}`} className="p-1">
+                      <InstagramIcon className="icon self-end" />
+                    </Link>
+                  )}
+
+                  {event.farcasterHandle && (
+                    <Link href={`${event.farcasterHandle}`} className="p-1">
+                      <FarcasterIcon className="icon self-end" />
+                    </Link>
+                  )}
+                </div>
+              </div>
 
               <Separator className="my-3" />
 

lib/components/event-schedule-new/atproto-to-calendar-format.tsx

@@ -32,4 +32,7 @@ export interface Event {
   imageUrl?: string;
   showTimeOfDay?: boolean;
   ticketsAvailable?: boolean;
+  xHandle?: string;
+  instagramHandle?: string;
+  farcasterHandle?: string;
 }