website refactor
This commit is contained in:
@@ -47,11 +47,11 @@ export interface SponsorInsightsProps {
|
||||
slots: SponsorshipSlot[];
|
||||
additionalStats?: {
|
||||
label: string;
|
||||
items: Array<{ label: string; value: string | number }>;
|
||||
items: Array<{ label: string; value: string }>;
|
||||
};
|
||||
trustScore?: number;
|
||||
discordMembers?: number;
|
||||
monthlyActivity?: number;
|
||||
trustScoreLabel?: string;
|
||||
discordMembersLabel?: string;
|
||||
monthlyActivityLabel?: string;
|
||||
ctaLabel?: string;
|
||||
ctaHref?: string;
|
||||
currentSponsorId?: string;
|
||||
@@ -67,9 +67,9 @@ export function SponsorInsightsCard({
|
||||
metrics,
|
||||
slots,
|
||||
additionalStats,
|
||||
trustScore,
|
||||
discordMembers,
|
||||
monthlyActivity,
|
||||
trustScoreLabel,
|
||||
discordMembersLabel,
|
||||
monthlyActivityLabel,
|
||||
ctaLabel,
|
||||
ctaHref,
|
||||
currentSponsorId,
|
||||
@@ -111,22 +111,10 @@ export function SponsorInsightsCard({
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const slot = slotTier === 'main' ? mainSlot : secondarySlots[0];
|
||||
const slotPrice = slot?.price ?? 0;
|
||||
|
||||
const request = {
|
||||
sponsorId: currentSponsorId,
|
||||
entityType: getSponsorableEntityType(entityType),
|
||||
entityId,
|
||||
tier: slotTier,
|
||||
offeredAmount: slotPrice * 100,
|
||||
currency: (slot?.currency as 'USD' | 'EUR' | 'GBP') ?? 'USD',
|
||||
message: `Interested in sponsoring ${entityName} as ${slotTier} sponsor.`,
|
||||
};
|
||||
|
||||
console.log('Sponsorship request:', request);
|
||||
setAppliedTiers(prev => new Set([...prev, slotTier]));
|
||||
// Note: In a real app, we would fetch the raw price from the API or a ViewModel
|
||||
// For now, we assume the parent handles the actual request logic
|
||||
onSponsorshipRequested?.(slotTier);
|
||||
setAppliedTiers(prev => new Set([...prev, slotTier]));
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to apply for sponsorship:', err);
|
||||
@@ -134,7 +122,7 @@ export function SponsorInsightsCard({
|
||||
} finally {
|
||||
setApplyingTier(null);
|
||||
}
|
||||
}, [currentSponsorId, ctaHref, entityType, entityId, entityName, onNavigate, mainSlot, secondarySlots, appliedTiers, getSponsorableEntityType, onSponsorshipRequested]);
|
||||
}, [currentSponsorId, ctaHref, entityType, entityId, onNavigate, appliedTiers, onSponsorshipRequested]);
|
||||
|
||||
return (
|
||||
<Card
|
||||
@@ -171,27 +159,27 @@ export function SponsorInsightsCard({
|
||||
})}
|
||||
</Stack>
|
||||
|
||||
{(trustScore !== undefined || discordMembers !== undefined || monthlyActivity !== undefined) && (
|
||||
{(trustScoreLabel || discordMembersLabel || monthlyActivityLabel) && (
|
||||
<Stack display="flex" flexWrap="wrap" gap={4} mb={4} pb={4} borderBottom borderColor="border-charcoal-outline/50">
|
||||
{trustScore !== undefined && (
|
||||
{trustScoreLabel && (
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Shield} size={4} color="rgb(16, 185, 129)" />
|
||||
<Text size="sm" color="text-gray-400">Trust Score:</Text>
|
||||
<Text size="sm" weight="semibold" color="text-white">{trustScore}/100</Text>
|
||||
<Text size="sm" weight="semibold" color="text-white">{trustScoreLabel}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
{discordMembers !== undefined && (
|
||||
{discordMembersLabel && (
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={MessageCircle} size={4} color="rgb(168, 85, 247)" />
|
||||
<Text size="sm" color="text-gray-400">Discord:</Text>
|
||||
<Text size="sm" weight="semibold" color="text-white">{discordMembers.toLocaleString()}</Text>
|
||||
<Text size="sm" weight="semibold" color="text-white">{discordMembersLabel}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
{monthlyActivity !== undefined && (
|
||||
{monthlyActivityLabel && (
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Icon icon={Activity} size={4} color="rgb(0, 255, 255)" />
|
||||
<Text size="sm" color="text-gray-400">Monthly Activity:</Text>
|
||||
<Text size="sm" weight="semibold" color="text-white">{monthlyActivity}%</Text>
|
||||
<Text size="sm" weight="semibold" color="text-white">{monthlyActivityLabel}</Text>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
@@ -206,7 +194,7 @@ export function SponsorInsightsCard({
|
||||
statusColor={mainSlot.available ? 'text-performance-green' : 'text-gray-500'}
|
||||
benefits={mainSlot.benefits.join(' • ')}
|
||||
available={mainSlot.available}
|
||||
price={`$${mainSlot.price.toLocaleString()}/season`}
|
||||
price={mainSlot.priceLabel}
|
||||
action={
|
||||
<Button
|
||||
variant="primary"
|
||||
@@ -240,7 +228,7 @@ export function SponsorInsightsCard({
|
||||
statusColor={availableSecondary > 0 ? 'text-purple-400' : 'text-gray-500'}
|
||||
benefits={secondarySlots[0]?.benefits.join(' • ') || 'Logo placement on page'}
|
||||
available={availableSecondary > 0}
|
||||
price={`$${secondarySlots[0]?.price.toLocaleString()}/season`}
|
||||
price={secondarySlots[0]?.priceLabel}
|
||||
action={
|
||||
<Button
|
||||
variant="secondary"
|
||||
@@ -275,7 +263,7 @@ export function SponsorInsightsCard({
|
||||
<Stack key={index} direction="row" align="center" gap={2}>
|
||||
<Text size="sm" color="text-gray-500">{item.label}:</Text>
|
||||
<Text size="sm" weight="semibold" color="text-white">
|
||||
{typeof item.value === 'number' ? item.value.toLocaleString() : item.value}
|
||||
{item.value}
|
||||
</Text>
|
||||
</Stack>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user