Festival

components/tabs/Comments.tsx → app/[locale]/[id]/_components/Comments.tsx

@@ -5,12 +5,11 @@ import { useFormatter } from "next-intl";
 import React from "react";
 
 import type { Highline } from "@/app/actions/getHighline";
+import LoadingSkeleton from "@/components/Ranking/LoadingSkeleton";
+import { UsernameLink } from "@/components/Ranking/UsernameLink";
+import SeeMore from "@/components/SeeMore";
 import useSupabaseBrowser from "@/utils/supabase/client";
 
-import LoadingSkeleton from "./Ranking/LoadingSkeleton";
-import { UsernameLink } from "./Ranking/UsernameLink";
-import SeeMore from "./SeeMore";
-
 interface Props {
   highline: Highline;
 }
@@ -52,8 +51,20 @@ function Comments({ highline }: Props) {
   });
 
   if (isLoading) {
-    // TODO: Create a different loading skeleton for comment section
-    return <LoadingSkeleton />;
+    return (
+      <div className="mt-2 animate-pulse space-y-6">
+        {[...Array(5)].map((_, index) => (
+          <div key={index} className="flex flex-col space-y-2">
+            <div className="flex items-start space-x-2">
+              <div className="h-4 w-32 rounded-md bg-gray-200 dark:bg-gray-700"></div>
+              <div className="h-2 w-16 rounded-sm bg-gray-200 dark:bg-gray-700"></div>
+            </div>
+            <div className="h-4 w-full max-w-xs rounded-md bg-gray-200 dark:bg-gray-700"></div>
+            <div className="h-4 w-full max-w-sm rounded-md bg-gray-200 dark:bg-gray-700"></div>
+          </div>
+        ))}
+      </div>
+    );
   }
 
   if (isError) {
@@ -79,7 +90,6 @@ function Comments({ highline }: Props) {
             <div className="space-y-1">
               <div className="flex items-center space-x-2">
                 <UsernameLink username={comment.instagram} />
-                {/* <h4 className="text-sm font-semibold">{comment.instagram}</h4> */}
                 <span className="text-xs text-muted-foreground">
                   {format.relativeTime(new Date(comment.created_at))}
                 </span>

app/[locale]/[id]/_components/HighlineCard.tsx

@@ -1,9 +1,9 @@
 import { Highline } from "@/app/actions/getHighline";
 import HighlineImage from "@/components/HighlineImage";
-import Tabs from "@/components/tabs/Tabs";
 import { Card, CardContent } from "@/components/ui/card";
 
 import { FavoriteHighline } from "../../_components/FavoriteHighline";
+import { HighlineTabs } from "./highline-tabs";
 import { HighlineHeader } from "./HighlineHeader";
 
 function HighlineCard({ highline }: { highline: Highline }) {
@@ -15,7 +15,7 @@ function HighlineCard({ highline }: { highline: Highline }) {
       </div>
       <HighlineHeader highline={highline} />
       <CardContent>
-        <Tabs highline={highline} />
+        <HighlineTabs highline={highline} />
       </CardContent>
     </Card>
   );

components/tabs/Tabs.tsx → app/[locale]/[id]/_components/highline-tabs.tsx

@@ -6,18 +6,18 @@ import { useTranslations } from "next-intl";
 import { useMemo } from "react";
 
 import type { Highline } from "@/app/actions/getHighline";
+import { Ranking } from "@/components/Ranking";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useQueryString } from "@/hooks/useQueryString";
 
 import Comments from "./Comments";
 import Info from "./Info";
-import Ranking from "./Ranking";
 
 interface Props {
   highline: Highline;
 }
 
-function HighlineTabs({ highline }: Props) {
+export const HighlineTabs = ({ highline }: Props) => {
   const t = useTranslations("highline.tabs");
   const searchParams = useSearchParams();
   const { replaceQueryParam } = useQueryString();
@@ -39,7 +39,7 @@ function HighlineTabs({ highline }: Props) {
       {
         id: "ranking",
         label: "Ranking",
-        content: <Ranking highline={highline} />,
+        content: <Ranking highlines_ids={[highline.id]} />,
       },
     ],
     [t, highline]
@@ -82,6 +82,4 @@ function HighlineTabs({ highline }: Props) {
       </Tabs>
     </>
   );
-}
-
-export default HighlineTabs;
+};

app/[locale]/[id]/page.tsx

@@ -2,7 +2,6 @@ import { notFound } from "next/navigation";
 import { cache } from "react";
 
 import { getHighline } from "@/app/actions/getHighline";
-import CreateHighline from "@/components/CreateHighline";
 
 import HighlineCard from "./_components/HighlineCard";
 
@@ -15,7 +14,7 @@ type Props = {
 
 const getHigh = cache(async ({ id }: { id: string }) => {
   const result = await getHighline({
-    id,
+    id: [id],
   });
   return result.data;
 });

app/[locale]/_components/Highline.tsx

@@ -2,7 +2,7 @@ import { ArrowRightIcon } from "@radix-ui/react-icons";
 import { UnfoldHorizontalIcon, UnfoldVerticalIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 
-import { Highline } from "@/app/actions/getHighline";
+import type { Highline } from "@/app/actions/getHighline";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -11,21 +11,27 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 import { Link } from "@/navigation";
-import type { Functions } from "@/utils/supabase/database.types";
 
 import HighlineImage from "../../../components/HighlineImage";
 import { FavoriteHighline } from "./FavoriteHighline";
 
 interface Props {
   highline: Highline;
+  classname?: string;
 }
 
-export function Highline({ highline }: Props) {
+export function Highline({ highline, classname }: Props) {
   const t = useTranslations("home");
 
   return (
-    <Card className="flex w-full max-w-[24rem] flex-col overflow-hidden">
+    <Card
+      className={cn(
+        "flex w-full max-w-[22rem] flex-col overflow-hidden",
+        classname
+      )}
+    >
       <div className="relative h-48 w-full">
         <HighlineImage coverImageId={highline.cover_image} />
         <FavoriteHighline id={highline.id} isFavorite={highline.is_favorite} />

app/[locale]/_components/hero-promo-card.tsx

@@ -0,0 +1,33 @@
+import Image from "next/image";
+import React from "react";
+
+import { BorderBeam } from "@/components/ui/border-beam";
+import { Link } from "@/navigation";
+import { useTranslations } from "next-intl";
+
+export const HeroPromoCard = () => {
+  const t = useTranslations("festival");
+
+  return (
+    <Link
+      href="/festival"
+      className="relative flex h-52 w-full cursor-pointer items-end overflow-hidden rounded-md shadow-md sm:h-96 sm:rounded-2xl"
+    >
+      <Image
+        className="absolute z-0"
+        src="/cardBanner.JPG"
+        alt="Person walking on a Highline"
+        layout="fill"
+        objectFit="cover"
+        objectPosition="center"
+      />
+      <BorderBeam className="z-50" duration={10} />
+      <div className="relative w-full bg-gradient-to-t from-neutral-700 from-20% to-transparent p-2 pt-4 text-white sm:p-4 sm:pt-8">
+        <p className="text-2xl font-bold sm:text-4xl">
+          Festival Chooselife 2024
+        </p>
+        <p className="text-sm sm:text-base">{t("cardSubTitle")}</p>
+      </div>
+    </Link>
+  );
+};

app/[locale]/festival/_components/festival-tabs.tsx

@@ -0,0 +1,56 @@
+import { cookies } from "next/headers";
+import React from "react";
+
+import { getHighline } from "@/app/actions/getHighline";
+import { Ranking } from "@/components/Ranking";
+import { TabsContent } from "@/components/ui/tabs";
+import { useSupabaseServer } from "@/utils/supabase/server";
+
+import { Highline } from "../../_components/Highline";
+
+export const FestivalTabs = async () => {
+  const cookieStore = cookies();
+  const supabase = useSupabaseServer(cookieStore);
+
+  const { data: sectors } = await supabase
+    .from("sector")
+    .select("*, highline(id)");
+
+  const highline_ids = sectors?.flatMap((sector) =>
+    sector.highline.map((high) => high.id)
+  );
+
+  const { data: highlines } = await getHighline({
+    id: sectors?.flatMap((sector) => sector.highline.map((high) => high.id)),
+  });
+
+  return (
+    <>
+      <TabsContent className="mt-4" value="ranking">
+        <Ranking
+          highlines_ids={highline_ids || []}
+          visibleCategories={["cadenas", "distance", "fullLine"]}
+        />
+      </TabsContent>
+      <TabsContent className="mt-4" value="highlines">
+        {sectors?.map((sector) => (
+          <section key={sector.id}>
+            <h2 className="mt-4 text-2xl font-bold">{sector.name}</h2>
+            <div className="flex gap-8 overflow-x-auto">
+              {sector.highline.map((high) => {
+                const highline = highlines?.find((h) => h.id === high.id);
+                return highline ? (
+                  <Highline
+                    key={highline.id}
+                    highline={highline}
+                    classname="flex-grow-0 flex-shrink-0 flex max-w-[18rem]"
+                  />
+                ) : null;
+              })}
+            </div>
+          </section>
+        ))}
+      </TabsContent>
+    </>
+  );
+};

app/[locale]/festival/_components/timeline.tsx

@@ -0,0 +1,118 @@
+import { ClockIcon } from "lucide-react";
+import React from "react";
+
+export const timeline = () => {};
+
+// import { AvatarImage, AvatarFallback, Avatar } from "@/components/ui/avatar"
+
+export const Timeline = () => {
+  return (
+    <div className="mx-auto w-full max-w-4xl p-6 sm:p-10">
+      <div className="relative grid gap-10 pl-6 after:absolute after:inset-y-0 after:left-0 after:w-px after:bg-gray-500/20 dark:after:bg-gray-400/20">
+        <div className="relative grid gap-1 text-sm">
+          <div className="absolute left-0 top-1 z-10 aspect-square w-3 translate-x-[-29.5px] rounded-full bg-gray-900 dark:bg-gray-50" />
+          <div className="flex items-center justify-between">
+            <div className="font-medium">Ínicio de festival</div>
+            <div className="inline-flex items-center rounded-md bg-green-500 px-2 py-0.5 text-xs font-semibold text-gray-50 shadow transition-colors hover:bg-green-500/80 focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-offset-2 dark:border-gray-800 dark:bg-green-500 dark:text-gray-50 dark:hover:bg-green-500/80 dark:focus:ring-green-300">
+              <ClockIcon className="mr-1 h-3 w-3" />
+              9:00 AM
+            </div>
+          </div>
+          <div className="text-gray-500 dark:text-gray-400">
+            Abertura oficila das vias de Highline
+          </div>
+        </div>
+        <div className="relative grid gap-1 text-sm">
+          <div className="absolute left-0 top-1 z-10 aspect-square w-3 translate-x-[-29.5px] rounded-full bg-gray-900 dark:bg-gray-50" />
+          <div className="flex items-center justify-between">
+            <div className="font-medium">Oficina de resgate</div>
+            <div className="inline-flex items-center rounded-md bg-green-500 px-2 py-0.5 text-xs font-semibold text-gray-50 shadow transition-colors hover:bg-green-500/80 focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-offset-2 dark:border-gray-800 dark:bg-green-500 dark:text-gray-50 dark:hover:bg-green-500/80 dark:focus:ring-green-300">
+              <ClockIcon className="mr-1 h-3 w-3" />
+              11:00 AM
+            </div>
+          </div>
+          <div className="text-gray-500 dark:text-gray-400">
+            Ministrada por ..., você vai aprender tudo sobre resgate
+          </div>
+          <div className="flex items-center space-x-2">
+            {/* <img
+              alt="Sponsor Logo"
+              className="rounded-full bg-gray-600"
+              height="40"
+              src="/placeholder.svg"
+              style={{
+                aspectRatio: "40/40",
+                objectFit: "cover",
+              }}
+              width="40"
+            /> */}
+            <div>
+              <div className="font-medium">Pessoa XXX</div>
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                Highliner
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="relative grid gap-1 text-sm">
+          <div className="absolute left-0 top-1 z-10 aspect-square w-3 translate-x-[-29.5px] rounded-full bg-gray-900 dark:bg-gray-50" />
+          <div className="flex items-center justify-between">
+            <div className="font-medium">Panel Discussion</div>
+            <div className="inline-flex items-center rounded-md bg-green-500 px-2 py-0.5 text-xs font-semibold text-gray-50 shadow transition-colors hover:bg-green-500/80 focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-offset-2 dark:border-gray-800 dark:bg-green-500 dark:text-gray-50 dark:hover:bg-green-500/80 dark:focus:ring-green-300">
+              <ClockIcon className="mr-1 h-3 w-3" />
+              2:00 PM
+            </div>
+          </div>
+          <div className="text-gray-500 dark:text-gray-400">
+            Join our panel of experts for an insightful discussion on the future
+            of the industry.
+          </div>
+          <div className="flex items-center space-x-2">
+            {/* <Avatar>
+              <AvatarImage alt="Jane Smith" src="/placeholder-avatar.jpg" />
+              <AvatarFallback>JS</AvatarFallback>
+            </Avatar> */}
+            <div>
+              <div className="font-medium">Jane Smith</div>
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                Industry Analyst
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="relative grid gap-1 text-sm">
+          <div className="absolute left-0 top-1 z-10 aspect-square w-3 translate-x-[-29.5px] rounded-full bg-gray-900 dark:bg-gray-50" />
+          <div className="flex items-center justify-between">
+            <div className="font-medium">Networking Reception</div>
+            <div className="inline-flex items-center rounded-md bg-green-500 px-2 py-0.5 text-xs font-semibold text-gray-50 shadow transition-colors hover:bg-green-500/80 focus:outline-none focus:ring-2 focus:ring-green-700 focus:ring-offset-2 dark:border-gray-800 dark:bg-green-500 dark:text-gray-50 dark:hover:bg-green-500/80 dark:focus:ring-green-300">
+              <ClockIcon className="mr-1 h-3 w-3" />
+              5:00 PM
+            </div>
+          </div>
+          <div className="text-gray-500 dark:text-gray-400">
+            Join us for drinks and hors oeuvres to network with other attendees.
+          </div>
+          <div className="flex items-center space-x-2">
+            {/* <img
+              alt="Sponsor Logo"
+              className="rounded-lg"
+              height="40"
+              src="/placeholder.svg"
+              style={{
+                aspectRatio: "40/40",
+                objectFit: "cover",
+              }}
+              width="40"
+            /> */}
+            <div>
+              <div className="font-medium">Globex Corporation</div>
+              <div className="text-sm text-gray-500 dark:text-gray-400">
+                Gold Sponsor
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};