Feat/team page fixes

package.json

@@ -34,7 +34,8 @@
     "shadcn-ui": "^0.8.0",
     "styled-components": "6",
     "tailwind-merge": "^2.4.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "yet-another-react-lightbox": "^3.21.7"
   },
   "devDependencies": {
     "@types/node": "^20",

schemaTypes/teamType.ts

@@ -22,6 +22,12 @@ export const teamType = defineType({
       },
       description: "Ez lesz a csapat oldal URL-je.",
     },
+    {
+      name: "images",
+      title: "Képek",
+      type: "array",
+      of: [{ type: "image" }],
+    },
     {
       name: "color",
       title: "Szín",
@@ -47,6 +53,12 @@ export const teamType = defineType({
         "Ez fog megjelenni a főoldalon, a megfelelő megjelenítés érdekében a 9:16-os képarány ajánlott.",
       validation: (rule) => rule.required(),
     },
+    {
+      name: "background",
+      title: "Háttér",
+      type: "image",
+      description: "Ez fog megjelenni a csapat oldalon háttérként, ha van",
+    },
     {
       name: "description",
       title: "Leírás",

src/app/(with-layout)/teams/[slug]/page.tsx

@@ -7,6 +7,8 @@ import Image from "next/image";
 import { urlForImage } from "@/lib/sanity.image";
 import LinkCard from "@/components/teams/LinkCard";
 import RaceCarousel from "@/components/teams/RaceCarousel";
+import { useState } from "react";
+import Gallery from "@/components/teams/Gallery";
 
 export default async function TeamPage({
   params,
@@ -17,36 +19,51 @@ export default async function TeamPage({
   const team = await getTeam(client, params.slug);
   if (!team) return notFound();
   return (
-    <main className="flex flex-col flex-1">
-      <div className="p-4 px-10 lg:px-40 flex-1">
-        <div className="flex flex-row items-center justify-center gap-4">
-          <Image
-            src={(team.logo ? urlForImage(team.logo)?.url() : "") ?? ""}
-            alt={""}
-            className="object-cover"
-            height={100}
-            width={100}
-          />
-          <h1 className="text-3xl font-bold">{team.name}</h1>
+    <main
+      className="flex flex-col flex-1 items-center relative bg-cover"
+      style={
+        team.background && {
+          background: `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(${urlForImage(team.images[0])?.url()})`,
+          backgroundSize: "cover",
+          color: "white",
+        }
+      }
+    >
+      <div className="p-4 px-10 flex flex-row w-full  gap-10 h-full">
+        <div className="flex flex-col w-fit p-8 min-h-[50dvh]">
+          <div className=" flex-1 flex flex-col items-center justify-center  gap-4">
+            <Image
+              src={(team.logo ? urlForImage(team.logo)?.url() : "") ?? ""}
+              alt={""}
+              className="object-cover"
+              height={150}
+              width={150}
+            />
+            <h1 className="text-5xl italic text-center w-fit">{team.name}</h1>
+            <div className="flex flex-row flex-wrap justify-center gap-4 py-4 w-full">
+              {team.Links &&
+                team.Links.map((link) => (
+                  <LinkCard key={link._key} link={link} color={team.color} />
+                ))}
+            </div>
+          </div>
+          <Gallery team={team}></Gallery>
         </div>
-        <div className="flex flex-row flex-wrap justify-center gap-4 p-4">
-          {team.Links &&
-            team.Links.map((link) => (
-              <LinkCard key={link._key} link={link} color={team.color} />
-            ))}
+        <div className="flex flex-col w-2/3 justify-center">
+          <div className="max-h-[40dvh] overflow-y-scroll">
+            <PortableText
+              value={team.description}
+              components={teamDescriptionSerializer}
+            />
+          </div>
         </div>
-
-        <PortableText
-          value={team.description}
-          components={teamDescriptionSerializer}
-        />
+        {team.races && (
+          <div className="p-4 text-center">
+            <h2 className="text-2xl font-bold mb-4">Versenyek</h2>
+            <RaceCarousel races={team.races} />
+          </div>
+        )}
       </div>
-      {team.races && (
-        <div className="p-4 text-center">
-          <h2 className="text-2xl font-bold mb-4">Versenyek</h2>
-          <RaceCarousel races={team.races} />
-        </div>
-      )}
     </main>
   );
 }

src/components/news/NewsCard.tsx

@@ -3,22 +3,14 @@ import Link from "next/link";
 import Image from "next/image";
 import { urlForImage } from "@/lib/sanity.image";
 import { Card } from "../ui/card";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
 import { NewsModal } from "./NewsModal";
 
 export default function NewsCard({ news }: { news: News }) {
   return (
     <Dialog>
       <DialogTrigger>
-        <Card className="relative flex flex-row items-center justify-center bg-white max-w-xl h-[200px] overflow-hidden border-2">
+        <Card className="relative flex flex-row items-center justify-center bg-white max-w-xl lg:h-[200px] h-[300px] overflow-hidden border-2">
           <Image
             src={
               news.thumbnail

src/components/next-js-image.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+import {
+  isImageFitCover,
+  isImageSlide,
+  RenderSlideProps,
+  SlideImage,
+  useLightboxProps,
+} from 'yet-another-react-lightbox';
+
+function isNextJsImage(slide: SlideImage) {
+  return isImageSlide(slide) && typeof slide.width === 'number' && typeof slide.height === 'number';
+}
+
+export default function NextJsImage({ slide, rect }: RenderSlideProps<SlideImage>) {
+  const { imageFit } = useLightboxProps().carousel;
+  const cover = isImageSlide(slide) && isImageFitCover(slide, imageFit);
+
+  if (!isNextJsImage(slide)) return undefined;
+
+  const width = !cover
+    ? Math.round(Math.min(rect.width, (rect.height / (slide?.height || 1)) * (slide?.width || 1)))
+    : rect.width;
+
+  const height = !cover
+    ? Math.round(Math.min(rect.height, (rect.width / (slide?.width || 1)) * (slide?.height || 1)))
+    : rect.height;
+
+  return (
+    <div style={{ position: 'relative', width, height }}>
+      <Image
+        fill
+        alt=''
+        src={slide.src}
+        loading='eager'
+        draggable={false}
+        style={{ objectFit: cover ? 'cover' : 'contain' }}
+        sizes={`${Math.ceil((width / window.innerWidth) * 100)}vw`}
+      />
+    </div>
+  );
+}

src/components/teams/Gallery.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/captions.css";
+
+import { urlForImage } from "@/lib/sanity.image";
+import { Team } from "@/lib/sanity.types";
+import Lightbox from "yet-another-react-lightbox";
+import { useState } from "react";
+import { Images } from "lucide-react";
+import NextJsImage from "../next-js-image";
+import { Button } from "../ui/button";
+import Image from "next/image";
+export default function Gallery({ team }: { team: Team }) {
+  const [openGallery, setOpenGallery] = useState(false);
+  if (!team.images || team.images.length === 0) return null;
+  return (
+    <>
+      <button
+        className="flex flex-col cursor-pointer justify-center items-center gap-4 float-end rounded-md relative mt-auto"
+        onClick={() => setOpenGallery(true)}
+      >
+        <Image
+          src={urlForImage(team.images[0])?.url() || ""}
+          alt="Gallery"
+          width={500}
+          height={500}
+          className="rounded-md"
+        />
+        <h3 className="absolute top-2 left-2 bold bg-[#263238] p-4 text-white rounded-md">
+          Galéria
+        </h3>
+      </button>
+      <Lightbox
+        open={openGallery}
+        close={() => setOpenGallery(false)}
+        slides={team.images.map((i) => ({
+          src: urlForImage(i)?.url() || "",
+        }))}
+        render={{ slide: NextJsImage }}
+      />
+    </>
+  );
+}

src/components/teams/LinkCard.tsx

@@ -23,7 +23,7 @@ export default function LinkCard({
         <TooltipTrigger>
           <Link href={link.url} target="_blank">
             <Card
-              className="cursor-pointer flex items-center justify-center p-4 text-white"
+              className="cursor-pointer flex items-center justify-center p-4 text-white border-none"
               style={{ backgroundColor: color.hex }}
             >
               {getLinkIcon(link.url)}

src/components/teams/RaceCarousel.tsx

@@ -12,17 +12,21 @@ import React from "react";
 
 export default function RaceCarousel({ races }: { races: RaceResult[] }) {
   return (
-    <div className="flex flex-row justify-center">
-      <Carousel>
+    <div className="w-full flex justify-center mt-8">
+      <Carousel orientation="vertical">
         <CarouselContent>
           {races.map((race) => (
-            <CarouselItem className="basis-1/3" key={race._id}>
+            <CarouselItem key={race._id}>
               <RaceResultCard race={race} />
             </CarouselItem>
           ))}
         </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
+        {races.length > 3 && (
+          <>
+            <CarouselPrevious />
+            <CarouselNext />
+          </>
+        )}
       </Carousel>
     </div>
   );

src/components/teams/RaceResultCard.tsx

@@ -17,7 +17,7 @@ export default function RaceResultCard({ race }: { race: RaceResult }) {
   return (
     <Dialog>
       <DialogTrigger>
-        <Card className="relative h-[400px] flex flex-col p-6 gap-2 justify-between">
+        <Card className="relative flex flex-col p-6 gap-2 justify-between">
           <InfoIcon className="absolute top-2 right-2 text-gray-600"></InfoIcon>
           <div className="grid grid-cols-3 grid-rows-1 items-end justify-end">
             <div className="col-span-2 text-start">
@@ -49,7 +49,7 @@ export default function RaceResultCard({ race }: { race: RaceResult }) {
                   : ""
               }
               alt={race.title}
-              className="object-cover h-[250px] w-[230px]"
+              className="object-cover  w-[230px] h-auto"
               height={300}
               width={200}
             />

src/lib/sanity.types.ts

@@ -11,9 +11,11 @@ export interface Team {
   slug: Slug;
   thumbnail: ImageAsset;
   description: PortableTextBlock[];
+  background: ImageAsset;
   logo: ImageAsset;
   Links: LinkType[];
   races: RaceResult[];
+  images: ImageAsset[];
   color: SanityColor;
 }
 export interface News {

yarn.lock

@@ -9222,6 +9222,11 @@ yauzl@^2.4.2:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yet-another-react-lightbox@^3.21.7:
+  version "3.21.7"
+  resolved "https://registry.yarnpkg.com/yet-another-react-lightbox/-/yet-another-react-lightbox-3.21.7.tgz#02c625c65ecf2d415304b027291bbd5a5b3f4ba9"
+  integrity sha512-dcdokNuCIl92f0Vl+uzeKULnQhztIGpoZFUMvtVNUPmtwsQWpqWufeieDPeg9JtFyVCcbj4vYw3V00DS0QNoWA==
+
 yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"