HASHNET: Company Favor (#469)

src/ui/React/CompanyDropdown.tsx

@@ -0,0 +1,44 @@
+/**
+ * Creates a dropdown (select HTML element) with company names as options
+ */
+import React from "react";
+import { companiesMetadata } from "../../Company/data/CompaniesMetadata";
+
+import Select, { SelectChangeEvent } from "@mui/material/Select";
+import MenuItem from "@mui/material/MenuItem";
+import Button from "@mui/material/Button";
+
+interface IProps {
+  purchase: () => void;
+  canPurchase: boolean;
+  onChange: (event: SelectChangeEvent<string>) => void;
+  value: string;
+}
+
+const sortedCompanies = companiesMetadata.sort((a, b) => a.name.localeCompare(b.name));
+
+export function CompanyDropdown(props: IProps): React.ReactElement {
+  const companies = [];
+  for (const company of sortedCompanies) {
+    companies.push(
+      <MenuItem key={company.name} value={company.name}>
+        {company.name}
+      </MenuItem>,
+    );
+  }
+
+  return (
+    <Select
+      startAdornment={
+        <Button onClick={props.purchase} disabled={!props.canPurchase}>
+          Buy
+        </Button>
+      }
+      sx={{ mx: 1 }}
+      value={props.value}
+      onChange={props.onChange}
+    >
+      {companies}
+    </Select>
+  );
+}