-
Notifications
You must be signed in to change notification settings - Fork 548
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4 from blockworks-foundation/max/styling
Layout for proposal list
- Loading branch information
Showing
7 changed files
with
277 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const PageBodyContainer = ({ children }) => ( | ||
| <div className="min-h-screen grid grid-cols-12 gap-4 py-10"> | ||
| <div className="col-span-12 px-4 xl:col-start-2 xl:col-span-10"> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| export default PageBodyContainer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import { ChevronRightIcon } from '@heroicons/react/solid' | ||
| import { ClockIcon } from '@heroicons/react/outline' | ||
| import StatusBadge from './StatusBadge' | ||
| import moment from 'moment' | ||
| import { Proposal, ProposalState } from '../models/accounts' | ||
| import BN from 'bn.js' | ||
| import Link from 'next/link' | ||
| import { MintInfo } from '@solana/spl-token' | ||
|
|
||
| export const ProposalStateLabels = { | ||
| 0: 'Draft', | ||
| 1: 'Draft', | ||
| 2: 'Active', | ||
| 3: 'Approved', | ||
| 4: 'Approved', | ||
| 5: 'Approved', | ||
| 6: 'Cancelled', | ||
| 7: 'Denied', | ||
| 8: 'Error', | ||
| } | ||
|
|
||
| type ProposalCardProps = { | ||
| id: string | ||
| proposal: Proposal | ||
| mint: MintInfo | ||
| } | ||
|
|
||
| const votePrecision = 10000 | ||
| const calculatePct = (c: BN, total: BN) => | ||
| c.mul(new BN(votePrecision)).div(total).toNumber() * (100 / votePrecision) | ||
|
|
||
| const fmtUnixTime = (d: BN) => moment.unix(d.toNumber()).fromNow() | ||
|
|
||
| const ProposalCard = ({ id, proposal, mint }: ProposalCardProps) => { | ||
| const yesVotePct = calculatePct(proposal.yesVotesCount, mint.supply) | ||
| const noVotePct = calculatePct(proposal.noVotesCount, mint.supply) | ||
|
|
||
| return ( | ||
| <div> | ||
| <Link href={`/proposal/${id}`}> | ||
| <a> | ||
| <div className="bg-bkg-2 p-6 rounded-md"> | ||
| <div className="flex items-center justify-between"> | ||
| <h3 className="text-fgd-1">{proposal.name}</h3> | ||
| <div className="flex items-center"> | ||
| <StatusBadge status={ProposalStateLabels[proposal.state]} /> | ||
| <ChevronRightIcon className="h-6 ml-2 text-primary-light w-6" /> | ||
| </div> | ||
| </div> | ||
| <div className="flex items-center text-fgd-3 text-sm"> | ||
| <span className="flex items-center"> | ||
| <ClockIcon className="h-4 mr-1.5 w-4" /> | ||
| {proposal.votingCompletedAt | ||
| ? `${ProposalState[proposal.state]} ${fmtUnixTime( | ||
| proposal.votingCompletedAt | ||
| )}` | ||
| : proposal.votingAt | ||
| ? `Proposed ${fmtUnixTime(proposal.votingAt)}` | ||
| : `Drafted ${fmtUnixTime(proposal.draftAt)}`} | ||
| </span> | ||
| </div> | ||
| {proposal.descriptionLink ? ( | ||
| <p className="mt-3">{proposal.descriptionLink}</p> | ||
| ) : null} | ||
|
|
||
| <div className="flex space-x-4 mt-6"> | ||
| <div className="w-1/4">Yes: {yesVotePct}%</div> | ||
| <div className="w-1/4">No: {noVotePct}%</div> | ||
| </div> | ||
| </div> | ||
| </a> | ||
| </Link> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default ProposalCard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { useState, useReducer } from 'react' | ||
| import { ChevronDownIcon } from '@heroicons/react/solid' | ||
| import { Disclosure } from '@headlessui/react' | ||
| import Switch from './Switch' | ||
|
|
||
| const initialFilterSettings = { | ||
| Active: true, | ||
| Approved: true, | ||
| Denied: true, | ||
| } | ||
|
|
||
| const ProposalFilter = () => { | ||
| const [filters, setFilters] = useState([]) | ||
|
|
||
| const [filterSettings, setFilterSettings] = useReducer( | ||
| (state, newState) => ({ ...state, ...newState }), | ||
| initialFilterSettings | ||
| ) | ||
|
|
||
| const handleFilters = (name, checked) => { | ||
| setFilterSettings({ [name]: checked }) | ||
| if (!checked) { | ||
| filters.push(name) | ||
| } else { | ||
| setFilters(filters.filter((n) => n !== name)) | ||
| } | ||
| } | ||
|
|
||
| return ( | ||
| <Disclosure as="div" className="relative"> | ||
| {({ open }) => ( | ||
| <> | ||
| <Disclosure.Button | ||
| className={`border border-fgd-4 default-transition font-normal pl-3 pr-2 py-2.5 rounded-md text-fgd-1 text-sm hover:bg-bkg-3 focus:outline-none`} | ||
| > | ||
| <div className="flex items-center justify-between"> | ||
| Filter | ||
| <ChevronDownIcon | ||
| className={`default-transition h-5 w-5 ml-1 ${ | ||
| open ? 'transform rotate-180' : 'transform rotate-360' | ||
| }`} | ||
| /> | ||
| </div> | ||
| </Disclosure.Button> | ||
| <Disclosure.Panel | ||
| className={`bg-bkg-3 mt-2 p-4 absolute right-0 w-56 z-20 rounded-md text-sm`} | ||
| > | ||
| <div> | ||
| <div className="flex items-center justify-between pb-2"> | ||
| Active | ||
| <Switch | ||
| checked={filterSettings.Active} | ||
| onChange={(checked) => handleFilters('Active', checked)} | ||
| /> | ||
| </div> | ||
| <div className="flex items-center justify-between pb-2"> | ||
| Approved | ||
| <Switch | ||
| checked={filterSettings.Approved} | ||
| onChange={(checked) => handleFilters('Approved', checked)} | ||
| /> | ||
| </div> | ||
| <div className="flex items-center justify-between"> | ||
| Denied | ||
| <Switch | ||
| checked={filterSettings.Denied} | ||
| onChange={(checked) => handleFilters('Denied', checked)} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Disclosure.Panel> | ||
| </> | ||
| )} | ||
| </Disclosure> | ||
| ) | ||
| } | ||
|
|
||
| export default ProposalFilter |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| const StatusBadge = ({ status }) => { | ||
| return ( | ||
| <div className="bg-bkg-3 flex items-center px-2 py-1 rounded-full"> | ||
| <span className="text-fgd-1 text-xs">{status}</span> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default StatusBadge |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import { FunctionComponent } from 'react' | ||
|
|
||
| interface SwitchProps { | ||
| checked: boolean | ||
| className?: string | ||
| onChange: (x) => void | ||
| } | ||
|
|
||
| const Switch: FunctionComponent<SwitchProps> = ({ | ||
| checked = false, | ||
| className = '', | ||
| children, | ||
| onChange, | ||
| }) => { | ||
| const handleClick = () => { | ||
| onChange(!checked) | ||
| } | ||
|
|
||
| return ( | ||
| <div className={`flex items-center ${className}`}> | ||
| <span className="mr-1"> | ||
| <span className="">{children}</span> | ||
| </span> | ||
| <button | ||
| type="button" | ||
| className={`${ | ||
| checked ? 'bg-primary-light' : 'bg-bkg-4' | ||
| } relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent | ||
| rounded-full cursor-pointer transition-colors ease-in-out duration-200 | ||
| focus:outline-none`} | ||
| role="switch" | ||
| aria-checked={checked} | ||
| onClick={handleClick} | ||
| > | ||
| <span className="sr-only">{children}</span> | ||
| <span | ||
| aria-hidden="true" | ||
| className={`${ | ||
| checked ? 'translate-x-5' : 'translate-x-0' | ||
| } pointer-events-none inline-block h-5 w-5 rounded-full bg-white | ||
| shadow transform ring-0 transition ease-in-out duration-200`} | ||
| ></span> | ||
| </button> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Switch |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters