studio/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx at bd796d9312a3b9007a71e2d81d2902cdb1d751bb · livepeer/studio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { Box, Flex } from "@livepeer/design-system";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { Dispatch, SetStateAction } from "react";
import { Button } from "components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "components/ui/dropdown-menu";

export type AssetChildrenHeadingBoxProps = {
  children: React.ReactNode;
  activeTab: "Overview" | "Event Logs";
  setSwitchTab: Dispatch<SetStateAction<"Overview" | "Event Logs">>;
  setEditAssetDialogOpen: Dispatch<SetStateAction<boolean>>;
  onDeleteAsset: () => void;
};

const AssetChildrenHeadingBox = ({
  children,
  activeTab,
  setSwitchTab,
  setEditAssetDialogOpen,
  onDeleteAsset,
}: AssetChildrenHeadingBoxProps) => {
  return (
    <Box css={{ flexGrow: 1, ml: "$8" }}>
      <Flex
        justify="between"
        css={{
          borderBottom: "1px solid",
          borderColor: "$neutral6",
          mb: "$4",
          width: "100%",
        }}>
        <Box css={{ display: "flex" }}>
          <Box
            as="div"
            onClick={() => setSwitchTab("Overview")}
            css={{
              pb: "$2",
              width: "100%",
              cursor: "default",
              textDecoration: "none",
              borderBottom: "2px solid",
              borderColor: activeTab === "Overview" ? "$green9" : "transparent",
              mr: "$5",
              "&:hover": {
                textDecoration: "none",
              },
            }}>
            Overview
          </Box>

          <Box
            as="div"
            onClick={() => setSwitchTab("Event Logs")}
            css={{
              textDecoration: "none",
              pb: "$2",
              width: "100%",
              cursor: "default",
              borderBottom: "2px solid",
              borderColor:
                activeTab === "Event Logs" ? "$green9" : "transparent",
              whiteSpace: "nowrap",
              "&:hover": {
                textDecoration: "none",
              },
            }}>
            Event Logs
          </Box>
        </Box>
        <Box css={{ position: "relative", top: "-8px" }}>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="secondary" size="sm">
                Actions
                <Box as={ChevronDownIcon} css={{ ml: "$1" }} />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent
              placeholder="dropdown-menu-content"
              align="end">
              <DropdownMenuGroup>
                <DropdownMenuItem onSelect={() => setEditAssetDialogOpen(true)}>
                  Edit
                </DropdownMenuItem>
                <DropdownMenuItem onSelect={onDeleteAsset} color="red">
                  Delete
                </DropdownMenuItem>
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </Box>
      </Flex>
      <Box css={{ py: "$2" }}>{children}</Box>
    </Box>
  );
};

export default AssetChildrenHeadingBox;