From 190fee7eb775e7f16e965f0c596522506ee6a437 Mon Sep 17 00:00:00 2001 From: YassinEldeeb Date: Thu, 28 Mar 2024 16:23:12 +0200 Subject: [PATCH] fix swapi --- package.json | 5 ++ pnpm-lock.yaml | 100 +++++++++++++++++++++ src/app/conf/2023/gallery/page.tsx | 35 +++++--- src/app/conf/_components/imageCarousel.tsx | 47 ++++++++++ src/app/conf/_components/zoom.ts | 4 - src/globals.css | 5 ++ 6 files changed, 179 insertions(+), 17 deletions(-) create mode 100644 src/app/conf/_components/imageCarousel.tsx delete mode 100644 src/app/conf/_components/zoom.ts diff --git a/package.json b/package.json index 47f7ec1b82..9205bd96b6 100644 --- a/package.json +++ b/package.json @@ -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", @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e0dc1faa78..da8ed25361 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -25,9 +25,15 @@ importers: '@radix-ui/react-icons': specifier: ^1.3.0 version: 1.3.0(react@18.2.0) + '@radix-ui/react-portal': + specifier: ^1.0.4 + version: 1.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) '@radix-ui/react-radio-group': specifier: ^1.1.3 version: 1.1.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@splidejs/react-splide': + specifier: ^0.7.12 + version: 0.7.12 '@svgr/webpack': specifier: ^8.0.1 version: 8.0.1(typescript@5.4.3) @@ -37,6 +43,9 @@ importers: '@tailwindcss/typography': specifier: ^0.5.10 version: 0.5.10(tailwindcss@3.4.1) + '@types/react-slick': + specifier: ^0.23.13 + version: 0.23.13 autoprefixer: specifier: ^10.4.17 version: 10.4.17(postcss@8.4.33) @@ -118,12 +127,18 @@ importers: react-medium-image-zoom: specifier: 5.1.8 version: 5.1.8(react-dom@18.2.0)(react@18.2.0) + react-slick: + specifier: ^0.30.2 + version: 0.30.2(react-dom@18.2.0)(react@18.2.0) server-only: specifier: 0.0.1 version: 0.0.1 server-only-context: specifier: ^0.1.0 version: 0.1.0(react@18.2.0) + slick-carousel: + specifier: ^1.8.1 + version: 1.8.1(jquery@3.7.1) string-similarity: specifier: ^4.0.4 version: 4.0.4 @@ -2787,6 +2802,26 @@ packages: react: 18.2.0 dev: false + /@radix-ui/react-portal@1.0.4(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.1 + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0) + '@types/react': 18.2.73 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-presence@1.0.1(@types/react@18.2.73)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} peerDependencies: @@ -2994,6 +3029,16 @@ packages: - typescript dev: false + /@splidejs/react-splide@0.7.12: + resolution: {integrity: sha512-UfXH+j47jsMc4x5HA/aOwuuHPqn6y9+ZTNYPWDRD8iLKvIVMZlzq2unjUEvyDAU+TTVPZOXkG2Ojeoz0P4AkZw==} + dependencies: + '@splidejs/splide': 4.1.4 + dev: false + + /@splidejs/splide@4.1.4: + resolution: {integrity: sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==} + dev: false + /@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.24.3): resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} engines: {node: '>=14'} @@ -3305,6 +3350,12 @@ packages: /@types/prop-types@15.7.12: resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} + /@types/react-slick@0.23.13: + resolution: {integrity: sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==} + dependencies: + '@types/react': 18.2.73 + dev: false + /@types/react@18.2.73: resolution: {integrity: sha512-XcGdod0Jjv84HOC7N5ziY3x+qL0AfmubvKOZ9hJjJ2yd5EE+KYjWhdOjt387e9HPheHkdggF9atTifMRtyAaRA==} dependencies: @@ -3820,6 +3871,10 @@ packages: engines: {node: '>=8'} dev: true + /classnames@2.5.1: + resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} + dev: false + /cli-progress@3.12.0: resolution: {integrity: sha512-tRkV3HJ1ASwm19THiiLIXLO7Im7wlTuKnvkYaTkyoAPefqjNg7W7DHKUlGRxy9vxDvbyCYQkQozvptuMkGCg8A==} engines: {node: '>=4'} @@ -4511,6 +4566,10 @@ packages: /emoji-regex@9.2.2: resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} + /enquire.js@2.1.6: + resolution: {integrity: sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==} + dev: false + /entities@4.5.0: resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} engines: {node: '>=0.12'} @@ -5608,6 +5667,10 @@ packages: resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==} hasBin: true + /jquery@3.7.1: + resolution: {integrity: sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==} + dev: false + /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} @@ -5655,6 +5718,12 @@ packages: resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} dev: true + /json2mq@0.2.0: + resolution: {integrity: sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==} + dependencies: + string-convert: 0.2.1 + dev: false + /json5@2.2.3: resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==} engines: {node: '>=6'} @@ -7473,6 +7542,21 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /react-slick@0.30.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==} + peerDependencies: + react: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + classnames: 2.5.1 + enquire.js: 2.1.6 + json2mq: 0.2.0 + lodash.debounce: 4.0.8 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + resize-observer-polyfill: 1.5.1 + dev: false + /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -7706,6 +7790,10 @@ packages: resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==} dev: true + /resize-observer-polyfill@1.5.1: + resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -7954,6 +8042,14 @@ packages: engines: {node: '>=14.16'} dev: false + /slick-carousel@1.8.1(jquery@3.7.1): + resolution: {integrity: sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==} + peerDependencies: + jquery: '>=1.8.0' + dependencies: + jquery: 3.7.1 + dev: false + /snake-case@3.0.4: resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==} dependencies: @@ -8003,6 +8099,10 @@ packages: engines: {node: '>=14.18.0'} dev: false + /string-convert@0.2.1: + resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==} + dev: false + /string-env-interpolation@1.0.1: resolution: {integrity: sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==} dev: true diff --git a/src/app/conf/2023/gallery/page.tsx b/src/app/conf/2023/gallery/page.tsx index d1656231c5..046463ef67 100644 --- a/src/app/conf/2023/gallery/page.tsx +++ b/src/app/conf/2023/gallery/page.tsx @@ -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", @@ -23,18 +24,25 @@ export default function GalleryPage() { return (
-
+
{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] && ( - +
- +
) ) } @@ -43,22 +51,23 @@ export default function GalleryPage() {
- {getCard(0)} - {getCard(1)} + {getCard(0, { size: "small" })} + {getCard(1, { size: "small" })}
- {getCard(2)} + {getCard(2, { size: "big" })}
- {getCard(3)} + {getCard(3, { size: "big" })}
- {getCard(4)} - {getCard(5)} + {getCard(4, { size: "small" })} + {getCard(5, { size: "small" })}
) })}
+
) } diff --git a/src/app/conf/_components/imageCarousel.tsx b/src/app/conf/_components/imageCarousel.tsx new file mode 100644 index 0000000000..ac9ba1ec94 --- /dev/null +++ b/src/app/conf/_components/imageCarousel.tsx @@ -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 = { + 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 ( +
+
+ + {images.map(image => ( +
+
+
+ {"gallery +
+
+
+ ))} + +
+
+ ) +} diff --git a/src/app/conf/_components/zoom.ts b/src/app/conf/_components/zoom.ts deleted file mode 100644 index 08c6697b44..0000000000 --- a/src/app/conf/_components/zoom.ts +++ /dev/null @@ -1,4 +0,0 @@ -"use client" -import "react-medium-image-zoom/dist/styles.css" - -export { default as Zoom } from "react-medium-image-zoom" diff --git a/src/globals.css b/src/globals.css index 91d5b83cc7..87b1b9c5fa 100644 --- a/src/globals.css +++ b/src/globals.css @@ -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); +} \ No newline at end of file