Loyaly/loyalyweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update about us, for business pages, and for-people components

Browse Source
This commit is contained in:
R-Bharathraj
2026-07-16 17:32:43 +05:30
parent b627126713
commit 88ca87e3cc
20 changed files with 572 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/for-people/FpCard.tsx
View File

@@ -23,22 +23,25 @@ const DEFAULT_ICON_BG: Record<Theme, string> = {
};
const sora = 'Sora, sans-serif';
const GOLD = '#f4be28';
interface TagCardProps {
theme?: Theme;
icon: React.ReactNode;
/** Icon-badge background; falls back to the theme's gold tint. */
iconBg?: string;
/** Icon tint — icons draw in `currentColor`. Falls back to the theme's gold. */
iconColor?: string;
children: React.ReactNode;
className?: string;
style?: React.CSSProperties;
}
/** Compact icon + label pill (radius 12). */
export function FpTagCard({ theme = 'light', icon, iconBg, children, className = '', style }: TagCardProps) {
export function FpTagCard({ theme = 'light', icon, iconBg, iconColor, children, className = '', style }: TagCardProps) {
return (
<div className={`fp-card ${themeClass[theme]} ${className}`.trim()} style={style}>
<span className="fp-card-icon" style={{ background: iconBg ?? DEFAULT_ICON_BG[theme] }}>{icon}</span>
<span className="fp-card-icon" style={{ background: iconBg ?? DEFAULT_ICON_BG[theme], color: iconColor ?? GOLD }}>{icon}</span>
<span style={{
fontSize: 13, fontWeight: 700, fontFamily: sora, letterSpacing: '-0.01em',
whiteSpace: 'nowrap', color: theme === 'light' ? '#171512' : '#fff',
@@ -54,6 +57,8 @@ interface StatCardProps {
layout?: 'row' | 'column';
icon: React.ReactNode;
iconBg?: string;
/** Icon tint — icons draw in `currentColor`. Falls back to the theme's gold. */
iconColor?: string;
/** May be a plain node or a count-up <span> ref. */
value: React.ReactNode;
label: string;
@@ -65,7 +70,7 @@ interface StatCardProps {
/** Larger icon + value + label card (radius 20). */
export function FpStatCard({
theme = 'light', layout = 'column', icon, iconBg, value, label, color, className = '', style,
theme = 'light', layout = 'column', icon, iconBg, iconColor, value, label, color, className = '', style,
}: StatCardProps) {
const dark = theme !== 'light';
const column = layout === 'column';
@@ -74,7 +79,7 @@ export function FpStatCard({
className={`fp-card fp-card--stat ${themeClass[theme]} ${className}`.trim()}
style={{ flexDirection: column ? 'column' : 'row', alignItems: 'center', ...style }}
>
<span className="fp-card-icon fp-card-icon--lg" style={{ background: iconBg ?? DEFAULT_ICON_BG[theme] }}>{icon}</span>
<span className="fp-card-icon fp-card-icon--lg" style={{ background: iconBg ?? DEFAULT_ICON_BG[theme], color: iconColor ?? GOLD }}>{icon}</span>
<div style={{ textAlign: column ? 'center' : 'left' }}>
<div style={{
fontSize: column ? 'clamp(20px, 2.4vw, 26px)' : 18, fontWeight: 900, fontFamily: sora,