damien/neroshitron
1
0
Fork 0
mirror of https://github.com/D4M13N-D3V/neroshitron.git synced 2025-03-14 10:05:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: more feel on gallery tiles

Browse Source
This commit is contained in:
Damien Ostler 2024-05-27 20:19:20 -04:00
parent 5e5678c280
commit 43432a8bcd
2 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/gallery/page.tsx
View File

@ -86,7 +86,7 @@ function PageComponent() {
alt="Background"
/>
</div>
<section className="flex items-center w-full p-8 pt-20 opacity-90 animate-in">
<section className="flex items-center w-full p-8 pt-20 opacity-90 animate-jump-in animate-once animate-duration-500">
{(tags.length>0) ? (
<div className="container mx-auto py-8">
@ -104,7 +104,7 @@ function PageComponent() {
{tags.map((tag, index) => (
<a
key={index}
className={`w-full rounded-lg no-underline text-white py-3 px-4 font-medium text-center ${
className={`w-full rounded-lg no-underline text-white py-3 px-4 font-medium text-center animate-jump-in animate-once animate-duration-500 animate-ease-out ${
selectedTags.includes(tag.name) ? 'bg-neroshi-blue-950 hover:bg-neroshi-blue-900' : 'bg-neroshi-blue-800 hover:bg-neroshi-blue-700'
}`}
href="#"

38
components/ui/gallery_thumbnail.tsx
View File

@ -55,45 +55,53 @@ const GalleryThumbnail = ({ id, columns, onSelect, title,nsfw, subscription, tag
<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>
<h3 className="animate-jump-in animate-once animate-duration-500 animate-ease-out pr-4 text-lg font-bold break-words" style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }}>{title}</h3>
</div>
</div>
</div>
<div className="text-white flex justify-between">
<div className="flex items-center">
<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>
{(nsfwState) && (
<span className="bg-red-900 text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
<span className="bg-neroshi-blue-900 animate-jump-in animate-once animate-duration-500 animate-ease-out 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>
{nsfwState && (
<span className="animate-jump-in animate-once animate-duration-500 animate-ease-out bg-red-900 text-white px-2 py-1 mr-2 rounded-md text-sm h-full flex items-center">NSFW</span>
)}
{subscription === "Free" && (
<span className="bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
<span className="animate-jump-in animate-once animate-duration-500 animate-ease-out bg-gray-900 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Free</span>
)}
{subscription === "Tier 1" && (
<span className="bg-purple-600 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 1</span>
<span className="animate-jump-in animate-once animate-duration-500 animate-ease-out bg-purple-600 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 1</span>
)}
{subscription === "Tier 2" && (
<span className="bg-pink-700 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 2</span>
<span className="animate-jump-in animate-once animate-duration-500 animate-ease-out bg-pink-700 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 2</span>
)}
{subscription === "Tier 3" && (
<span className="bg-fuchsia-500 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 3</span>
<span className="animate-jump-in animate-once animate-duration-500 animate-ease-out bg-fuchsia-500 text-white px-2 py-1 rounded-md text-sm h-full flex items-center">Tier 3</span>
)}
</div>
</div>
<div className="text-white flex justify-between">
<div>
<div className="flex">
<h6 className="pr-4 text-sm font-bold break-words" style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }}>{tagsState.join(', ')}</h6>
{tagsState.map((tag, index) => (
<span
key={index}
className={`animate-jump-in animate-once animate-duration-500 animate-delay-[${4+(index)}000ms] animate-ease-out pr-4 text-sm font-bold break-words"
style={{ lineHeight: '2rem', textShadow: '0 0 2px black' }`}
>
{tag}
</span>
))}
</div>
</div>
</div>
</div>
</>
):(
) : (
<div className="animate-pulse bg-neroshi-blue-950 rounded-3xl" style={{ width: '20rem', height: '20rem' }}></div>
)}
</div>