From 951dcd8cdf255ca9006148d267054684be05fc6a Mon Sep 17 00:00:00 2001
From: olexh <typicaladmsky@gmail.com>
Date: Wed, 6 Mar 2024 00:44:29 +0200
Subject: [PATCH] add removing blur by click

---
 .../_components/ui/collection-item.tsx        | 41 ++++++++++++-------
 components/ui/label.tsx                       |  2 +-
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx b/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
index 83ba9528..66ca014e 100644
--- a/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
+++ b/app/(pages)/collections/(collections)/_components/ui/collection-item.tsx
@@ -1,9 +1,12 @@
+'use client';
+
 import React from 'react';
 import IconamoonCommentFill from '~icons/iconamoon/comment-fill';
 import MaterialSymbolsGridViewRounded from '~icons/material-symbols/grid-view-rounded';
 import MaterialSymbolsMoreHoriz from '~icons/material-symbols/more-horiz';
 
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 
 import AnimeCard from '@/components/anime-card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -17,6 +20,9 @@ interface Props {
 }
 
 const Component = ({ collection }: Props) => {
+    const router = useRouter();
+    const [spoiler, setSpoiler] = React.useState(collection.spoiler);
+
     return (
         <div className="flex flex-col gap-4">
             <div className={cn('flex gap-2')}>
@@ -34,17 +40,25 @@ const Component = ({ collection }: Props) => {
                 </Link>
                 <div className="flex flex-col gap-2">
                     <div className="flex gap-4 items-center">
-                        <Label asChild className={cn('line-clamp-1')}>
-                            <Link
-                                className={cn(
-                                    collection.spoiler &&
-                                        'blur-sm hover:blur-none',
-                                )}
-                                href={`/collections/${collection.reference}`}
-                            >
+                        <button
+                            className={cn('text-left', spoiler && 'blur-sm')}
+                            onClick={(e) => {
+                                if (collection.spoiler && spoiler) {
+                                    e.preventDefault();
+                                    setSpoiler(false);
+                                    return;
+                                }
+
+                                router.push(
+                                    `/collections/${collection.reference}`,
+                                );
+                            }}
+                        >
+                            <Label className={cn('line-clamp-1')}>
                                 {collection.title}
-                            </Link>
-                        </Label>
+                            </Label>
+                        </button>
+
                         {collection.spoiler && (
                             <Badge variant="warning">Спойлери</Badge>
                         )}
@@ -73,10 +87,9 @@ const Component = ({ collection }: Props) => {
                     {collection.tags.map((tag) => (
                         <Badge
                             key={tag}
+                            onClick={() => setSpoiler(false)}
                             variant="secondary"
-                            className={cn(
-                                collection.spoiler && 'blur-sm hover:blur-none',
-                            )}
+                            className={cn(spoiler && 'blur-sm cursor-pointer')}
                         >
                             {tag.toLowerCase()}
                         </Badge>
@@ -84,7 +97,7 @@ const Component = ({ collection }: Props) => {
                 </div>
             )}
             <div className="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-4 lg:gap-8 flex-nowrap">
-                {collection.collection.reverse().map((item, index) => (
+                {[...collection.collection].reverse().map((item, index) => (
                     <AnimeCard
                         containerClassName={cn(
                             collection.nsfw && 'blur-sm hover:blur-none',
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index de50c8d6..997a9a7d 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -9,7 +9,7 @@ import { cn } from '@/utils';
 
 
 const labelVariants = cva(
-    'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+    'text-sm font-medium leading-tight peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
 );
 
 const Label = React.forwardRef<