Added other filter & animations

app/dashboard/puzzles/page.tsx

@@ -20,10 +20,10 @@ export default async function Page() {
   }
 
   return (
-    <div className="flex flex-col space-y-6">
+    <section className="flex w-full flex-col space-y-6">
       <SWRFallback fallback={{ ['puzzles']: puzzles }}>
         <Puzzles token={token!} />
       </SWRFallback>
-    </div>
+    </section>
   );
 }

lib/puzzles.ts

@@ -2,7 +2,8 @@ export const getChapters = async ({ token }: { token: string }): Promise<Chapter
   const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/chapters`, {
     headers: {
       Authorization: `Bearer ${token}`
-    }
+    },
+    cache: 'force-cache'
   });
 
   const chapters = (await res.json()) as Chapter[];

ui/Puzzles.tsx

@@ -43,7 +43,17 @@ export default function Puzzles({ token }: { token: string }) {
 
   const filteredData = useMemo(() => {
     if (filter && filterChapter) {
-      console.log(filter);
+      if (filter === 'completed' || filter === 'no-completed') {
+        return data
+          ?.find((chapter) => chapter.id === filterChapter)
+          ?.puzzles.filter((puzzle) => {
+            if (filter === 'completed') {
+              return puzzle!.score;
+            }
+            return !puzzle!.score;
+          })
+          .map((puzzle) => puzzle);
+      }
       return data
         ?.find((chapter) => chapter.id === filterChapter)
         ?.puzzles.filter((puzzle) => puzzle!.tags!.some((tag) => tag.name === filter))
@@ -193,7 +203,7 @@ function PuzzleProp({ puzzle, chapter }: { puzzle: Puzzle; chapter: Chapter }) {
   return (
     <li
       className={cn(
-        'group relative flex h-full w-full rounded-md border-2 bg-primary-700 font-code hover:bg-primary-600',
+        'group relative flex h-full w-full rounded-md border-2 bg-primary-700 font-code transition-colors duration-150 hover:bg-primary-600',
         {
           'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
           'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
@@ -284,6 +294,9 @@ function FilterChapter({
       return { title: t!.name, value: t!.name };
     }) as { title: string; value: string }[];
 
+
+    options?.unshift({ title: 'Pas encore terminé', value: 'no-completed' });
+  options?.unshift({ title: 'Terminés', value: 'completed' });
   options?.unshift({ title: 'Tout les puzzles', value: '' });
 
   setFilterChapter(chapter.id);

ui/Select.tsx

@@ -16,7 +16,7 @@ const Select = forwardRef<
     <Label label={label} description={description} required={props.required} className={className}>
       <select
         className={
-          'w-full cursor-pointer overflow-hidden rounded-lg border-2 border-highlight-primary bg-transparent px-5 py-2.5 text-sm font-medium text-secondary opacity-80 outline-none outline-0 transition-opacity  hover:opacity-100 focus:outline-none focus:ring-1 focus:ring-brand disabled:opacity-50'
+          'w-full cursor-pointer overflow-hidden rounded-lg border-2 border-highlight-primary bg-highlight-primary px-5 py-2.5 text-sm font-medium text-secondary opacity-80 outline-none outline-0 transition-opacity  hover:opacity-100 focus:outline-none disabled:opacity-50'
         }
         {...props}
         ref={ref}

ui/dashboard/Sidenav.tsx

@@ -99,13 +99,16 @@ function NavItem({
       href={isHttp ? item.slug : `dashboard/${item.slug}`}
       target={isHttp ? '_blank' : undefined}
       rel={isHttp ? 'noopener noreferrer' : undefined}
-      className={cn('flex justify-center rounded-md px-3 py-3 text-sm lg:justify-start', {
-        'text-muted hover:text-secondary': !isActive,
-        'bg-highlight-primary text-secondary': isActive,
-        'cursor-not-allowed text-gray-600 hover:text-gray-600': item.disabled,
-        'justify-center lg:justify-start': isOpen,
-        'justify-start sm:justify-center': !isOpen
-      })}
+      className={cn(
+        'flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
+        {
+          'text-muted hover:text-secondary': !isActive,
+          'bg-highlight-primary text-secondary hover:text-white': isActive,
+          'cursor-not-allowed text-gray-600 hover:text-gray-600': item.disabled,
+          'justify-center lg:justify-start': isOpen,
+          'justify-start sm:justify-center': !isOpen
+        }
+      )}
       onClick={onClick}
     >
       <div className="flex items-center space-x-2">