Add green aura for is_new level card.

xmliszt · Mar 28, 2024 · 75bf8bb · 75bf8bb
1 parent 127ca3b
commit 75bf8bb
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -186,6 +186,17 @@ textarea {
   animation: rotating 1.5s linear infinite forwards;
 }
 
+.rotating-green-border-trace::before,
+.rotating-green-border-trace::after {
+  content: '';
+  position: absolute;
+  inset: -0.1rem;
+  z-index: 0;
+  background: conic-gradient(from var(--gradient-angle), #42eca6, #208ea2, #42eca6);
+  border-radius: inherit;
+  animation: rotating 1.5s linear infinite forwards;
+}
+
 .unicorn-color::before,
 .unicorn-color::after {
   content: '';

diff --git a/components/custom/level-card.tsx b/components/custom/level-card.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import pluralize from 'pluralize';
 
 import { FetchAllLevelsAndRanksReturnTypeSingle } from '@/app/levels/server/fetch-levels';
@@ -31,8 +31,10 @@ interface LevelCardProps {
 export function LevelCard({ isShowingRank, level, beforeGoToLevel }: LevelCardProps) {
   const router = useRouter();
   const { user } = useAuth();
+  const searchParams = useSearchParams();
   const [pointHasDown, setPointHasDown] = useState(false);
   const isAIMode = !level;
+  const isHallOfFameOn = searchParams.has('rank');
 
   const goToLevel = () => {
     beforeGoToLevel && beforeGoToLevel();
@@ -63,7 +65,7 @@ export function LevelCard({ isShowingRank, level, beforeGoToLevel }: LevelCardPr
           {level?.is_new === true && (
             <Badge
               variant='outline'
-              className='border-yellow-500 bg-secondary text-secondary-foreground'
+              className='border-[#42eca6] bg-secondary text-secondary-foreground'
             >
               New level
             </Badge>
@@ -199,6 +201,13 @@ export function LevelCard({ isShowingRank, level, beforeGoToLevel }: LevelCardPr
             'group-hover/level-card:scale-[1.02]'
           )}
         ></span>
+      ) : level.is_new && !isHallOfFameOn ? (
+        <span
+          className={cn(
+            'rotating-green-border-trace absolute left-0 top-0 -z-10 h-full w-full rounded-lg bg-card transition-transform ease-in-out after:blur-lg',
+            'group-hover/level-card:scale-[1.02]'
+          )}
+        ></span>
       ) : (
         <span
           className={cn(