feat: add status selector

application/frontend/src/components/StatusSelector/StatusSelector.styled.ts

@@ -0,0 +1,14 @@
+import { Box } from "@mui/material"
+import { styled } from "@mui/system"
+
+export const StatusCircle = styled(Box)({
+  width: 14,
+  height: 14,
+  borderRadius: "50%",
+  display: "inline-block",
+  marginRight: 8,
+})
+
+export const StyledFormControl = styled("div")({
+  width: "80px",
+})

application/frontend/src/components/StatusSelector/StatusSelector.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+
+import { MenuItem, Select } from "@mui/material"
+
+import { StatusCircle, StyledFormControl } from "./StatusSelector.styled"
+
+interface StatusSelectorProps {
+  value: string
+  onChange: (value: string) => void
+}
+
+export const StatusSelector: React.FC<StatusSelectorProps> = ({ value, onChange }) => {
+  const statusOptions = [
+    { value: "Error", color: "red" },
+    { value: "Warning", color: "orange" },
+    { value: "Success", color: "green" },
+    { value: "None", color: "gray" },
+  ]
+
+  return (
+    <StyledFormControl>
+      <Select
+        value={value}
+        onChange={(e) => onChange(e.target.value as string)}
+        displayEmpty
+        variant="outlined"
+        inputProps={{ "aria-label": "Status Selector" }}
+      >
+        {statusOptions.map((option) => (
+          <MenuItem key={option.value} value={option.value}>
+            <StatusCircle sx={{ backgroundColor: option.color }} />
+          </MenuItem>
+        ))}
+      </Select>
+    </StyledFormControl>
+  )
+}
+
+export default StatusSelector

application/frontend/src/components/StatusSelector/index.ts

@@ -0,0 +1 @@
+export { StatusSelector } from "./StatusSelector"