Skip to content

Commit

Permalink
fix swapi
Browse files Browse the repository at this point in the history
  • Loading branch information
YassinEldeeb committed Apr 2, 2024
1 parent 930f216 commit b0fafc1
Show file tree
Hide file tree
Showing 6 changed files with 179 additions and 17 deletions.
5 changes: 5 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,13 @@
"@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.0.18",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-portal": "^1.0.4",
"@radix-ui/react-radio-group": "^1.1.3",
"@splidejs/react-splide": "^0.7.12",
"@svgr/webpack": "^8.0.1",
"@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
"@tailwindcss/typography": "^0.5.10",
"@types/react-slick": "^0.23.13",
"autoprefixer": "^10.4.17",
"clsx": "^2.1.0",
"codemirror": "5.65.1",
Expand Down Expand Up @@ -50,8 +53,10 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-medium-image-zoom": "5.1.8",
"react-slick": "^0.30.2",
"server-only": "0.0.1",
"server-only-context": "^0.1.0",
"slick-carousel": "^1.8.1",
"string-similarity": "^4.0.4",
"string-strip-html": "^13.4.5",
"tailwindcss": "^3.4.1",
Expand Down
100 changes: 100 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 22 additions & 13 deletions src/app/conf/2023/gallery/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Metadata } from "next"
import { images } from "./_conf-images"
import { ImageCarousel } from "../../_components/imageCarousel"
import React from "react"
import NextImage from "next-image-export-optimizer"
import { Zoom } from "../../_components/zoom"

export const metadata: Metadata = {
title: "Gallery",
Expand All @@ -23,18 +24,25 @@ export default function GalleryPage() {

return (
<div className="bg-[#f4f6f8]">
<div className="container conf-block">
<div className="container conf-block gallery-page-images-list">
{currentImages.map((c, i) => {
function getCard(index: number) {
function getCard(index: number, { size }: { size: "small" | "big" }) {
const { width, height } =
size === "small"
? { width: 370, height: 208 }
: { width: 748, height: 420 }

return (
c[index] && (
<Zoom>
<div className="overflow-hidden rounded-md">
<NextImage
alt="Gallery"
className="object-cover aspect-video w-full hover:opacity-75 rounded-md"
alt={"gallery image"}
className="object-cover aspect-video w-full hover:opacity-75"
src={c[index]}
width={width}
height={height}
/>
</Zoom>
</div>
)
)
}
Expand All @@ -43,22 +51,23 @@ export default function GalleryPage() {
<div key={i} className="grid lg:grid-cols-2 gap-2 mb-2">
<div className="gap-2 flex flex-col">
<div className="grid grid-cols-2 gap-2">
{getCard(0)}
{getCard(1)}
{getCard(0, { size: "small" })}
{getCard(1, { size: "small" })}
</div>
{getCard(2)}
{getCard(2, { size: "big" })}
</div>
<div className="gap-2 flex flex-col">
{getCard(3)}
{getCard(3, { size: "big" })}
<div className="grid grid-cols-2 gap-2">
{getCard(4)}
{getCard(5)}
{getCard(4, { size: "small" })}
{getCard(5, { size: "small" })}
</div>
</div>
</div>
)
})}
</div>
<ImageCarousel index={0} images={images} />
</div>
)
}
47 changes: 47 additions & 0 deletions src/app/conf/_components/imageCarousel.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
"use client"
import "react-medium-image-zoom/dist/styles.css"

import NextImage from "next-image-export-optimizer"
import { StaticImageData } from "next/image"
import Slider from "react-slick"
import "slick-carousel/slick/slick.css"
import "slick-carousel/slick/slick-theme.css"
import { ComponentProps } from "react"

const settings: ComponentProps<typeof Slider> = {
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
initialSlide: 0,
adaptiveHeight: true,
}

interface Props {
images: StaticImageData[]
index: number
}
export const ImageCarousel = ({ images, index }: Props) => {
settings.initialSlide = index || 0
return (
<div className="z-[9999] fixed left-0 top-0 bg-[rgba(0,0,0,0.5)] h-screen w-screen flex justify-center">
<div className="w-screen max-w-[1504px]">
<Slider {...settings} className="rounded-2xl">
{images.map(image => (
<div className="w-max">
<div className="flex justify-center ">
<div className="max-w-max h-max flex justify-center w-full">
<img
key={image.src}
alt={"gallery image"}
className="h-full max-h-screen"
src={image.src}
/>
</div>
</div>
</div>
))}
</Slider>
</div>
</div>
)
}
4 changes: 0 additions & 4 deletions src/app/conf/_components/zoom.ts

This file was deleted.

5 changes: 5 additions & 0 deletions src/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -486,3 +486,8 @@ div[id^="headlessui-menu-items"] {
font-size: 13px;
padding: 7px 14px;
}

/* it means the image is still in loading state */
.gallery-page-images-list img[style*="background-image"] {
filter: blur(3.5px);
}

0 comments on commit b0fafc1

Please sign in to comment.