website refactor
This commit is contained in:
208
apps/website/templates/SponsorSettingsTemplate.tsx
Normal file
208
apps/website/templates/SponsorSettingsTemplate.tsx
Normal file
@@ -0,0 +1,208 @@
|
||||
import React from 'react';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Toggle } from '@/ui/Toggle';
|
||||
import { FormField } from '@/ui/FormField';
|
||||
import { SponsorDashboardHeader } from '@/components/sponsors/SponsorDashboardHeader';
|
||||
import {
|
||||
Building2,
|
||||
Save,
|
||||
Bell,
|
||||
AlertCircle,
|
||||
RefreshCw
|
||||
} from 'lucide-react';
|
||||
|
||||
export interface SponsorSettingsViewData {
|
||||
profile: {
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
contactEmail: string;
|
||||
description: string;
|
||||
industry: string;
|
||||
};
|
||||
notifications: {
|
||||
emailNewSponsorships: boolean;
|
||||
emailWeeklyReport: boolean;
|
||||
emailPaymentAlerts: boolean;
|
||||
};
|
||||
privacy: {
|
||||
publicProfile: boolean;
|
||||
showStats: boolean;
|
||||
showActiveSponsorships: boolean;
|
||||
allowDirectContact: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
interface SponsorSettingsTemplateProps {
|
||||
viewData: SponsorSettingsViewData;
|
||||
profile: {
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
contactEmail: string;
|
||||
description: string;
|
||||
industry: string;
|
||||
};
|
||||
setProfile: (profile: {
|
||||
companyName: string;
|
||||
contactName: string;
|
||||
contactEmail: string;
|
||||
description: string;
|
||||
industry: string;
|
||||
}) => void;
|
||||
notifications: {
|
||||
emailNewSponsorships: boolean;
|
||||
emailWeeklyReport: boolean;
|
||||
emailPaymentAlerts: boolean;
|
||||
};
|
||||
setNotifications: (notifications: {
|
||||
emailNewSponsorships: boolean;
|
||||
emailWeeklyReport: boolean;
|
||||
emailPaymentAlerts: boolean;
|
||||
}) => void;
|
||||
onSaveProfile: () => void | Promise<void>;
|
||||
onDeleteAccount: () => void | Promise<void>;
|
||||
saving: boolean;
|
||||
saved: boolean;
|
||||
}
|
||||
|
||||
export function SponsorSettingsTemplate({
|
||||
profile,
|
||||
setProfile,
|
||||
notifications,
|
||||
setNotifications,
|
||||
onSaveProfile,
|
||||
onDeleteAccount,
|
||||
saving,
|
||||
}: SponsorSettingsTemplateProps) {
|
||||
return (
|
||||
<Container size="md" py={8}>
|
||||
<Stack gap={8}>
|
||||
<SponsorDashboardHeader
|
||||
sponsorName={profile.companyName}
|
||||
onRefresh={() => console.log('Refresh')}
|
||||
/>
|
||||
|
||||
<Stack gap={6}>
|
||||
{/* Company Profile */}
|
||||
<Card>
|
||||
<Stack gap={6}>
|
||||
<Heading level={3} icon={<Icon icon={Building2} size={5} color="text-primary-blue" />}>
|
||||
Company Profile
|
||||
</Heading>
|
||||
|
||||
<Box display="grid" gridCols={{ base: 1, md: 2 }} gap={6}>
|
||||
<FormField label="Company Name" required>
|
||||
<Input
|
||||
value={profile.companyName}
|
||||
onChange={(e) => setProfile({ ...profile, companyName: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Industry">
|
||||
<Input
|
||||
value={profile.industry}
|
||||
onChange={(e) => setProfile({ ...profile, industry: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Contact Name" required>
|
||||
<Input
|
||||
value={profile.contactName}
|
||||
onChange={(e) => setProfile({ ...profile, contactName: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Contact Email" required>
|
||||
<Input
|
||||
value={profile.contactEmail}
|
||||
onChange={(e) => setProfile({ ...profile, contactEmail: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
</Box>
|
||||
|
||||
<FormField label="Company Description">
|
||||
<Box
|
||||
as="textarea"
|
||||
rows={4}
|
||||
value={profile.description}
|
||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setProfile({ ...profile, description: e.target.value })}
|
||||
w="full"
|
||||
p={3}
|
||||
rounded="lg"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
bg="bg-iron-gray/50"
|
||||
color="text-white"
|
||||
outline="none"
|
||||
focusBorderColor="border-primary-blue"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<Box display="flex" justifyContent="end">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onSaveProfile}
|
||||
disabled={saving}
|
||||
icon={<Icon icon={saving ? RefreshCw : Save} size={4} animate={saving ? 'spin' : undefined} />}
|
||||
>
|
||||
{saving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Notifications */}
|
||||
<Card>
|
||||
<Stack gap={6}>
|
||||
<Heading level={3} icon={<Icon icon={Bell} size={5} color="text-warning-amber" />}>
|
||||
Notifications
|
||||
</Heading>
|
||||
<Stack gap={4}>
|
||||
<Toggle
|
||||
label="Sponsorship Approvals"
|
||||
description="Receive confirmation when your sponsorship requests are approved"
|
||||
checked={notifications.emailNewSponsorships}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailNewSponsorships: checked })}
|
||||
/>
|
||||
<Toggle
|
||||
label="Weekly Analytics Report"
|
||||
description="Get a weekly summary of your sponsorship performance"
|
||||
checked={notifications.emailWeeklyReport}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailWeeklyReport: checked })}
|
||||
/>
|
||||
<Toggle
|
||||
label="Payment & Invoice Notifications"
|
||||
description="Receive invoices and payment confirmations"
|
||||
checked={notifications.emailPaymentAlerts}
|
||||
onChange={(checked) => setNotifications({ ...notifications, emailPaymentAlerts: checked })}
|
||||
/>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Danger Zone */}
|
||||
<Card border borderColor="border-racing-red/30">
|
||||
<Stack gap={6}>
|
||||
<Heading level={3} color="text-racing-red" icon={<Icon icon={AlertCircle} size={5} color="text-racing-red" />}>
|
||||
Danger Zone
|
||||
</Heading>
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Box>
|
||||
<Text weight="medium" color="text-white" block>Delete Sponsor Account</Text>
|
||||
<Text size="sm" color="text-gray-500">Permanently remove your account and all data.</Text>
|
||||
</Box>
|
||||
<Button variant="danger" onClick={onDeleteAccount}>
|
||||
Delete Account
|
||||
</Button>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user