react-feather#ChevronLeft TypeScript Examples
The following examples show how to use
react-feather#ChevronLeft.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Pagination.tsx From ke with MIT License | 5 votes |
|
Pagination = makeWithLayout(({ value: page, onChange, totalCount }: PaginationProps) => {
const isFirst = page === 1
const isLast = page === totalCount
return {
ToFirst: (
<PaginationButton
aria-label="На первую страницу"
disabled={isFirst || totalCount === 0}
onClick={() => onChange(1)}
>
<ChevronsLeft />
</PaginationButton>
),
ToPrev: (
<PaginationButton
aria-label="На предыдущую страницу"
disabled={isFirst || totalCount === 0}
onClick={() => onChange(page > 1 ? page - 1 : 1)}
>
<ChevronLeft />
</PaginationButton>
),
Pages: `${page} / ${totalCount}`,
ToNext: (
<PaginationButton
aria-label="На следующую страницу"
disabled={isLast || totalCount === 0}
onClick={() => onChange(page < totalCount ? page + 1 : page)}
>
<ChevronRight />
</PaginationButton>
),
ToLast: (
<PaginationButton
aria-label="На последнюю страницу"
disabled={isLast || totalCount === 0}
onClick={() => onChange(totalCount)}
>
<ChevronsRight />
</PaginationButton>
),
}
}, PaginationLayout)
Example #2
| Source File: SideMenu.tsx From sybil-interface with GNU General Public License v3.0 | 4 votes |
|
export default function SideMenu(): JSX.Element {
const [open, setOpen] = useState(false)
const [faqOpen, setfaqOpen] = useState(false)
const [activeProtocol] = useActiveProtocol()
function closeBoth() {
setOpen(!open)
setfaqOpen(false)
}
return (
<>
<MobileHeader>
<RowBetween>
<BlankInternalLink to="/">
<RowFixed style={{ gap: '8px' }}>
<SybilLogo />
<SybilWorkmark>sybil</SybilWorkmark>
</RowFixed>
</BlankInternalLink>
<ExternalLink href="https://github.com/Uniswap/sybil-list">
<GitHub size={20} style={{ stroke: 'black' }} />
</ExternalLink>
</RowBetween>
</MobileHeader>
<Wrapper open={open} onClick={() => !open && setOpen(!open)}>
<AutoColumn gap="24px">
<div style={{ padding: '0 1.25rem', height: '28px' }}>
{!open ? (
<SybilLogo />
) : (
<RowBetween align="flex-start">
<RowFixed style={{ gap: '8px' }}>
<SybilLogo />
<SybilWorkmark>sybil</SybilWorkmark>
</RowFixed>
<ButtonBasic
onClick={() => closeBoth()}
style={{ cursor: 'pointer', backgroundColor: 'rgba(255,255,255,0.4)', color: '#000' }}
>
<ChevronLeft />
</ButtonBasic>
</RowBetween>
)}
</div>
<div style={{ padding: '0 1.25rem' }}>
<Break />
</div>
{Object.values(SUPPORTED_PROTOCOLS).map((p) => (
<BlankInternalLink key={p.id + '-image-id'} to={'/delegates/' + p.id}>
<HoverRow
onClick={(e) => {
e.stopPropagation()
setOpen(false)
}}
>
<div
style={{
height: '30px',
backgroundColor: activeProtocol?.id === p.id ? activeProtocol?.primaryColor : 'transparent',
width: '2px',
}}
/>
<div style={{ padding: '0 1.25rem', marginLeft: '-2px' }}>
<RowFixed>
<WrappedListLogo src={p.logo} color={p.primaryColor} />
{open && (
<TYPE.mediumHeader fontSize="16px" ml={'12px'} color={p.primaryColor}>
{p.name}
</TYPE.mediumHeader>
)}
</RowFixed>
</div>
</HoverRow>
</BlankInternalLink>
))}
</AutoColumn>
{!faqOpen ? (
<AutoColumn gap="16px" style={{ justifySelf: 'flex-end', alignItems: 'flex-start', padding: '0 1.25rem' }}>
<ButtonBasic
as={ExternalLink}
href="https://github.com/Uniswap/sybil-list"
style={{ backgroundColor: 'rgba(255,255,255,0.4)', color: '#000', gap: 12, padding: 0 }}
>
<GitHub size={20} />
</ButtonBasic>
<ButtonBasic
onClick={() => setfaqOpen(!faqOpen)}
href="https://github.com/Uniswap/sybil-list"
style={{ backgroundColor: 'rgba(255,255,255,0.4)', color: '#000', padding: 0 }}
>
<HelpCircle size={20} />
</ButtonBasic>
{open && (
<AutoColumn gap="1rem" style={{ justifySelf: 'flex-start' }}>
<TYPE.black style={{ lineHeight: '125%', fontWeight: 400, fontSize: '12px', padding: 0 }}>
A{' '}
<ExternalLink style={{ color: '#ff007a' }} href="https://uniswap.org/">
Uniswap
</ExternalLink>{' '}
Project
</TYPE.black>
</AutoColumn>
)}
</AutoColumn>
) : (
<RowBetween style={{ padding: '0 1rem' }}>
<ButtonBasic
onClick={() => setfaqOpen(!faqOpen)}
href="https://GitHub.com/Uniswap/sybil-list"
style={{ backgroundColor: 'rgba(255,255,255,0.4)', color: '#000', gap: 12 }}
>
<HelpCircle size={20} />
<TYPE.black style={{ lineHeight: '125%', fontWeight: 400 }}>Help and Info</TYPE.black>
</ButtonBasic>
<ButtonBasic
onClick={() => setfaqOpen(!faqOpen)}
style={{ cursor: 'pointer', backgroundColor: 'rgba(255,255,255,0.4)', color: '#000' }}
>
<X />
</ButtonBasic>
</RowBetween>
)}
{faqOpen && (
<AutoColumn gap="1.5rem" style={{ padding: '0 1.25rem' }}>
<AutoColumn gap="0.5rem">
<TYPE.body fontWeight={600}>Why build Sybil?</TYPE.body>
<TYPE.main>
We wanted to support various Ethereum governance initiatives and found it hard to find potential
delegates or no easy way to delegate our vote. Sybil is our contribution to help everyone in the
ecosystem.
</TYPE.main>
</AutoColumn>
<AutoColumn gap="0.5rem">
<TYPE.body fontWeight={600}>I don’t have Twitter, can I use Sybil?</TYPE.body>
<TYPE.main>
At the moment Sybil is Twitter only, but the architecture allows arbitrary services to act as
authentication methods. We are planning to add GitHub soon and feel free to suggest others in our
<ExternalLink href="https://github.com/Uniswap/sybil-interface#adding-protocol-support">
repo
</ExternalLink>
.
</TYPE.main>
</AutoColumn>
<AutoColumn gap="0.5rem">
<TYPE.body fontWeight={600}>Is Sybil only for governance?</TYPE.body>
<TYPE.main>
Since the mapping of wallets to identities is public, you can easily use it to show identities anywhere.
In fact, you don’t even have to use Sybil through this interface! Check out the documentation for how to
set up a similar system.
</TYPE.main>
</AutoColumn>
</AutoColumn>
)}
</Wrapper>
</>
)
}
Example #3
| Source File: Bottom.tsx From ke with MIT License | 4 votes |
|
Bottom = (props: BottonProps): JSX.Element => {
const {
resourceName,
pageIndex,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
} = props
return (
<Flex
borderTopWidth="1px"
overflowX="hidden"
overflowY="hidden"
p={4}
bg="white"
roundedBottomLeft={4}
roundedBottomRight={4}
justifyContent="space-between"
flexDirection="row"
>
<Flex flexDirection="row">
<TableIconButton
mr={2}
onClick={() => {
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_first_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: undefined,
resource: resourceName,
viewType: 'list_view',
...props,
})
gotoPage(0)
}}
isDisabled={!canPreviousPage}
icon={<ChevronsLeft size={20} />}
/>
<TableIconButton
mr={2}
isDisabled={!canPreviousPage}
onClick={() => {
previousPage()
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_previous_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: pageIndex - 1,
resource: resourceName,
viewType: 'list_view',
...props,
})
}}
icon={<ChevronLeft size={20} />}
/>
</Flex>
<Flex justifyContent="center" alignItems="center">
<Text mr={4}>
Страница{' '}
<strong>
{pageIndex + 1} из {pageOptions.length}
</strong>{' '}
</Text>
</Flex>
<Flex flexDirection="row">
<TableIconButton
ml={2}
isDisabled={!canNextPage}
onClick={() => {
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_next_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: pageIndex + 1,
resource: resourceName,
viewType: 'list_view',
...props,
})
nextPage()
}}
icon={<ChevronRight size={20} />}
/>
<TableIconButton
ml={2}
onClick={() => {
const lastPage = pageCount ? pageCount - 1 : 1
pushAnalytics({
eventName: EventNameEnum.BUTTON_CLICK,
widgetName: 'table_pagination_goto_last_page',
widgetType: WidgetTypeEnum.PAGINATION,
value: lastPage,
resource: resourceName,
viewType: 'list_view',
...props,
})
gotoPage(lastPage)
}}
isDisabled={!canNextPage}
icon={<ChevronsRight size={20} />}
/>
</Flex>
</Flex>
)
}
