Streak Komponens
...
A Streak komponens egy felhasználó aktuális napi aktivitási sorozatának (streak) számát jeleníti meg egy stilizált tűz ikonnal. Célja a felhasználók motiválása és a rendszeres használat ösztönzése.
Működés
- Megjelenít egy tűz ikont (
fas fa-fire) és astreakpropban megadott számot. - Két méretben renderelhető: alapértelmezett és kisebb (
smallprop). - A
.streak-container,.streak-icon,.streak-textCSS osztályokkal stilizálható.
Propok
| Név | Típus | Kötelező | Leírás |
|---|---|---|---|
streak | number | Igen | A felhasználó aktuális aktivitási sorozatának hossza (napokban). |
small? | boolean | Nem | Ha true, a komponens kisebb méretben jelenik meg. |
Használati példa
Az alábbi példák bemutatják a Streak komponens használatát profil oldalon és fejlécben.
import { useState } from 'react';
import Streak from '@/components/Streak/Streak.component';
export default function StreakExamples() {
const [userStreak, setUserStreak] = useState(7);
const [isSmallDisplay, setIsSmallDisplay] = useState(false);
return (
<div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '20px' }}>
<h1>Streak példák</h1>
<h2>Normál méretű streak:</h2>
<Streak streak={userStreak} />
<h2>Kisebb méretű streak (pl. fejlécben):</h2>
<Streak streak={userStreak} small={true} />
<h2>Profil oldalon:</h2>
<div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
<h3>Napi aktivitás</h3>
{userStreak > 0 ? (
<Streak streak={userStreak} />
) : (
<span>Még nincs streakje. Kezdje el még ma!</span>
)}
</div>
<h2>Profile_Button komponensen belül:</h2>
{/* Ahogy a Profile_Button.component.tsx-ben is használva van */}
<div style={{ display: 'flex', alignItems: 'center', border: '1px solid #eee', padding: '5px' }}>
{/* ... Profile_Icon ... */}
<span style={{ marginLeft: '10px' }}>Felhasználó neve</span>
<div style={{ marginLeft: '10px' }}>
<Streak small streak={userStreak} />
</div>
</div>
</div>
);
}
A Streak komponens hatékonyan használható a felhasználói elkötelezettség növelésére, vizuális visszajelzést adva a rendszeres aktivitásról.