info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-04-06 08:23:41 +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
Show Stats 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 { httpGet } from '../../lib/http';
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 { StreakDay } from './StreakDay';
import {
@ -99,8 +99,8 @@ export function AccountStreak(props: AccountStreakProps) {
)}
onClick={() => setShowDropdown(true)}
>
<Flame className="size-5" />
<span className="ml-1 text-sm font-semibold">
<Zap strokeWidth={1} className="size-5 fill-current" />
<span className="ml-1.5 text-sm font-semibold">
{accountStreak?.count}
</span>
</button>
@ -144,9 +144,9 @@ export function AccountStreak(props: AccountStreakProps) {
isBrokenStreakDay = index === leftCircleCount - 1;
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) {
// Current streak days
@ -155,7 +155,7 @@ export function AccountStreak(props: AccountStreakProps) {
currentCount - currentCircleCount + currentIndex + 1 + 1;
isCurrentStreakDay = true;
isToday = currentIndex === currentCircleCount - 1;
icon = <Flame className="size-3.5 text-white" />;
icon = <Zap className="size-5 fill-current" />;
} else {
// Remaining streak days
const remainingIndex =
@ -180,7 +180,7 @@ export function AccountStreak(props: AccountStreakProps) {
</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!
</p>
</div>

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

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