a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style source selector menu

This commit is contained in:
Willian Mitsuda 2021-09-07 01:10:19 -03:00
parent 7b0137c7fe
commit dd490ee905
1 changed files with 42 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/address/Contracts.tsx
View File

@ -1,6 +1,8 @@
import React, { useState, useEffect, useContext, Fragment } from "react"; import React, { useState, useEffect, useContext, Fragment } from "react";
import { commify } from "@ethersproject/units"; import { commify } from "@ethersproject/units";
import { Switch, Tab } from "@headlessui/react"; import { Menu, Switch } from "@headlessui/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
import ContentFrame from "../ContentFrame"; import ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow"; import InfoRow from "../components/InfoRow";
import Contract from "./Contract"; import Contract from "./Contract";
@ -78,8 +80,16 @@ const Contracts: React.FC<ContractsProps> = ({
)} )}
{rawMetadata !== undefined && rawMetadata !== null && ( {rawMetadata !== undefined && rawMetadata !== null && (
<div> <div>
<Menu>
<div className="flex space-x-2 justify-between items-baseline">
<Menu.Button className="flex space-x-2 text-sm border-l border-r border-t rounded-t px-2 py-1">
<span>{selected}</span>
<span className="self-center">
<FontAwesomeIcon icon={faChevronDown} size="xs" />
</span>
</Menu.Button>
{provider && ( {provider && (
<div className="text-sm mb-3"> <div className="text-sm">
<ExternalLink <ExternalLink
href={openInRemixURL( href={openInRemixURL(
checksummedAddress, checksummedAddress,
@ -90,24 +100,26 @@ const Contracts: React.FC<ContractsProps> = ({
</ExternalLink> </ExternalLink>
</div> </div>
)} )}
<Tab.Group> </div>
<Tab.List className="flex truncate"> <div className="relative">
<Menu.Items className="absolute border p-1 rounded-b bg-white flex flex-col">
{Object.entries(rawMetadata.sources).map(([k]) => ( {Object.entries(rawMetadata.sources).map(([k]) => (
<Tab key={k} as={Fragment}> <Menu.Item key={k}>
<button <button
className={`border-b-2 border-transparent rounded-t text-sm px-2 py-1 ${ className={`flex text-sm px-2 py-1 ${
selected === k selected === k
? "border-orange-300 font-bold bg-gray-200 text-gray-500" ? "font-bold bg-gray-200 text-gray-500"
: "hover:border-orange-200 bg-gray-100 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75 transform origin-bottom scale-95 hover:scale-100" : "hover:border-orange-200 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75"
}`} }`}
onClick={() => setSelected(k)} onClick={() => setSelected(k)}
> >
{k} {k}
</button> </button>
</Tab> </Menu.Item>
))} ))}
</Tab.List> </Menu.Items>
</Tab.Group> </div>
</Menu>
{selected && ( {selected && (
<Contract <Contract
checksummedAddress={checksummedAddress} checksummedAddress={checksummedAddress}