Remove unnecessary files
This commit is contained in:
@ -1,41 +0,0 @@
|
|||||||
import { Image } from "@/generated/prisma";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import NextImage from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
export default function ImageList({ images, gallerySlug, albumSlug }: { images: Image[], gallerySlug: string, albumSlug: string }) {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Images</h1>
|
|
||||||
<div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
|
|
||||||
{images ? images.map((img) => (
|
|
||||||
<Link href={`/galleries/${gallerySlug}/${albumSlug}/${img.id}`} key={img.id}>
|
|
||||||
<div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background">
|
|
||||||
<div className="relative aspect-[4/3] w-full bg-muted items-center justify-center">
|
|
||||||
{img.fileKey ? (
|
|
||||||
<NextImage
|
|
||||||
src={`/api/image/thumbnails/${img.fileKey}.webp`}
|
|
||||||
alt={img.imageName}
|
|
||||||
fill
|
|
||||||
className={clsx(
|
|
||||||
" object-cover",
|
|
||||||
img.nsfw && "blur-md scale-105"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
||||||
No cover image
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="p-4">
|
|
||||||
<h2 className="text-lg font-semibold truncate text-center">{img.imageName}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
)) : "There are no images here!"}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,34 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
// import ImageCard from "@/components/image/ImageCard"; // You likely have this already
|
|
||||||
// import type { Album, Gallery, Image, ImageVariant } from "@prisma/client";
|
|
||||||
import { Album, Gallery, Image, ImageVariant } from "@/generated/prisma";
|
|
||||||
import { useState } from "react";
|
|
||||||
import ImageCard from "./ImageCard";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
images: (Image & {
|
|
||||||
album: Album & { gallery: Gallery | null } | null;
|
|
||||||
variants: ImageVariant[];
|
|
||||||
})[];
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ArtistImageGrid({ images }: Props) {
|
|
||||||
const [showNSFW, setShowNSFW] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<button
|
|
||||||
onClick={() => setShowNSFW(!showNSFW)}
|
|
||||||
className="text-sm underline text-muted-foreground"
|
|
||||||
>
|
|
||||||
{showNSFW ? "Hide NSFW" : "Show NSFW"} content
|
|
||||||
</button>
|
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
|
||||||
{images.map((img) => (
|
|
||||||
<ImageCard key={img.id} image={img} showNSFW={showNSFW} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import { Album, Gallery, Image, ImageVariant } from "@/generated/prisma";
|
|
||||||
import NextImage from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
image: Image & {
|
|
||||||
variants: ImageVariant[];
|
|
||||||
album: Album & { gallery: Gallery | null } | null;
|
|
||||||
};
|
|
||||||
showNSFW?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ImageCard({ image, showNSFW = false }: Props) {
|
|
||||||
const variant = image.variants.find(v => v.type === "thumbnail") || image.variants[0];
|
|
||||||
if (!variant) return null;
|
|
||||||
|
|
||||||
const href = image.album?.gallery && image.album
|
|
||||||
? `/galleries/${image.album.gallery.slug}/${image.album.slug}/${image.id}`
|
|
||||||
: `/image/${image.id}`;
|
|
||||||
|
|
||||||
const shouldBlur = image.nsfw && !showNSFW;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={href} className="group relative overflow-hidden rounded-lg border bg-background shadow transition hover:shadow-lg">
|
|
||||||
<div className="aspect-[4/5] w-full relative">
|
|
||||||
<NextImage
|
|
||||||
src={`/api/image/${variant.s3Key}`}
|
|
||||||
alt={image.altText || image.imageName}
|
|
||||||
width={variant.width}
|
|
||||||
height={variant.height}
|
|
||||||
className={`object-cover h-full transition duration-200 ease-in-out ${shouldBlur ? "blur-md scale-105" : ""
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
{image.nsfw && (
|
|
||||||
<div className="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-0.5 rounded z-10">
|
|
||||||
NSFW
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="absolute bottom-0 left-0 w-full bg-black/50 text-white text-sm px-2 py-1 line-clamp-1 truncate">
|
|
||||||
{image.imageName}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,47 +0,0 @@
|
|||||||
import { Album, Image } from "@/generated/prisma";
|
|
||||||
import NextImage from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
album: Album & {
|
|
||||||
coverImage: Image | null;
|
|
||||||
};
|
|
||||||
gallerySlug: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function AlbumCard({ album, gallerySlug }: Props) {
|
|
||||||
const href = `/galleries/${gallerySlug}/${album.slug}`;
|
|
||||||
const cover = album.coverImage;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
href={href}
|
|
||||||
className="group relative overflow-hidden rounded-lg border bg-background shadow transition hover:shadow-lg"
|
|
||||||
>
|
|
||||||
<div className="aspect-[4/3] w-full relative">
|
|
||||||
{cover ? (
|
|
||||||
<NextImage
|
|
||||||
src={`/api/image/thumbnails/${cover.fileKey}.webp`}
|
|
||||||
alt={cover.imageName}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-full w-full bg-muted text-muted-foreground text-sm">
|
|
||||||
No cover image
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Overlay: Album label */}
|
|
||||||
<div className="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-0.5 rounded z-10">
|
|
||||||
Album
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bottom: Album name */}
|
|
||||||
<div className="absolute bottom-0 left-0 w-full bg-black/50 text-white text-sm px-2 py-1 line-clamp-1 truncate">
|
|
||||||
{album.name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import { Album, Gallery, Image } from "@/generated/prisma";
|
|
||||||
import NextImage from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
type ImagesWithItems = (Pick<Image, "id" | "fileKey" | "imageName" | "altText" | "nsfw"> & {
|
|
||||||
album?: (Pick<Album, "slug"> & {
|
|
||||||
gallery?: Pick<Gallery, "slug"> | null
|
|
||||||
}) | null
|
|
||||||
})[]
|
|
||||||
|
|
||||||
export default function CategoryImageList({ images }: { images: ImagesWithItems }) {
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Images</h1>
|
|
||||||
<div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
|
|
||||||
{images ? images.map((img) => {
|
|
||||||
const gallerySlug = img.album?.gallery?.slug;
|
|
||||||
const albumSlug = img.album?.slug;
|
|
||||||
if (!gallerySlug || !albumSlug || !img.id) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link href={`/${gallerySlug}/${albumSlug}/${img.id}`} key={img.id}>
|
|
||||||
<div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background">
|
|
||||||
<div className="relative aspect-[4/3] w-full bg-muted items-center justify-center">
|
|
||||||
{img.fileKey ? (
|
|
||||||
<NextImage
|
|
||||||
src={`/api/image/thumbnails/${img.fileKey}.webp`}
|
|
||||||
alt={img.altText || ""}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
||||||
No cover image
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="p-4">
|
|
||||||
<h2 className="text-lg font-semibold truncate text-center">{img.imageName}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
)
|
|
||||||
}) : "There are no images here!"}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
import { Album, Image } from "@/generated/prisma";
|
|
||||||
import NextImage from "next/image";
|
|
||||||
import Link from "next/link";
|
|
||||||
|
|
||||||
type AlbumsWithItems = Album & {
|
|
||||||
coverImage: Image | null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function AlbumList({ albums, gallerySlug }: { albums: AlbumsWithItems[], gallerySlug: string }) {
|
|
||||||
return (
|
|
||||||
<section>
|
|
||||||
<h1 className="text-2xl font-bold mb-4">Albums</h1>
|
|
||||||
<div className="grid gap-6 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
|
|
||||||
{albums ? albums.map((album) => (
|
|
||||||
<Link href={`/galleries/${gallerySlug}/${album.slug}`} key={album.id}>
|
|
||||||
<div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background">
|
|
||||||
<div className="relative aspect-[4/3] w-full bg-muted items-center justify-center">
|
|
||||||
{album.coverImage?.fileKey ? (
|
|
||||||
<NextImage
|
|
||||||
src={`/api/image/thumbnails/${album.coverImage.fileKey}.webp`}
|
|
||||||
alt={album.coverImage.imageName}
|
|
||||||
fill
|
|
||||||
className="object-cover"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
||||||
No cover image
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="p-4">
|
|
||||||
<h2 className="text-lg font-semibold truncate text-center">{album.name}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
)) : "There are no albums here!"}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Color, ImageColor, ImageVariant } from "@/generated/prisma"
|
|
||||||
import clsx from "clsx"
|
|
||||||
import { useTheme } from "next-themes"
|
|
||||||
import NextImage from "next/image"
|
|
||||||
import { useEffect, useState } from "react"
|
|
||||||
|
|
||||||
type Colors = ImageColor & {
|
|
||||||
color: Color
|
|
||||||
}
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
alt: string,
|
|
||||||
variant: ImageVariant,
|
|
||||||
colors: Colors[],
|
|
||||||
src: string,
|
|
||||||
revealed?: boolean,
|
|
||||||
className?: string,
|
|
||||||
animate?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function GlowingImageBorder({
|
|
||||||
alt,
|
|
||||||
variant,
|
|
||||||
colors,
|
|
||||||
src,
|
|
||||||
className,
|
|
||||||
revealed = true,
|
|
||||||
animate = true,
|
|
||||||
}: Props) {
|
|
||||||
const { resolvedTheme } = useTheme()
|
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const getColor = (type: string) =>
|
|
||||||
colors.find((c) => c.type === type)?.color.hex
|
|
||||||
|
|
||||||
const vibrantLight = getColor("Vibrant") || "#ff5ec4"
|
|
||||||
const mutedLight = getColor("Muted") || "#5ecaff"
|
|
||||||
|
|
||||||
const darkVibrant = getColor("DarkVibrant") || "#fc03a1"
|
|
||||||
const darkMuted = getColor("DarkMuted") || "#035efc"
|
|
||||||
|
|
||||||
const vibrant = resolvedTheme === "dark" ? darkVibrant : vibrantLight
|
|
||||||
const muted = resolvedTheme === "dark" ? darkMuted : mutedLight
|
|
||||||
|
|
||||||
if (!mounted) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={clsx(
|
|
||||||
"relative inline-block rounded-xl overflow-hidden p-[12px]",
|
|
||||||
animate ? "glow-border" : "static-glow-border",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
style={
|
|
||||||
{
|
|
||||||
"--vibrant": vibrant,
|
|
||||||
"--muted": muted,
|
|
||||||
} as React.CSSProperties
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="relative z-10 rounded-xl overflow-hidden group">
|
|
||||||
<NextImage
|
|
||||||
src={src}
|
|
||||||
alt={alt || "Image"}
|
|
||||||
width={variant.width}
|
|
||||||
height={variant.height}
|
|
||||||
className={clsx(
|
|
||||||
"rounded-xl transition duration-300",
|
|
||||||
!revealed && "blur-md scale-105"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
"use client"
|
|
||||||
|
|
||||||
import { Color, ImageColor, ImageVariant } from "@/generated/prisma";
|
|
||||||
import Link from "next/link";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Label } from "../ui/label";
|
|
||||||
import { Switch } from "../ui/switch";
|
|
||||||
import GlowingImageBorder from "./GlowingImageBorder";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
variant: ImageVariant;
|
|
||||||
colors: (ImageColor & { color: Color })[];
|
|
||||||
alt: string;
|
|
||||||
src: string;
|
|
||||||
nsfw: boolean;
|
|
||||||
imageId: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function GlowingImageWithToggle({ variant, colors, alt, src, nsfw, imageId }: Props) {
|
|
||||||
const [animate, setAnimate] = useState(true);
|
|
||||||
const [revealed, setRevealed] = useState(!nsfw)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="relative w-full max-w-fit">
|
|
||||||
|
|
||||||
<Link href={`/raw/${imageId}`} passHref>
|
|
||||||
<GlowingImageBorder
|
|
||||||
alt={alt}
|
|
||||||
variant={variant}
|
|
||||||
colors={colors}
|
|
||||||
src={src}
|
|
||||||
animate={animate}
|
|
||||||
revealed={revealed}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<div className="flex flex-col items-center gap-4 pt-8">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Switch id="animate" checked={animate} onCheckedChange={setAnimate} />
|
|
||||||
<Label htmlFor="animate">Animate glow</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{
|
|
||||||
nsfw && (
|
|
||||||
<div className="flex flex-col items-center gap-4 pt-8">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Switch id="animate" checked={revealed} onCheckedChange={setRevealed} />
|
|
||||||
<Label htmlFor="animate">Reveal NSFW</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div >
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
import { Image as ImageType } from "@/generated/prisma";
|
|
||||||
import Link from "next/link";
|
|
||||||
// import { SocialIcon } from "react-social-icons";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
image: ImageType & {
|
|
||||||
artist?: {
|
|
||||||
id: string;
|
|
||||||
slug: string;
|
|
||||||
displayName: string;
|
|
||||||
socials?: { type: string; handle: string; link: string }[];
|
|
||||||
};
|
|
||||||
categories?: { id: string; name: string }[];
|
|
||||||
tags?: { id: string; name: string }[];
|
|
||||||
album?: { id: string; name: string; slug: string };
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ImageInfoPanel({ image }: Props) {
|
|
||||||
return (
|
|
||||||
<div className="w-full max-w-2xl mt-8 border border-border rounded-lg p-6 shadow-sm bg-background">
|
|
||||||
{/* Creator */}
|
|
||||||
{image.artist && (
|
|
||||||
<div className="mb-4">
|
|
||||||
<h2 className="text-lg font-semibold mb-1">Creator</h2>
|
|
||||||
<Link
|
|
||||||
href={`/artists/${image.artist.slug}`}
|
|
||||||
className="text-primary hover:underline font-medium"
|
|
||||||
>
|
|
||||||
{image.artist.displayName}
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{image.artist.socials?.length > 0 && (
|
|
||||||
<div className="flex gap-2 mt-2">
|
|
||||||
{image.artist.socials.map((social, i) => (
|
|
||||||
<SocialIcon
|
|
||||||
key={i}
|
|
||||||
url={social.link}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
style={{ height: 28, width: 28 }}
|
|
||||||
title={social.type}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Album */}
|
|
||||||
{image.album && (
|
|
||||||
<div className="mb-4">
|
|
||||||
<h2 className="text-lg font-semibold mb-1">Album</h2>
|
|
||||||
<Link
|
|
||||||
href={`/galleries/${image.album.slug}`}
|
|
||||||
className="text-primary hover:underline"
|
|
||||||
>
|
|
||||||
{image.album.name}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Categories */}
|
|
||||||
{image.categories?.length > 0 && (
|
|
||||||
<div className="mb-4">
|
|
||||||
<h2 className="text-lg font-semibold mb-1">Categories</h2>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{image.categories.map((cat) => (
|
|
||||||
<Link
|
|
||||||
key={cat.id}
|
|
||||||
href={`/categories/${cat.id}`}
|
|
||||||
className="bg-muted text-sm px-2 py-1 rounded hover:bg-accent"
|
|
||||||
>
|
|
||||||
{cat.name}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Tags */}
|
|
||||||
{image.tags?.length > 0 && (
|
|
||||||
<div>
|
|
||||||
<h2 className="text-lg font-semibold mb-1">Tags</h2>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{image.tags.map((tag) => (
|
|
||||||
<Link
|
|
||||||
key={tag.id}
|
|
||||||
href={`/tags/${tag.id}`}
|
|
||||||
className="bg-muted text-sm px-2 py-1 rounded hover:bg-accent"
|
|
||||||
>
|
|
||||||
#{tag.name}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user