mirror of
https://github.com/D4M13N-D3V/neroshitron.git
synced 2025-03-14 10:05:04 +00:00
fix:tooltips and badges and titles on thumbnails
This commit is contained in:
parent
246eb848f8
commit
4c16ebd1d7
22
app/api/galleries/[id]/images/count/route.ts
Normal file
22
app/api/galleries/[id]/images/count/route.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { createClient } from "@/utils/supabase/server";
|
||||
|
||||
export async function GET(
|
||||
request: Request,
|
||||
{ params }: { params: { id: string } }
|
||||
) {
|
||||
const galleryId = params.id;
|
||||
const supabase = createClient();
|
||||
|
||||
// List all files in the galleryId path
|
||||
let { data: files, error } = await supabase.storage.from('galleries').list(galleryId);
|
||||
|
||||
if (files==null || error) {
|
||||
console.error('Error listing files:', error);
|
||||
return NextResponse.error();
|
||||
}
|
||||
|
||||
|
||||
// Return a JSON response with the array of URLs
|
||||
return new Response(JSON.stringify(files.length), { headers: { 'content-type': 'application/json' } });
|
||||
}
|
||||
@ -66,7 +66,7 @@ function PageComponent() {
|
||||
<div className="grid grid-cols-3 gap-y-36 gap-x-10 h-full overflow-y-auto no-scrollbar pt-20">
|
||||
{galleries.map((gallery, index) => (
|
||||
|
||||
<GalleryThumbnail key={index} id={gallery.id} columns={gallery.columns} onSelect={selectGallery}></GalleryThumbnail>
|
||||
<GalleryThumbnail key={index} id={gallery.id} title={gallery.name} columns={gallery.columns} subscription={gallery.tier as string} onSelect={selectGallery}></GalleryThumbnail>
|
||||
))}
|
||||
<div className="pt-10">
|
||||
</div>
|
||||
|
||||
@ -4,13 +4,17 @@ interface GalleryThumbnailProps {
|
||||
id: string;
|
||||
columns: number;
|
||||
onSelect: (id: string, columns: number) => void;
|
||||
title: string;
|
||||
subscription: string;
|
||||
}
|
||||
|
||||
const GalleryThumbnail = ({ id, columns, onSelect }: GalleryThumbnailProps) => {
|
||||
const GalleryThumbnail = ({ id, columns, onSelect, title, subscription }: GalleryThumbnailProps) => {
|
||||
const [galleryId, setGalleryId] = useState<string>(id);
|
||||
const [thumbnailUrl, setThumbnailUrl] = useState<string>('');
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [galleryCollumns, setColumns] = useState<number>(columns);
|
||||
const [imageCount, setImageCount] = useState<number>(0);
|
||||
|
||||
const openGallery = () => {
|
||||
onSelect(galleryId, galleryCollumns);
|
||||
};
|
||||
@ -19,27 +23,91 @@ const GalleryThumbnail = ({ id, columns, onSelect }: GalleryThumbnailProps) => {
|
||||
setIsLoading(true);
|
||||
const thumbnailResponse = await fetch('/api/galleries/' + galleryId + '/thumbnail');
|
||||
const thumbnailUrl = await thumbnailResponse.text();
|
||||
const imagesCountResponse = await fetch('/api/galleries/' + galleryId + '/images/count');
|
||||
const imageCount = await imagesCountResponse.json() as number;
|
||||
setImageCount(imageCount);
|
||||
setThumbnailUrl(thumbnailUrl);
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="py-3 sm:max-w-xl sm:mx-auto flex-3">
|
||||
<div className="py-3 sm:max-w-xl sm:mx-auto flex-3 animate-in">
|
||||
<div className="h-48 overflow-visible w-full relative hover:scale-105 shadow-lg bg-gray-400 rounded-3xl">
|
||||
{!isLoading && <img
|
||||
{!isLoading && (
|
||||
<>
|
||||
<img
|
||||
className={`aspect-content rounded-3xl`}
|
||||
src={thumbnailUrl}
|
||||
alt=""
|
||||
onClick={openGallery}
|
||||
style={{ width: '20rem', height: '20rem', objectFit: 'cover' }}
|
||||
/>}
|
||||
/>
|
||||
<div className="absolute top-2 left-0 w-full h-10% bg-gray-900 bg-opacity-10 backdrop-blur-md p-2 rounded-md shadow-lg flex flex-col justify-end">
|
||||
<div className="text-white flex justify-between">
|
||||
<div>
|
||||
<div className="flex">
|
||||
<h3 className="pr-4 text-lg font-bold break-words" style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }}>{title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="relative group">
|
||||
<div className="absolute top-0 right-2 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
|
||||
<div className="text-center">{imageCount} pictures in this gallery.</div>
|
||||
</div>
|
||||
<span className="bg-neroshi-blue-900 text-white mr-2 px-2 py-1 rounded-md text-sm flex items-center h-full">
|
||||
<span className="text-center">{imageCount}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="pl-2 size-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
|
||||
</svg>
|
||||
</span>
|
||||
<div className="absolute top-0 right-2 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
|
||||
<div className="text-center">{imageCount} pictures in this gallery.</div>
|
||||
</div>
|
||||
</div>
|
||||
{subscription === "Free" && (
|
||||
<div className="relative group">
|
||||
<span className="bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
|
||||
<div className="absolute top-0 right-12 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
|
||||
<div className="text-center">This is free for everyone.</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subscription === "Tier 1" && (
|
||||
<div className="relative group">
|
||||
<span className="bg-purple-600 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 1</span>
|
||||
<div className="absolute top-0 right-12 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
|
||||
<div className="text-center">This requires a Tier 1 subscription.</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subscription === "Tier 2" && (
|
||||
<div className="relative group">
|
||||
<span className="bg-pink-700 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 2</span>
|
||||
<div className="absolute top-0 right-12 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
|
||||
<div className="text-center">This requires a Tier 2 subscription.</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{subscription === "Tier 3" && (
|
||||
<div className="relative group">
|
||||
<span className="bg-fuchsia-500 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 3</span>
|
||||
<div className="absolute top-0 right-12 mt-12 w-48 px-2 py-1 bg-black text-white text-xs rounded hidden group-hover:block">
|
||||
<div className="text-center">This requires a Tier 3 subscription.</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default GalleryThumbnail;
|
||||
Loading…
x
Reference in New Issue
Block a user