cow-bell index.tsx

0% Statements 0/34

0% Branches 0/1

0% Functions 0/1

0% Lines 0/34

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import Link from 'next/link';

import { Icon } from '@/components/icon';
import { cn } from '@/lib/utils';
import { useNotification } from '@/providers';

export const CowBell = () => {
  const { unReadCount, receivedNewNotification } = useNotification();

  return (
    <Link href={'/notification'} className='flex-center relative h-10 w-10'>
      <Icon
        id='bell-read'
        className={cn(
          'size-10 text-gray-700 transition-colors duration-200',
          receivedNewNotification && 'animate-ring text-mint-500',
        )}
      />
      {unReadCount > 0 && (
        <>
          <span
            className={cn(
              'bg-mint-300 absolute top-1 right-1.75 aspect-square size-3.5 rounded-full',
              receivedNewNotification && 'animate-ping',
            )}
          />
          <span className='bg-mint-500 text-mono-white text-text-2xs-semibold flex-center absolute top-1 right-1.75 aspect-square size-3.5 rounded-full'>
            {unReadCount}
          </span>
        </>
      )}
    </Link>
  );
};