info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-07-31 06:20:14 +02:00
Code Issues Releases Wiki Activity

Update streak ui

Browse Source
This commit is contained in:
Kamran Ahmed
2024-08-23 13:36:54 +01:00
parent 45068a5930
commit b1edb5ce4a
2 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/AccountStreak/AccountStreak.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
import { isLoggedIn } from '../../lib/jwt'; import { isLoggedIn } from '../../lib/jwt';
import { httpGet } from '../../lib/http'; import { httpGet } from '../../lib/http';
import { useToast } from '../../hooks/use-toast'; import { useToast } from '../../hooks/use-toast';
import { Flame, X } from 'lucide-react'; import {Flame, X, Zap, ZapOff} from 'lucide-react';
import { useOutsideClick } from '../../hooks/use-outside-click'; import { useOutsideClick } from '../../hooks/use-outside-click';
import { StreakDay } from './StreakDay'; import { StreakDay } from './StreakDay';
import { import {
@@ -99,8 +99,8 @@ export function AccountStreak(props: AccountStreakProps) {
)} )}
onClick={() => setShowDropdown(true)} onClick={() => setShowDropdown(true)}
> >
<Flame className="size-5" /> <Zap strokeWidth={1} className="size-5 fill-current" />
<span className="ml-1 text-sm font-semibold"> <span className="ml-1.5 text-sm font-semibold">
{accountStreak?.count} {accountStreak?.count}
</span> </span>
</button> </button>
@@ -144,9 +144,9 @@ export function AccountStreak(props: AccountStreakProps) {
isBrokenStreakDay = index === leftCircleCount - 1; isBrokenStreakDay = index === leftCircleCount - 1;
icon = isBrokenStreakDay ? ( icon = isBrokenStreakDay ? (
<X className="opacit size-3.5 text-white" /> <ZapOff className="size-5 fill-current" />
) : ( ) : (
<Flame className="size-3.5 text-white" /> <Zap className="size-5 fill-current" />
); );
} else if (index < leftCircleCount + currentCircleCount) { } else if (index < leftCircleCount + currentCircleCount) {
// Current streak days // Current streak days
@@ -155,7 +155,7 @@ export function AccountStreak(props: AccountStreakProps) {
currentCount - currentCircleCount + currentIndex + 1 + 1; currentCount - currentCircleCount + currentIndex + 1 + 1;
isCurrentStreakDay = true; isCurrentStreakDay = true;
isToday = currentIndex === currentCircleCount - 1; isToday = currentIndex === currentCircleCount - 1;
icon = <Flame className="size-3.5 text-white" />; icon = <Zap className="size-5 fill-current" />;
} else { } else {
// Remaining streak days // Remaining streak days
const remainingIndex = const remainingIndex =
@@ -180,7 +180,7 @@ export function AccountStreak(props: AccountStreakProps) {
</div> </div>
</div> </div>
<p className="text-center text-xs text-slate-600 tracking-wide mb-[2px] -mt-[3px]"> <p className="text-center text-xs text-slate-500 tracking-wide mb-[1.75px] -mt-[2px]">
Visit every day to keep your streak alive! Visit every day to keep your streak alive!
</p> </p>
</div> </div>

20
src/components/AccountStreak/StreakDay.tsx
View File

@@ -26,28 +26,24 @@ export function StreakDay(props: StreakDayProps) {
return ( return (
<div <div
className={cn( className={cn(
'flex flex-col items-center justify-center gap-1.5', 'relative flex flex-col items-center justify-center gap-1.5',
isCurrentStreakDay && 'relative', {
'text-red-400 opacity-40': isPreviousStreakDay,
'text-slate-600': isRemainingStreakDay,
'text-yellow-300': isCurrentStreakDay,
'text-slate-400': isToday,
},
)} )}
> >
<div <div
className={cn('flex size-6 items-center justify-center rounded-full', { className={cn('flex size-6 items-center justify-center rounded-full', {
'bg-red-500': isPreviousStreakDay,
'bg-purple-500': isCurrentStreakDay,
'bg-slate-700': isRemainingStreakDay, 'bg-slate-700': isRemainingStreakDay,
'border-2 border-dashed border-slate-500 bg-transparent': isToday, 'border-2 border-dashed border-slate-500 bg-transparent': isToday,
})} })}
> >
{isToday ? null : icon} {isToday ? null : icon}
</div> </div>
<span <span className={cn('text-xs')}>{dayCount}</span>
className={cn('text-sm', {
'text-slate-500': isPreviousStreakDay,
'text-slate-100': isCurrentStreakDay || isRemainingStreakDay,
})}
>
{dayCount}
</span>
{isToday && ( {isToday && (
<ChevronDown className="absolute bottom-full left-1/2 h-4 w-4 -translate-x-1/2 transform stroke-[2.5px] text-slate-400" /> <ChevronDown className="absolute bottom-full left-1/2 h-4 w-4 -translate-x-1/2 transform stroke-[2.5px] text-slate-400" />
)} )}