1  import { Box, Stack, Typography } from '@mui/material';
 2  import dayjs from 'dayjs';
 3  import relativeTime from 'dayjs/plugin/relativeTime';
 4  import { Link, ROUTES } from 'src/components/primitives/Link';
 5  import { Proposal } from 'src/hooks/governance/useProposals';
 6  import { useRootStore } from 'src/store/root';
 7  import { GOVERNANCE_PAGE } from 'src/utils/mixPanelEvents';
 8  
 9  import { StateBadge } from './StateBadge';
10  import { VoteBar } from './VoteBar';
11  
12  dayjs.extend(relativeTime);
13  
14  export const ProposalV3ListItem = ({ proposal }: { proposal: Proposal }) => {
15    const trackEvent = useRootStore((store) => store.trackEvent);
16    return (
17      <Box
18        sx={{
19          p: 6,
20          display: 'flex',
21          flexWrap: 'wrap',
22          justifyContent: 'space-between',
23          borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
24        }}
25        component={Link}
26        onClick={() => trackEvent(GOVERNANCE_PAGE.VIEW_AIP, { AIP: proposal.subgraphProposal.id })}
27        href={ROUTES.dynamicRenderedProposal(+proposal.subgraphProposal.id)}
28      >
29        <Stack
30          direction="column"
31          gap={2}
32          sx={{
33            width: {
34              xs: '100%',
35              lg: '70%',
36            },
37            pr: { xs: 0, lg: 8 },
38            display: 'flex',
39            flexDirection: 'column',
40            justifyContent: 'space-between',
41          }}
42        >
43          <Stack direction="row" gap={3} alignItems="center">
44            <StateBadge state={proposal.badgeState} loading={false} />
45          </Stack>
46          <Typography variant="h3" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
47            {proposal.subgraphProposal.proposalMetadata.title}
48          </Typography>
49        </Stack>
50        <Stack
51          flexGrow={1}
52          direction="column"
53          justifyContent="center"
54          sx={{
55            pl: { xs: 0, lg: 18 },
56            mt: { xs: 7, lg: 0 },
57          }}
58        >
59          <VoteBar
60            yae
61            percent={proposal.votingInfo.forPercent}
62            votes={proposal.votingInfo.forVotes}
63            sx={{ mb: 4 }}
64            compact
65          />
66          <VoteBar
67            percent={proposal.votingInfo.againstPercent}
68            votes={proposal.votingInfo.againstVotes}
69            compact
70          />
71        </Stack>
72      </Box>
73    );
74  };