github.com/grafana/tanka@v0.26.1-0.20240506093700-c22cfc35c21a/docs/src/components/install/index.js (about)

     1  import React, { useState } from "react"
     2  
     3  import Osx from "./tk/osx.mdx"
     4  import Arch from "./tk/arch.mdx"
     5  import Go from "./tk/go.mdx"
     6  import Binary from "./tk/binary.mdx"
     7  
     8  import JbOsx from "./jb/osx.mdx"
     9  import JbArch from "./jb/arch.mdx"
    10  import JbGo from "./jb/go.mdx"
    11  import JbBinary from "./jb/binary.mdx"
    12  
    13  export const Tanka = {
    14    macOS: <Osx />,
    15    ArchLinux: <Arch />,
    16    Binary: <Binary />,
    17    Go: <Go />,
    18  }
    19  
    20  export const Jb = {
    21    macOS: <JbOsx />,
    22    ArchLinux: <JbArch />,
    23    Binary: <JbBinary />,
    24    Go: <JbGo />,
    25  }
    26  
    27  export const PlatformInstall = ({ elems, def }) => {
    28    const [current, setCurrent] = useState(def)
    29  
    30    return (
    31      <div css={{ display: "flex", flexDirection: "column" }}>
    32        <div
    33          css={{
    34            display: "flex",
    35            marginBottom: "1em",
    36            marginLeft: "-.5em",
    37            flexWrap: "wrap",
    38          }}
    39        >
    40          {Object.keys(elems).map(e => (
    41            <button
    42              key={e}
    43              css={{
    44                background: "none",
    45                color: "inherit",
    46                fontSize: "1em",
    47                fontFamily: "inherit",
    48                padding: ".4em .8em .4em .8em",
    49                marginLeft: ".5em",
    50                marginBottom: ".5em",
    51                border: `1px solid ${(e === current && "#0B5FFF") || "#CED4DE"}`,
    52                borderRadius: "3px",
    53                outline: "none",
    54                ":hover": {
    55                  border: "1px solid #0B5FFF",
    56                  cursor: "pointer",
    57                },
    58              }}
    59              onClick={() => {
    60                setCurrent(e)
    61              }}
    62            >
    63              {e}
    64            </button>
    65          ))}
    66        </div>
    67        <div
    68          css={{
    69            marginTop: "-1em",
    70            border: "1px solid #CED4DE",
    71            borderRadius: "3px",
    72            padding: ".8em",
    73          }}
    74        >
    75          {elems[current]}
    76        </div>
    77      </div>
    78    )
    79  }