Extract ModeTaab component
This commit is contained in:
parent
2f19ab3ab3
commit
b5c69a2d3f
|
@ -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;
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue