|
|
@@ -1,22 +1,13 @@
|
|
|
import { useMemo } from 'react';
|
|
|
-import type { ReactNode } from 'react';
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
-import { Button, Col, ConfigProvider, Layout, Row, Spin, Tag, Typography } from 'antd';
|
|
|
-import {
|
|
|
- CrownOutlined,
|
|
|
- DashboardOutlined,
|
|
|
- LoginOutlined,
|
|
|
- MenuUnfoldOutlined,
|
|
|
- PlusOutlined,
|
|
|
-} from '@ant-design/icons';
|
|
|
+import { Button, Col, ConfigProvider, Layout, Row, Spin, Typography } from 'antd';
|
|
|
+import { CrownOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
|
|
|
import { useTheme } from '@/hooks/useTheme';
|
|
|
import AppSidebar from '@/layouts/AppSidebar';
|
|
|
import { useSponsorsQuery } from '@/api/queries/useSponsorsQuery';
|
|
|
import SponsorCard from '@/components/sponsor/SponsorCard';
|
|
|
-import { IntlUtil } from '@/utils';
|
|
|
-import { useDatepicker } from '@/hooks/useDatepicker';
|
|
|
-import { placementStatus, sponsorsForSlot, type SponsorSlot } from '@/lib/sponsors';
|
|
|
+import { sponsorsForSlot } from '@/lib/sponsors';
|
|
|
import './SponsorsPage.css';
|
|
|
|
|
|
function BecomeButton({ contact, block }: { contact?: string; block?: boolean }) {
|
|
|
@@ -36,10 +27,10 @@ function BecomeButton({ contact, block }: { contact?: string; block?: boolean })
|
|
|
);
|
|
|
}
|
|
|
|
|
|
-function YourBrandCard({ contact, large }: { contact?: string; large?: boolean }) {
|
|
|
+function YourBrandCard({ contact }: { contact?: string }) {
|
|
|
const { t } = useTranslation();
|
|
|
return (
|
|
|
- <div className={`sponsors-yourbrand${large ? ' is-large' : ''}`}>
|
|
|
+ <div className="sponsors-yourbrand">
|
|
|
<span className="sponsors-yourbrand-icon">
|
|
|
<PlusOutlined />
|
|
|
</span>
|
|
|
@@ -56,34 +47,6 @@ export default function SponsorsPage() {
|
|
|
const { data, fetched } = useSponsorsQuery();
|
|
|
const sponsors = sponsorsForSlot(data.sponsors, 'page');
|
|
|
|
|
|
- const { datepicker } = useDatepicker();
|
|
|
- const placements: { slot: SponsorSlot; icon: ReactNode; title: string; desc: string }[] = [
|
|
|
- {
|
|
|
- slot: 'dashboard',
|
|
|
- icon: <DashboardOutlined />,
|
|
|
- title: t('pages.sponsors.placementDashboard'),
|
|
|
- desc: t('pages.sponsors.placementDashboardDesc'),
|
|
|
- },
|
|
|
- {
|
|
|
- slot: 'sidebar',
|
|
|
- icon: <MenuUnfoldOutlined />,
|
|
|
- title: t('pages.sponsors.placementSidebar'),
|
|
|
- desc: t('pages.sponsors.placementSidebarDesc'),
|
|
|
- },
|
|
|
- {
|
|
|
- slot: 'login',
|
|
|
- icon: <LoginOutlined />,
|
|
|
- title: t('pages.sponsors.placementLogin'),
|
|
|
- desc: t('pages.sponsors.placementLoginDesc'),
|
|
|
- },
|
|
|
- {
|
|
|
- slot: 'page',
|
|
|
- icon: <CrownOutlined />,
|
|
|
- title: t('pages.sponsors.placementPage'),
|
|
|
- desc: t('pages.sponsors.placementPageDesc'),
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
const pageClass = useMemo(() => {
|
|
|
const classes = ['sponsors-page'];
|
|
|
if (isDark) classes.push('is-dark');
|
|
|
@@ -110,63 +73,17 @@ export default function SponsorsPage() {
|
|
|
|
|
|
<Spin spinning={!fetched} delay={200}>
|
|
|
{sponsors.length === 0 ? (
|
|
|
- fetched && <YourBrandCard contact={data.contact} large />
|
|
|
+ fetched && <YourBrandCard contact={data.contact} />
|
|
|
) : (
|
|
|
<Row gutter={[16, 16]}>
|
|
|
{sponsors.map((sponsor) => (
|
|
|
- <Col key={sponsor.id} xs={24} sm={12} xl={8}>
|
|
|
+ <Col key={sponsor.id} xs={24} lg={12}>
|
|
|
<SponsorCard sponsor={sponsor} variant="card" />
|
|
|
</Col>
|
|
|
))}
|
|
|
- {data.contact && (
|
|
|
- <Col xs={24} sm={12} xl={8}>
|
|
|
- <YourBrandCard contact={data.contact} />
|
|
|
- </Col>
|
|
|
- )}
|
|
|
</Row>
|
|
|
)}
|
|
|
</Spin>
|
|
|
-
|
|
|
- <Typography.Title level={5} className="sponsors-section-title">
|
|
|
- {t('pages.sponsors.placements')}
|
|
|
- </Typography.Title>
|
|
|
- <Row gutter={[16, 16]}>
|
|
|
- {placements.map((p) => {
|
|
|
- const status = placementStatus(data.sponsors, p.slot);
|
|
|
- return (
|
|
|
- <Col key={p.slot} xs={24} sm={12} xl={6}>
|
|
|
- <div className="sponsors-placement">
|
|
|
- <span className="sponsors-placement-icon">{p.icon}</span>
|
|
|
- <div className="sponsors-placement-body">
|
|
|
- <div className="sponsors-placement-title">{p.title}</div>
|
|
|
- <div className="sponsors-placement-desc">{p.desc}</div>
|
|
|
- <div className="sponsors-placement-status">
|
|
|
- {status.takenUntil ? (
|
|
|
- <Tag color="orange">
|
|
|
- {t('pages.sponsors.takenUntil', {
|
|
|
- date: IntlUtil.formatDate(status.takenUntil, datepicker),
|
|
|
- })}
|
|
|
- </Tag>
|
|
|
- ) : (
|
|
|
- <Tag color="green">{t('pages.sponsors.available')}</Tag>
|
|
|
- )}
|
|
|
- {status.count > 0 && !status.takenUntil && (
|
|
|
- <Tag>
|
|
|
- {t('pages.sponsors.activeCount', {
|
|
|
- count:
|
|
|
- status.capacity && status.capacity > 1
|
|
|
- ? `${status.count}/${status.capacity}`
|
|
|
- : status.count,
|
|
|
- })}
|
|
|
- </Tag>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Col>
|
|
|
- );
|
|
|
- })}
|
|
|
- </Row>
|
|
|
</div>
|
|
|
</Layout.Content>
|
|
|
</Layout>
|