minor improvments

app/(app)/events/_components/CalendarSection.tsx

@@ -124,7 +124,7 @@ function CalendarIconOpacity({ date }: { date: Date }) {
     };
   }, []);
   return (
-    <div className={cn(top && "opacity-50")}>
+    <div className={cn(top && "opacity-80")}>
       <CalendarIcon date={date} />
       <div ref={ref}></div>
     </div>

app/(app)/events/page.tsx

@@ -26,7 +26,12 @@ export default function Page() {
   }
 
   return (
-    <div className="relative flex-col px-5 pt-5 sm:pt-7">
+    <div className="relative flex-col space-y-6 px-5 pt-5 sm:pt-7">
+      <div className="flex items-center justify-between px-0 sm:px-5">
+        <h2 className="font-condensed text-2xl font-bold sm:text-3xl">
+          Upcoming Events
+        </h2>
+      </div>
       <div className="mx-auto max-w-[900px] space-y-4">
         {eventsByDay.map((e) => (
           <CalendarSection events={e} />
@@ -51,8 +56,7 @@ function groupEventsByDay(events: NDKEvent[]) {
     }
   }
   const groupedArray = Object.entries(eventDays)
-    .sort(([aKey], [bKey, test]) => {
+    .sort(([aKey], [bKey]) => {
-      console.log("test", test);
       const aDay = parseInt(aKey);
 
       const bDay = parseInt(bKey);
@@ -64,7 +68,5 @@ function groupEventsByDay(events: NDKEvent[]) {
       return 0;
     })
     .map(([_, events]) => events);
-  console.log("object", eventDays);
-  console.log("returing", groupedArray);
   return groupedArray;
 }

app/(app)/explore/_sections/ExploreCreators.tsx

@@ -15,7 +15,7 @@ export default function ExploreCreators() {
     <section className="relative -mx-5 space-y-4 overflow-x-hidden sm:space-y-6">
       <div className="flex items-center justify-between px-5 max-sm:pr-3">
         <h2 className="font-condensed text-2xl font-bold sm:text-3xl">
-          Explore Creators
+          Explore Calendars
         </h2>
         <Button variant={"ghost"}>
           View all <RiArrowRightLine className="ml-1 h-4 w-4" />

components/Cards/CalendarEvent/LargeFeedCard.tsx

@@ -15,6 +15,7 @@ import AvatarStack from "@/components/ProfileContainers/AvatarStack";
 import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { getTagValues, getTagAllValues } from "@/lib/nostr/utils";
 import { HiOutlineMapPin, HiOutlineUserCircle } from "react-icons/hi2";
+import { RxClock, RxCalendar } from "react-icons/rx";
 import { Skeleton } from "@/components/ui/skeleton";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 
@@ -25,7 +26,15 @@ type LargeFeedCardProps = {
 export default function LargeFeedCard({ event }: LargeFeedCardProps) {
   const { tags, pubkey, content } = event;
   const image = getTagValues("image", tags);
+  const location =
+    getTagValues("location", tags) ?? getTagValues("address", tags);
   const users = getTagAllValues("p", tags);
+  const startDate = getTagValues("start", tags)
+    ? new Date(parseInt(getTagValues("start", tags) as string) * 1000)
+    : null;
+  const endDate = getTagValues("end", tags)
+    ? new Date(parseInt(getTagValues("end", tags) as string) * 1000)
+    : null;
 
   return (
     <Card className="relative flex justify-between gap-x-4 rounded-[1rem] bg-muted p-[0.5rem]">
@@ -45,8 +54,8 @@ export default function LargeFeedCard({ event }: LargeFeedCardProps) {
         </div>
         <div className="flex items-center gap-x-4 pl-2">
           {!!users.length && (
-            <div className="flex shrink-0 items-center gap-x-2">
+            <div className="flex shrink-0 items-center gap-x-1.5">
-              <HiOutlineUserCircle className="h-5 w-5 text-primary" />
+              <HiOutlineUserCircle className="h-4 w-4 text-primary" />
               <AvatarStack
                 pubkeys={users.slice(0, 4)}
                 className="z-0 h-6 w-6 text-[9px]"
@@ -54,13 +63,28 @@ export default function LargeFeedCard({ event }: LargeFeedCardProps) {
               />
             </div>
           )}
-          <div className="flex items-center gap-x-2">
+          {!!startDate && (
-            <HiOutlineMapPin className="h-5 w-5 shrink-0 text-primary" />
+            <div className="center shrink-0 gap-x-1.5">
-            <p className="line-clamp-1 text-xs text-muted-foreground">
+              <RxClock className="h-4 w-4 text-primary" />
-              124 Main street, first ave, NY NY, 118034. Across the street from
+              <p className="line-clamp-1 text-xs text-muted-foreground">
-              too long
+                <span>{formatDate(startDate, "h:mm a")}</span>
-            </p>
+                {!!endDate && (
-          </div>
+                  <>
+                    {" "}
+                    <span>-</span> <span>{formatDate(endDate, "h:mm a")}</span>
+                  </>
+                )}
+              </p>
+            </div>
+          )}
+          {!!location && (
+            <div className="flex items-center gap-x-1.5">
+              <HiOutlineMapPin className="h-4 w-4 shrink-0 text-primary" />
+              <p className="line-clamp-1 text-xs text-muted-foreground">
+                {location}
+              </p>
+            </div>
+          )}
         </div>
         <div className="flex w-full flex-col justify-end self-start pl-2 pt-2">
           <div className="flex w-3/4 items-center justify-stretch gap-3">