joe/next-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Looking at adding a lightbox

Browse Source
This commit is contained in:
Joe Monk
2024-04-25 20:18:27 +01:00
parent 1e02cb3827
commit 6343dda1fa
14 changed files with 678 additions and 599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -20,7 +20,7 @@ export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>): JSX.Element {
}>): React.JSX.Element {
return (
<html className={`${inter.variable} font-sans`} lang="en">
<body className="min-h-screen flex flex-col bg-dracula-bg">

2
src/app/page.tsx
View File

@@ -1,6 +1,6 @@
import Sim from '@/components/sim';
export default function Home(): JSX.Element {
export default function Home(): React.JSX.Element {
return (
<>
<Sim/>

25
src/app/photos/page.tsx
View File

@@ -3,14 +3,15 @@ import { glob } from "glob";
import sharp from 'sharp';
import exifReader from 'exif-reader';
import { pick } from 'radash';
import Lightbox from "@/components/lightbox";
type ImageData = {
width: number,
height: number,
blur: string,
blur: `data:image/${string}`,
src: string,
camera?: string,
exif: Partial<{
ExposureProgram: number,
ExposureBiasValue: number,
FNumber: number,
ISOSpeedRatings: number,
@@ -24,30 +25,32 @@ export async function getImages(): Promise<{images: ImageData[]}> {
const photosGlob = await glob(`public/photos/**/*.{png,jpeg,jpg}`, {
nodir: true,
});
const images = photosGlob.map(async (fileName) => {
const { width, height, exif } = await sharp(fileName).metadata();
const blur = await sharp(fileName)
.resize({ width: 10, height: 10, fit: 'inside' })
.resize({ width: 12, height: 12, fit: 'inside' })
.toBuffer();
const exifData = exif ? exifReader(exif) : undefined;
return {
width: width ?? 10,
height: height ?? 10,
blur: blur.toString('base64'),
blur: `data:image/jpeg;base64,${blur.toString('base64')}` as `data:image/${string}`,
src: fileName.slice(6),
exif: pick(exifData?.Photo ?? {}, ['ExposureProgram', 'ExposureBiasValue', 'FNumber', 'ISOSpeedRatings', 'FocalLength', 'DateTimeOriginal', 'LensModel'])
camera: exifData?.Image?.Model,
exif: pick(exifData?.Photo ?? {}, ['ExposureBiasValue', 'FNumber', 'ISOSpeedRatings', 'FocalLength', 'DateTimeOriginal', 'LensModel'])
};
});
return { images: await Promise.all(images) };
}
export default async function Home(): Promise<JSX.Element> {
export default async function Home(): Promise<React.JSX.Element> {
const { images } = await getImages();
return (
<div className="grid gap-2 grid-cols-3">
<Lightbox imageData={images}>
{images.map((image) => (
<div className="relative" key={image.src}>
<Image
@@ -58,11 +61,11 @@ export default async function Home(): Promise<JSX.Element> {
loading="lazy"
width={image.width}
height={image.height}
blurDataURL={`data:image/jpeg;base64,${image.blur}`}
placeholder={`data:image/jpeg;base64,${image.blur}`}
blurDataURL={image.blur}
placeholder={image.blur}
/>
</div>
))}
</div>
</Lightbox>
);
}

2
src/components/auth/login.tsx
View File

@@ -5,7 +5,7 @@ import { LogoutButton } from "./logout_button";
/**
* This is a server component, then the buttons are client side
*/
export default async function LogIn(): Promise<JSX.Element | undefined> {
export default async function LogIn(): Promise<React.JSX.Element | undefined> {
const session = await auth();
if (session) {
return (

2
src/components/auth/login_button.tsx
View File

@@ -2,7 +2,7 @@
import { UserCircleIcon } from '@heroicons/react/24/outline';
import { signIn } from "next-auth/react";
export function LoginButton(): JSX.Element {
export function LoginButton(): React.JSX.Element {
return (
<button className="p-1 hover:bg-dracula-bglight rounded-3xl transition-colors group" onClick={() => void signIn('cognito')}>
<UserCircleIcon className='stroke-dracula-cyan h-8 w-auto group-hover:stroke-dracula-orange transition-colors'/>

2
src/components/auth/logout_button.tsx
View File

@@ -2,7 +2,7 @@
import { UserCircleIcon } from '@heroicons/react/24/outline';
import { signOut } from "next-auth/react";
export function LogoutButton(): JSX.Element {
export function LogoutButton(): React.JSX.Element {
return (
<button className="p-1 hover:bg-dracula-bglight rounded-3xl transition-colors group" onClick={() => void signOut()}>
<UserCircleIcon className='stroke-dracula-cyan h-8 w-auto group-hover:stroke-dracula-red transition-colors'/>

2
src/components/footer.tsx
View File

@@ -1,4 +1,4 @@
export default function NavBar(): JSX.Element {
export default function NavBar(): React.JSX.Element {
return (
<footer className="bg-dracula-bg-darker border-t-2 border-dracula-purple">
<div className="mx-auto max-w-7xl px-4">

76
src/components/lightbox.tsx Normal file
View File

@@ -0,0 +1,76 @@
"use client";
import { useState } from "react";
import Image from "next/image";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
type ImageData = {
width: number,
height: number,
blur: `data:image/${string}`,
src: string,
camera?: string,
exif: Partial<{
ExposureBiasValue: number,
FNumber: number,
ISOSpeedRatings: number,
FocalLength: number,
DateTimeOriginal: Date,
LensModel: string
}>
}
type LightboxProps = {
children: React.JSX.Element[],
imageData: ImageData[]
}
export default function Lightbox(props: LightboxProps): React.JSX.Element {
const [active, setActive] = useState<ImageData | null>(null);
return (
<>
<div className="grid gap-2 grid-cols-3">
{props.children.map((image, index) => (
<button key={`lightbox_img_${index}`} onClick={(() => {
setActive(props.imageData[index]);
})}>
{image}
</button>
))}
</div>
{ active ? (
<div className="fixed top-0 left-0 w-full h-full z-30">
<div className="bg-black bg-opacity-80 w-full h-full p-12">
<div className="flex flex-col w-full h-full">
<div className="p-1 mb-4">
<span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.DateTimeOriginal?.toLocaleDateString()}</span>
<button className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple" onClick={() => setActive(null)}>
<span>x</span>
</button>
</div>
<div className="relative w-full h-full m-auto">
<Image
alt={active.src}
src={active.src}
className="opacity-100 object-contain m-auto"
loading="eager"
unoptimized={true}
fill
blurDataURL={active.blur}
placeholder={active.blur}
/>
</div>
<div className="flex flex-row flex-wrap self-center justify-center gap-4 max-w-3xl mt-4">
<span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.camera}</span>
<span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.LensModel}</span>
<span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.FocalLength}mm</span>
<span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">f/{active.exif.FNumber}</span>
<span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">ISO {active.exif.ISOSpeedRatings}</span>
<span className="text-white py-1.5 px-3 bg-dracula-bg-lighter border border-dracula-purple">{active.exif.ExposureBiasValue}EV</span>
</div>
</div>
</div>
</div>
) : null}
</>
);
}

2
src/components/navbar.tsx
View File

@@ -12,7 +12,7 @@ const navigation = [
{ name: 'Contact', href: '#', current: false },
];
export default function NavBar({LogIn}: {LogIn: JSX.Element}): JSX.Element {
export default function NavBar({LogIn}: {LogIn: React.JSX.Element}): React.JSX.Element {
const [open, setOpen] = useState(false);
return (

2
src/components/sim.tsx
View File

@@ -3,7 +3,7 @@
import { shuffle } from "radash";
import { FormEvent, useState, useRef, useCallback, useEffect } from "react";
export default function Sim(): JSX.Element {
export default function Sim(): React.JSX.Element {
const [outputs, setOutputs] = useState<
{ runs: number; tickets: number; totalWin: number }[]
>([]);