switch markets via base asset drop menu
This commit is contained in:
saml33
parent
0fee53534b
commit
f06d14d8f6
|
|
@ -0,0 +1,97 @@
|
|||
import { useRef, useState } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import { Popover } from '@headlessui/react'
|
||||
import { ChevronDownIcon } from '@heroicons/react/solid'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function MarketMenuItem({ menuTitle = '', linksArray = [] }) {
|
||||
const { asPath } = useRouter()
|
||||
const buttonRef = useRef(null)
|
||||
const [openState, setOpenState] = useState(false)
|
||||
|
||||
const toggleMenu = () => {
|
||||
setOpenState((openState) => !openState)
|
||||
buttonRef?.current?.click()
|
||||
}
|
||||
|
||||
const onHover = (open, action) => {
|
||||
if (
|
||||
(!open && !openState && action === 'onMouseEnter') ||
|
||||
(open && openState && action === 'onMouseLeave')
|
||||
) {
|
||||
toggleMenu()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = (open) => {
|
||||
setOpenState(!open)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<div
|
||||
onMouseEnter={() => onHover(open, 'onMouseEnter')}
|
||||
onMouseLeave={() => onHover(open, 'onMouseLeave')}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<Popover.Button className="focus:outline-none" ref={buttonRef}>
|
||||
<div
|
||||
className="flex items-center px-2.5 py-1 text-th-fgd-3 hover:text-th-primary"
|
||||
onClick={() => handleClick(open)}
|
||||
>
|
||||
{/* <img
|
||||
alt=""
|
||||
src={`/assets/icons/${menuTitle.toLowerCase()}.svg`}
|
||||
className={`mr-1.5 h-4 w-auto`}
|
||||
/> */}
|
||||
<span
|
||||
className={`font-normal text-xs ${
|
||||
asPath.includes(menuTitle) && 'text-th-primary'
|
||||
}`}
|
||||
>
|
||||
{menuTitle}
|
||||
</span>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'transform rotate-180' : 'transform rotate-360'
|
||||
} h-4 w-4 default-transition
|
||||
`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Popover.Panel className="absolute top-4 z-10">
|
||||
<div className="relative bg-th-bkg-3 divide-y divide-th-fgd-4 px-3 pt-4 rounded">
|
||||
{linksArray.map((m) => (
|
||||
<Link
|
||||
href={`/${
|
||||
m.name.slice(-4) === 'PERP' ? 'perp' : 'spot'
|
||||
}/${m.name.slice(0, -5)}`}
|
||||
key={m.name}
|
||||
>
|
||||
<a
|
||||
className={`block py-2 text-th-fgd-1 text-xs hover:text-th-primary ${
|
||||
asPath.includes(menuTitle)
|
||||
? (asPath.includes('perp') &&
|
||||
m.name.slice(-4) === 'PERP') ||
|
||||
(asPath.includes('spot') &&
|
||||
m.name.slice(-4) === 'USDC')
|
||||
? 'text-th-primary'
|
||||
: 'text-th-fgd-1'
|
||||
: null
|
||||
}`}
|
||||
>
|
||||
{m.name}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</div>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,10 +1,8 @@
|
|||
import { useState } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import { RadioGroup } from '@headlessui/react'
|
||||
// import { MenuAlt1Icon } from '@heroicons/react/solid'
|
||||
// import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import useMangoGroupConfig from '../hooks/useMangoGroupConfig'
|
||||
import useMangoStore from '../stores/useMangoStore'
|
||||
import { getMarketByBaseSymbolAndKind } from '@blockworks-foundation/mango-client'
|
||||
import MarketMenuItem from './MarketMenuItem'
|
||||
|
||||
const StyledMarketTypeToggleWrapper = styled.div`
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
|
|
@ -16,6 +14,7 @@ const StyledArrow = styled.div`
|
|||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
border-left: 20px solid rgba(255, 255, 255, 0.12);
|
||||
padding-right: 0.5rem;
|
||||
`
|
||||
|
||||
const MarketSelect = () => {
|
||||
|
|
@ -23,85 +22,39 @@ const MarketSelect = () => {
|
|||
// 'lastViewedMarket',
|
||||
// { baseSymbol: 'BTC', kind: 'spot' }
|
||||
// )
|
||||
const [marketType, setMarketType] = useState('spot')
|
||||
const groupConfig = useMangoGroupConfig()
|
||||
const selectedMarket = useMangoStore((s) => s.selectedMarket.config)
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
|
||||
const handleChange = (symbol, kind) => {
|
||||
const newMarket = getMarketByBaseSymbolAndKind(groupConfig, symbol, kind)
|
||||
setMangoStore((state) => {
|
||||
state.selectedMarket.current = null
|
||||
state.selectedMarket.config = newMarket
|
||||
})
|
||||
// setLastViewedMarket({ baseSymbol: symbol, kind: kind })
|
||||
}
|
||||
|
||||
const markets =
|
||||
marketType === 'perp' ? groupConfig.perpMarkets : groupConfig.spotMarkets
|
||||
const markets = []
|
||||
const allMarkets = [...groupConfig.perpMarkets, ...groupConfig.spotMarkets]
|
||||
allMarkets.forEach((market) => {
|
||||
const base = market.name.slice(0, -5)
|
||||
const found = markets.find((b) => b.baseAsset === base)
|
||||
console.log(found)
|
||||
if (!found) {
|
||||
markets.push({ baseAsset: base, markets: [market] })
|
||||
} else {
|
||||
found.markets.push(market)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="bg-th-bkg-3 flex h-10">
|
||||
<StyledMarketTypeToggleWrapper className="flex items-center pl-6 md:pl-9 pr-1">
|
||||
<RadioGroup
|
||||
value={marketType}
|
||||
onChange={(t) => setMarketType(t)}
|
||||
className="flex font-bold rounded-md text-xs w-30"
|
||||
>
|
||||
<RadioGroup.Option value="spot" className="flex-1 focus:outline-none">
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked
|
||||
? 'bg-th-primary text-th-bkg-1'
|
||||
: 'bg-th-bkg-2 hover:bg-th-bkg-1'
|
||||
} rounded-r-none text-th-fgd-3 text-center py-1 px-2.5 h-full w-full focus:outline-none`}
|
||||
>
|
||||
Spot
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
<RadioGroup.Option value="perp" className="flex-1 focus:outline-none">
|
||||
{({ checked }) => (
|
||||
<button
|
||||
className={`${
|
||||
checked
|
||||
? 'bg-th-primary text-th-bkg-1'
|
||||
: 'bg-th-bkg-2 hover:bg-th-bkg-1'
|
||||
} rounded-l-none text-th-fgd-3 text-center py-1 px-2.5 h-full w-full focus:outline-none`}
|
||||
>
|
||||
Perp
|
||||
</button>
|
||||
)}
|
||||
</RadioGroup.Option>
|
||||
</RadioGroup>
|
||||
{/* <MenuAlt1Icon className="h-5 w-5 text-th-fgd-1" /> */}
|
||||
<span className="text-th-fgd-3 text-xs">MARKETS</span>
|
||||
</StyledMarketTypeToggleWrapper>
|
||||
<StyledArrow />
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center">
|
||||
{markets.map((s) => (
|
||||
<div
|
||||
className={`cursor-pointer default-transition flex font-bold px-4 text-xs hover:text-th-primary
|
||||
${
|
||||
selectedMarket.name === s.name
|
||||
? `text-th-primary`
|
||||
: `text-th-fgd-3`
|
||||
}
|
||||
`}
|
||||
onClick={() => handleChange(s.baseSymbol, marketType)}
|
||||
key={s.publicKey.toBase58()}
|
||||
>
|
||||
{s.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mr-10 text-xs">
|
||||
<a
|
||||
href="https://usdt.mango.markets"
|
||||
className="text-primary default-transition underline hover:text-th-primary hover:no-underline border-1"
|
||||
>
|
||||
Go to Mango V1
|
||||
</a>
|
||||
{markets
|
||||
.sort((a, b) => a.baseAsset.localeCompare(b.baseAsset))
|
||||
.map((s) => (
|
||||
<MarketMenuItem
|
||||
key={s.baseAsset}
|
||||
linksArray={s.markets}
|
||||
menuTitle={s.baseAsset}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
import { useRef, useState } from 'react'
|
||||
import { Popover } from '@headlessui/react'
|
||||
import { ChevronDownIcon } from '@heroicons/react/solid'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function NavDropMenu({ menuTitle = '', linksArray = [] }) {
|
||||
const buttonRef = useRef(null)
|
||||
const [openState, setOpenState] = useState(false)
|
||||
|
||||
const toggleMenu = () => {
|
||||
setOpenState((openState) => !openState)
|
||||
buttonRef?.current?.click()
|
||||
}
|
||||
|
||||
const onHover = (open, action) => {
|
||||
if (
|
||||
(!open && !openState && action === 'onMouseEnter') ||
|
||||
(open && openState && action === 'onMouseLeave')
|
||||
) {
|
||||
toggleMenu()
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = (open) => {
|
||||
setOpenState(!open)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="">
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<div
|
||||
onMouseEnter={() => onHover(open, 'onMouseEnter')}
|
||||
onMouseLeave={() => onHover(open, 'onMouseLeave')}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<Popover.Button className="focus:outline-none" ref={buttonRef}>
|
||||
<div
|
||||
className="flex items-center text-th-fgd-1 hover:text-th-primary"
|
||||
onClick={() => handleClick(open)}
|
||||
>
|
||||
<span className="font-bold">{menuTitle}</span>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'transform rotate-180' : 'transform rotate-360'
|
||||
} h-5 w-5 default-transition
|
||||
`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
</Popover.Button>
|
||||
<Popover.Panel className="absolute top-4 z-10">
|
||||
<div className="relative bg-th-bkg-2 divide-y divide-th-bkg-3 px-4 pt-4 rounded">
|
||||
{linksArray.map(([name, href, isExternal]) =>
|
||||
!isExternal ? (
|
||||
<Link href={href}>
|
||||
<a className="block py-3 text-th-fgd-1 whitespace-nowrap hover:text-th-primary">
|
||||
{name}
|
||||
</a>
|
||||
</Link>
|
||||
) : (
|
||||
<a
|
||||
className="block py-3 text-th-fgd-1 whitespace-nowrap hover:text-th-primary"
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{name}
|
||||
</a>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</div>
|
||||
)}
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import ThemeSwitch from './ThemeSwitch'
|
|||
import useMangoStore from '../stores/useMangoStore'
|
||||
import ConnectWalletButton from './ConnectWalletButton'
|
||||
import AlertsList from './AlertsList'
|
||||
import NavDropMenu from './NavDropMenu'
|
||||
|
||||
const TopBar = () => {
|
||||
const connected = useMangoStore((s) => s.wallet.connected)
|
||||
|
|
@ -33,6 +34,15 @@ const TopBar = () => {
|
|||
{/* <MenuItem href="/alerts">Alerts</MenuItem>
|
||||
<MenuItem href="/stats">Stats</MenuItem> */}
|
||||
<MenuItem href="https://docs.mango.markets/">Learn</MenuItem>
|
||||
{/* TODO: change v2 link before mainnet */}
|
||||
<NavDropMenu
|
||||
menuTitle="More"
|
||||
// linksArray: [name: string, href: string, isExternal: boolean]
|
||||
linksArray={[
|
||||
['Mango v1', 'https://usdt.mango.markets', true],
|
||||
['Mango v2', 'https://trade.mango.markets', true],
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
|
|
|
|||
|
|
@ -15,4 +15,13 @@ module.exports = withBundleAnalyzer({
|
|||
|
||||
return config
|
||||
},
|
||||
async redirects() {
|
||||
return [
|
||||
{
|
||||
source: '/',
|
||||
destination: '/spot/btc',
|
||||
permanent: false,
|
||||
},
|
||||
]
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import useMangoGroupConfig from '../../hooks/useMangoGroupConfig'
|
||||
import useMangoStore from '../../stores/useMangoStore'
|
||||
import { getMarketByBaseSymbolAndKind } from '@blockworks-foundation/mango-client'
|
||||
import TopBar from '../../components/TopBar'
|
||||
import TradePageGrid from '../../components/TradePageGrid'
|
||||
import MarketSelect from '../../components/MarketSelect'
|
||||
import MarketHeader from '../../components/MarketHeader'
|
||||
|
||||
const PerpMarket = () => {
|
||||
const groupConfig = useMangoGroupConfig()
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
const router = useRouter()
|
||||
const { market } = router.query
|
||||
|
||||
useEffect(() => {
|
||||
if (market) {
|
||||
const newMarket = getMarketByBaseSymbolAndKind(
|
||||
groupConfig,
|
||||
market.toString().toUpperCase(),
|
||||
'perp'
|
||||
)
|
||||
setMangoStore((state) => {
|
||||
state.selectedMarket.current = null
|
||||
state.selectedMarket.config = newMarket
|
||||
})
|
||||
}
|
||||
}, [market])
|
||||
|
||||
return (
|
||||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
|
||||
<TopBar />
|
||||
<MarketSelect />
|
||||
<MarketHeader />
|
||||
<div className={`min-h-screen p-1 sm:px-2 sm:py-1 md:px-6 md:py-1`}>
|
||||
<TradePageGrid />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PerpMarket
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import { useEffect } from 'react'
|
||||
import { useRouter } from 'next/router'
|
||||
import useMangoGroupConfig from '../../hooks/useMangoGroupConfig'
|
||||
import useMangoStore from '../../stores/useMangoStore'
|
||||
import { getMarketByBaseSymbolAndKind } from '@blockworks-foundation/mango-client'
|
||||
import TopBar from '../../components/TopBar'
|
||||
import TradePageGrid from '../../components/TradePageGrid'
|
||||
import MarketSelect from '../../components/MarketSelect'
|
||||
import MarketHeader from '../../components/MarketHeader'
|
||||
import AlphaModal from '../../components/AlphaModal'
|
||||
import useLocalStorageState from '../../hooks/useLocalStorageState'
|
||||
|
||||
const SpotMarket = () => {
|
||||
const [alphaAccepted] = useLocalStorageState('mangoAlphaAccepted-2.0', false)
|
||||
const groupConfig = useMangoGroupConfig()
|
||||
const setMangoStore = useMangoStore((s) => s.set)
|
||||
const router = useRouter()
|
||||
const { market } = router.query
|
||||
|
||||
useEffect(() => {
|
||||
if (market) {
|
||||
const newMarket = getMarketByBaseSymbolAndKind(
|
||||
groupConfig,
|
||||
market.toString().toUpperCase(),
|
||||
'spot'
|
||||
)
|
||||
setMangoStore((state) => {
|
||||
state.selectedMarket.current = null
|
||||
state.selectedMarket.config = newMarket
|
||||
})
|
||||
}
|
||||
}, [market])
|
||||
|
||||
return (
|
||||
<div className={`bg-th-bkg-1 text-th-fgd-1 transition-all `}>
|
||||
<TopBar />
|
||||
<MarketSelect />
|
||||
<MarketHeader />
|
||||
<div className={`min-h-screen p-1 sm:px-2 sm:py-1 md:px-6 md:py-1`}>
|
||||
<TradePageGrid />
|
||||
</div>
|
||||
{!alphaAccepted && (
|
||||
<AlphaModal isOpen={!alphaAccepted} onClose={() => {}} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SpotMarket
|
||||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800"><defs><path id="a" d="M0 0h800v800H0z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><g clip-path="url(#b)"><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="-597.355" y1="900.686" x2="-598.099" y2="900.06" gradientTransform="matrix(776 0 0 -776 464237 699089)"><stop offset="0" stop-color="#b6509e"/><stop offset="1" stop-color="#2ebac6"/></linearGradient><circle cx="400" cy="400" r="388" fill="url(#c)"/><path d="M569.8 554.6L438.6 237.4c-7.4-16.4-18.4-24.4-32.9-24.4h-11.6c-14.5 0-25.5 8-32.9 24.4l-57.1 138.2h-43.2c-12.9.1-23.4 10.5-23.5 23.5v.3c.1 12.9 10.6 23.4 23.5 23.5h23.2l-54.5 131.7c-1 2.9-1.6 5.9-1.6 9 0 7.4 2.3 13.2 6.4 17.7s10 6.7 17.4 6.7c4.9-.1 9.6-1.6 13.5-4.5 4.2-2.9 7.1-7.1 9.4-11.9l60-148.8h41.6c12.9-.1 23.4-10.5 23.5-23.5v-.6c-.1-12.9-10.6-23.4-23.5-23.5h-22.2l45.8-114.1 124.8 310.4c2.3 4.8 5.2 9 9.4 11.9 3.9 2.9 8.7 4.4 13.5 4.5 7.4 0 13.2-2.2 17.4-6.7 4.2-4.5 6.4-10.3 6.4-17.7.1-3-.4-6.1-1.6-8.9z" fill="#fff"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 35 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 55 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g clip-path="url(#clip0)"><path d="M51.89 13.977L35.325 30.54 13.874 51.989l.05 33.833 33.833.05 16.569-16.57 21.447-21.446.101-33.986-33.984.107zm1.197 2.876l27.855-.083L65.17 32.542H37.4l15.687-15.689zM32.441 37.499v27.77L16.799 80.91l-.043-27.726 15.685-15.685zm14.123 45.49l-27.727-.038L34.48 67.31h27.769L46.566 82.992l-.002-.002zm-11.24-18.562V35.422h29.002v29H35.323v.005zm31.882-2.077V34.578l15.772-15.772-.085 27.855-15.687 15.69z" fill="url(#paint0_linear)"/></g><defs><linearGradient id="paint0_linear" x1="13.874" y1="13.872" x2="86.475" y2="13.872" gradientUnits="userSpaceOnUse"><stop stop-color="#33F"/><stop offset="1" stop-color="#8080FF"/></linearGradient><clipPath id="clip0"><path fill="#fff" transform="translate(14 14)" d="M0 0h72v72H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 860 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000.03 1739.27"><defs><style>.cls-2{fill:#5fcade}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path d="M565.41.11q717.21-.22 1434.51 0 .22 231.83 0 463.58-717.23.22-1434.51 0-.23-231.83 0-463.58z" fill="#02a6c2"/><path class="cls-2" d="M.6 638.1q231.39-1.2 462.86 0 1.2 231.39 0 462.86Q232 1102.15.6 1101-.6 869.57.6 638.1zM565.77 638.1q517.67-1.1 1035.27 0 1.1 231.39 0 462.86-517.66 1.08-1035.27 0-1.08-231.4 0-462.86z"/><path d="M566.2 1276.23q231-2.51 461.92 0 2.4 230.85.07 461.92-231 2.28-461.91-.08-2.4-230.83-.08-461.84z" fill="#abebf4"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 658 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 116 116"><g fill="#24C1AB" fill-rule="nonzero"><path d="M54.11 56.153L21.208 36.448c-1.547-.927-2.919-2.246-4.027-3.872s-1.927-3.523-2.404-5.566L14.542 26l.023.017 32.796 19.356c1.728 1.02 3.238 2.526 4.41 4.398 1.172 1.872 1.973 4.058 2.339 6.382zM48.513 89.214L30.926 78.95c-1.437-.838-2.714-2.044-3.746-3.537-1.033-1.494-1.798-3.24-2.245-5.127l-.348-1.465.123.07v.005l24.766 14.45c.423.247.893.344 1.358.28a2.292 2.292 0 001.275-.642c.368-.356.65-.831.813-1.373a3.83 3.83 0 00.112-1.698c-.335-2.105-1.064-4.084-2.128-5.78-1.063-1.695-2.433-3.059-3.998-3.983L25.905 57.753c-1.413-.835-2.67-2.026-3.69-3.497-1.02-1.47-1.781-3.188-2.234-5.043-.147-.601-.283-1.162-.393-1.628l.094.052 28.211 16.654c2.549 1.505 4.778 3.726 6.51 6.486 1.732 2.76 2.919 5.982 3.465 9.41a10.072 10.072 0 01-.293 4.463c-.43 1.425-1.17 2.675-2.14 3.611-.97.936-2.13 1.52-3.352 1.688-1.222.169-2.458-.086-3.57-.735zM61.89 56.153l32.902-19.705c1.547-.927 2.919-2.246 4.027-3.872s1.927-3.523 2.404-5.566l.235-1.01-.023.017-32.796 19.356c-1.728 1.02-3.238 2.526-4.41 4.398-1.172 1.872-1.973 4.058-2.339 6.382z"/><path d="M67.487 89.214L85.074 78.95c1.437-.838 2.714-2.044 3.746-3.537 1.033-1.494 1.798-3.24 2.245-5.127l.347-1.465-.122.07v.005l-24.766 14.45a2.106 2.106 0 01-1.358.28 2.291 2.291 0 01-1.275-.642 3.174 3.174 0 01-.814-1.373 3.83 3.83 0 01-.111-1.698c.335-2.105 1.064-4.085 2.128-5.78 1.063-1.695 2.432-3.059 3.998-3.983l21.002-12.398c1.414-.835 2.67-2.025 3.691-3.496 1.02-1.47 1.781-3.188 2.234-5.043.147-.601.283-1.162.393-1.628l-.094.052-28.211 16.654c-2.549 1.505-4.778 3.726-6.51 6.486-1.732 2.76-2.919 5.982-3.465 9.41a10.071 10.071 0 00.292 4.463c.43 1.425 1.17 2.675 2.14 3.611.97.936 2.13 1.52 3.352 1.689 1.223.168 2.459-.087 3.57-.736z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 99"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M85.637 68.538l-.002-40.188L51.067 8.236l.001 40.203-34.56 20.106 34.57 20.112 34.537-20.092.022.013v-.026l.012-.007-.012-.007z" fill="#64C557"/><path d="M16.52 28.348L51.087 8.233l-.002 40.227-34.568 20.115.002-40.227z" fill="#118AB2"/><path d="M51.09 8.196l34.57 20.112-11.522 6.704L39.568 14.9 51.09 8.196z" fill="#00F8B7"/><path d="M74.112 35v13.409L39.545 28.294V14.885L74.112 35z" fill="#09BD8E"/><path d="M39.52 28.314l34.57 20.112-11.522 6.704-34.57-20.112 11.523-6.704z" fill="#FFE3A3"/><path d="M62.705 55.2v13.409L28.137 48.494V35.085L62.704 55.2z" fill="#FFBB1D"/><path d="M28.032 48.432l34.57 20.112-11.524 6.704-34.57-20.112 11.524-6.704z" fill="#FF965E"/><path d="M51.053 75.237v13.409L16.485 68.53V55.12l34.568 20.116z" fill="#D94C00"/><path d="M74.129 35.004l11.522-6.705-.001 40.227-11.523 6.705.002-40.227z" fill="#06D6A0"/><path d="M62.58 55.122l11.523-6.705v26.818L62.58 81.94V55.122z" fill="#FFD166"/><path d="M51.033 75.24l11.523-6.705v13.41l-11.523 6.704V75.24z" fill="#F3722C"/></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h99.658v98.427H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve"><style>.st6{fill:#fff}</style><defs><path id="SVGID_1_" d="M0 0h24v24H0z"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" overflow="visible"/></clipPath><g clip-path="url(#SVGID_2_)"><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="20.644" y1="1011.506" x2="24.333" y2="998.84" gradientTransform="matrix(1 0 0 -1 -12 1012)"><stop offset="0" stop-color="#03b8ff"/><stop offset="1" stop-color="#fa52a0"/></linearGradient><path d="M5 2.3L23.6 15 19 21.8.4 9 5 2.3z" fill="url(#SVGID_3_)"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="23.682" y1="1012.39" x2="27.37" y2="999.724" gradientTransform="matrix(1 0 0 -1 -12 1012)"><stop offset="0" stop-color="#03b8ff"/><stop offset="1" stop-color="#fa52a0"/></linearGradient><path d="M23.6 15c-1.6 2.3-7 1.4-12.1-2.2C6.3 9.3 3.5 4.6 5 2.3 6.6 0 12 .9 17.1 4.5c5.2 3.4 8 8.2 6.5 10.5z" fill="url(#SVGID_4_)"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="17.616" y1="1010.624" x2="21.305" y2="997.958" gradientTransform="matrix(1 0 0 -1 -12 1012)"><stop offset="0" stop-color="#03b8ff"/><stop offset="1" stop-color="#fa52a0"/></linearGradient><path d="M19 21.7c-1.6 2.3-7 1.4-12.1-2.2s-8-8.2-6.4-10.6c1.6-2.3 7-1.4 12.1 2.2s7.9 8.3 6.4 10.6z" fill="url(#SVGID_5_)"/><path d="M23.6 15L19 21.8c-1.6 2.3-7 1.3-12.1-2.2-1-.7-1.9-1.4-2.8-2.2.7-.1 1.6-.5 2.5-1.5 1.6-1.7 2.4-2.1 3.1-2 .7 0 1.5.7 2.8 2.4 1.3 1.7 3.1 2.2 4.2 1.3.1-.1.2-.1.3-.2.9-.7 1.2-1 2.9-4.2.4-.8 1.8-2.1 3.7-1.5.5 1.3.5 2.4 0 3.3z" fill="#0e0f23"/><path d="M22.9 14.6c-1.4 2-6.3 1-11-2.3C7.1 9 4.3 4.8 5.7 2.8s6.3-1 11 2.3 7.5 7.5 6.2 9.5zm-4.4-3c-.7 1-3.1.5-5.5-1.1-2.3-1.6-3.7-3.7-3-4.7.7-1 3.1-.5 5.5 1.1 2.3 1.6 3.7 3.7 3 4.7z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"/><path class="st6" d="M4.6 4.6c0-.1-.1-.2-.2-.1s-.2.1-.2.2c.1.3.2.5.2.7 0 .1.1.2.2.1.1 0 .2-.1.1-.2 0-.2 0-.4-.1-.7zM5.1 6.2c0-.1-.1-.2-.2-.1s-.1.1-.1.2c1.1 2.5 3.4 5.2 6.4 7.2.1.1.2 0 .3 0 .1-.1 0-.2 0-.3-3.1-2-5.3-4.6-6.4-7zM17.2 16c-.1 0-.2 0-.2.1s0 .2.1.2c.3.1.7.2 1 .3.1 0 .2 0 .2-.1s0-.2-.1-.2c-.3-.1-.7-.2-1-.3zM19 16.4c-.1 0-.2.1-.2.2s.1.2.2.2c.8.1 1.7.2 2.4.1.1 0 .2-.1.2-.2s-.1-.2-.2-.2c-.8.1-1.6 0-2.4-.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -1,6 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<g fill="none">
|
||||
<circle cx="16" cy="16" r="16" fill="#2775C9"/>
|
||||
<path d="M15.75 27.5C9.26 27.5 4 22.24 4 15.75S9.26 4 15.75 4 27.5 9.26 27.5 15.75A11.75 11.75 0 0115.75 27.5zm-.7-16.11a2.58 2.58 0 00-2.45 2.47c0 1.21.74 2 2.31 2.33l1.1.26c1.07.25 1.51.61 1.51 1.22s-.77 1.21-1.77 1.21a1.9 1.9 0 01-1.8-.91.68.68 0 00-.61-.39h-.59a.35.35 0 00-.28.41 2.73 2.73 0 002.61 2.08v.84a.705.705 0 001.41 0v-.85a2.62 2.62 0 002.59-2.58c0-1.27-.73-2-2.46-2.37l-1-.22c-1-.25-1.47-.58-1.47-1.14 0-.56.6-1.18 1.6-1.18a1.64 1.64 0 011.59.81.8.8 0 00.72.46h.47a.42.42 0 00.31-.5 2.65 2.65 0 00-2.38-2v-.69a.705.705 0 00-1.41 0v.74zm-8.11 4.36a8.79 8.79 0 006 8.33h.14a.45.45 0 00.45-.45v-.21a.94.94 0 00-.58-.87 7.36 7.36 0 010-13.65.93.93 0 00.58-.86v-.23a.42.42 0 00-.56-.4 8.79 8.79 0 00-6.03 8.34zm17.62 0a8.79 8.79 0 00-6-8.32h-.15a.47.47 0 00-.47.47v.15a1 1 0 00.61.9 7.36 7.36 0 010 13.64 1 1 0 00-.6.89v.17a.47.47 0 00.62.44 8.79 8.79 0 005.99-8.34z" fill="#FFF"/>
|
||||
</g>
|
||||
</svg>
|
||||
<svg data-name="86977684-12db-4850-8f30-233a7c267d11" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000"><path d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z" fill="#2775ca"/><path d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z" fill="#fff"/><path d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zm441.67-1300c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z" fill="#fff"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.6 KiB |
|
|
@ -75,7 +75,7 @@ button {
|
|||
}
|
||||
|
||||
.default-transition {
|
||||
@apply transition-all duration-300;
|
||||
@apply transition-all duration-500;
|
||||
}
|
||||
|
||||
/* Chart */
|
||||
|
|
|
|||
Loading…
Reference in New Issue