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

Extract ModeTaab component

This commit is contained in:
Willian Mitsuda 2021-09-18 15:08:44 -03:00
parent 2f19ab3ab3
commit b5c69a2d3f
2 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ModeTab.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react";
import { Tab } from "@headlessui/react";
const ModeTab: React.FC = ({ children }) => (
<Tab
className={({ selected }) =>
`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
selected ? "border-blue-300" : ""
}`
}
>
{children}
</Tab>
);
export default ModeTab;

31
src/transaction/Details.tsx
View File

@ -30,6 +30,7 @@ import PercentageBar from "../components/PercentageBar";
import ExternalLink from "../components/ExternalLink"; import ExternalLink from "../components/ExternalLink";
import RelativePosition from "../components/RelativePosition"; import RelativePosition from "../components/RelativePosition";
import PercentagePosition from "../components/PercentagePosition"; import PercentagePosition from "../components/PercentagePosition";
import ModeTab from "../components/ModeTab";
import DecodedInput from "./DecodedInput"; import DecodedInput from "./DecodedInput";
type DetailsProps = { type DetailsProps = {
@ -315,33 +316,9 @@ const Details: React.FC<DetailsProps> = ({
<InfoRow title="Input Data"> <InfoRow title="Input Data">
<Tab.Group> <Tab.Group>
<Tab.List className="flex space-x-1 mb-1"> <Tab.List className="flex space-x-1 mb-1">
<Tab <ModeTab>Decoded</ModeTab>
className={({ selected }) => <ModeTab>Raw</ModeTab>
`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${ <ModeTab>UTF-8</ModeTab>
selected ? "border-blue-300" : ""
}`
}
>
Decoded
</Tab>
<Tab
className={({ selected }) =>
`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
selected ? "border-blue-300" : ""
}`
}
>
Raw
</Tab>
<Tab
className={({ selected }) =>
`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
selected ? "border-blue-300" : ""
}`
}
>
UTF-8
</Tab>
</Tab.List> </Tab.List>
<Tab.Panels> <Tab.Panels>
<Tab.Panel>{txDesc && <DecodedInput txDesc={txDesc} />}</Tab.Panel> <Tab.Panel>{txDesc && <DecodedInput txDesc={txDesc} />}</Tab.Panel>