style: apply Prettier formatting

This commit is contained in:
gorkem-bwl
2026-01-15 23:39:26 -05:00
parent ba0c89fc6c
commit 7140d436a5
48 changed files with 425 additions and 86 deletions
@@ -84,7 +84,10 @@ const ActionsMenu = ({
},
}}
>
<Icon name="Settings" size={20} />
<Icon
name="Settings"
size={20}
/>
</IconButton>
<Menu
+22 -4
View File
@@ -10,9 +10,24 @@ import "./index.css";
*/
const icons = {
info: <Icon name="Info" size={24} />,
error: <Icon name="AlertTriangle" size={24} />,
warning: <Icon name="AlertTriangle" size={24} />,
info: (
<Icon
name="Info"
size={24}
/>
),
error: (
<Icon
name="AlertTriangle"
size={24}
/>
),
warning: (
<Icon
name="AlertTriangle"
size={24}
/>
),
};
/**
@@ -94,7 +109,10 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
},
}}
>
<Icon name="X" size={20} />
<Icon
name="X"
size={20}
/>
</IconButton>
)}
</Stack>
+8 -2
View File
@@ -34,7 +34,10 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
alignItems="center"
>
{outlined ? (
<Icon name="CheckCircle" size={20} />
<Icon
name="CheckCircle"
size={20}
/>
) : (
<Box
lineHeight={0}
@@ -42,7 +45,10 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
"& svg > path": { fill: colors[variant] },
}}
>
<Icon name="Check" size={16} />
<Icon
name="Check"
size={16}
/>
</Box>
)}
<Typography
+10 -2
View File
@@ -152,7 +152,11 @@ const AppAppBar = () => {
aria-label="Menu button"
onClick={toggleDrawer(true)}
>
<Icon name="Menu" size={24} color={theme.palette.text.primary} />
<Icon
name="Menu"
size={24}
color={theme.palette.text.primary}
/>
</IconButton>
<Drawer
anchor="top"
@@ -175,7 +179,11 @@ const AppAppBar = () => {
}}
>
<IconButton onClick={toggleDrawer(false)}>
<Icon name="X" size={24} color={theme.palette.text.primary} />
<Icon
name="X"
size={24}
color={theme.palette.text.primary}
/>
</IconButton>
</Box>
@@ -175,7 +175,10 @@ const ImageUpload = ({
boxShadow: theme.shape.boxShadow,
}}
>
<Icon name="Upload" size={24} />
<Icon
name="Upload"
size={24}
/>
</IconButton>
<Typography
component="h2"
@@ -202,7 +205,12 @@ const ImageUpload = ({
</Box>
{(localError || progress.isLoading || progress.value !== 0) && (
<ProgressUpload
icon={<Icon name="Image" size={20} />}
icon={
<Icon
name="Image"
size={20}
/>
}
label={file?.name || "Upload failed"}
size={file?.size}
progress={progress.value}
@@ -47,7 +47,12 @@ const Radio = ({
<MUIRadio
id={id}
size={size}
checkedIcon={<Icon name="CircleDot" size={16} />}
checkedIcon={
<Icon
name="CircleDot"
size={16}
/>
}
sx={{
color: "transparent",
width: 16,
@@ -98,7 +98,13 @@ const Select = ({
error={error}
name={name}
inputProps={{ id: id }}
IconComponent={(props) => <Icon name="ChevronDown" size={20} {...props} />}
IconComponent={(props) => (
<Icon
name="ChevronDown"
size={20}
{...props}
/>
)}
MenuProps={{ disableScrollLock: true }}
sx={{
fontSize: 13,
@@ -54,9 +54,15 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
}}
>
{fieldType === "password" ? (
<Icon name="EyeOff" size={20} />
<Icon
name="EyeOff"
size={20}
/>
) : (
<Icon name="Eye" size={20} />
<Icon
name="Eye"
size={20}
/>
)}
</IconButton>
</InputAdornment>
@@ -70,7 +70,10 @@ const MonitorActions = ({ isLoading }) => {
aria-haspopup="menu"
onClick={handleToggle}
>
<Icon name="ChevronDown" size={20} />
<Icon
name="ChevronDown"
size={20}
/>
</Button>
</ButtonGroup>
<Popper
@@ -72,7 +72,12 @@ const MonitorDetailsControlHeader = ({
variant="contained"
color="secondary"
loading={isSending}
startIcon={<Icon name="Mail" size={18} />}
startIcon={
<Icon
name="Mail"
size={18}
/>
}
disabled={isTestNotificationsDisabled}
onClick={() => {
testAllNotifications({ monitorId: monitor?.id });
@@ -100,7 +105,17 @@ const MonitorDetailsControlHeader = ({
color="secondary"
loading={isPausing}
startIcon={
monitor?.isActive ? <Icon name="Pause" size={18} /> : <Icon name="Play" size={18} />
monitor?.isActive ? (
<Icon
name="Pause"
size={18}
/>
) : (
<Icon
name="Play"
size={18}
/>
)
}
onClick={() => {
pauseMonitor({
@@ -116,7 +131,12 @@ const MonitorDetailsControlHeader = ({
<Button
variant="contained"
color="secondary"
startIcon={<Icon name="Settings" size={18} />}
startIcon={
<Icon
name="Settings"
size={18}
/>
}
onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
>
Configure
@@ -50,7 +50,10 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
alignItems={error ? "center" : "flex-start"}
>
{error ? (
<Icon name="AlertTriangle" size={20} />
<Icon
name="AlertTriangle"
size={20}
/>
) : icon ? (
<Box
sx={{
@@ -126,7 +129,10 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
}
}
>
<Icon name="X" size={20} />
<Icon
name="X"
size={20}
/>
</IconButton>
</Stack>
{!error ? (
@@ -6,9 +6,17 @@ import PropTypes from "prop-types";
const CustomStepIcon = (props) => {
const { completed, active } = props;
return completed ? (
<Icon name="CheckCircle2" size={24} color="accent.main" />
<Icon
name="CheckCircle2"
size={24}
color="accent.main"
/>
) : (
<Icon name="Circle" size={24} color={active ? "accent.main" : "text.disabled"} />
<Icon
name="Circle"
size={24}
color={active ? "accent.main" : "text.disabled"}
/>
);
};
@@ -55,7 +55,13 @@ const ShareComponent = ({ elementToCapture, fileName = "screenshot" }) => {
return (
<Button
variant="outlined"
startIcon={<Icon name="Share2" size={18} color="success.main" />}
startIcon={
<Icon
name="Share2"
size={18}
color="success.main"
/>
}
color="success"
onClick={captureAndShare}
>
@@ -67,7 +67,10 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
},
}}
>
<Icon name="X" size={20} />
<Icon
name="X"
size={20}
/>
</IconButton>
</Stack>
@@ -100,7 +100,12 @@ function Pagination({
},
},
inputProps: { id: "pagination-dropdown" },
IconComponent: () => <Icon name="ChevronsUpDown" size={16} />,
IconComponent: () => (
<Icon
name="ChevronsUpDown"
size={16}
/>
),
sx: {
ml: theme.spacing(4),
mr: theme.spacing(12),
+26 -5
View File
@@ -10,9 +10,24 @@ import { useTheme } from "@emotion/react";
import PropTypes from "prop-types";
const icons = {
info: <Icon name="Info" size={24} />,
error: <Icon name="AlertTriangle" size={24} />,
warning: <Icon name="AlertTriangle" size={24} />,
info: (
<Icon
name="Info"
size={24}
/>
),
error: (
<Icon
name="AlertTriangle"
size={24}
/>
),
warning: (
<Icon
name="AlertTriangle"
size={24}
/>
),
};
const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
@@ -47,7 +62,10 @@ const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
)}
{title && (
<IconButton onClick={onClick}>
<Icon name="X" size={20} />
<Icon
name="X"
size={20}
/>
</IconButton>
)}
</Stack>
@@ -60,7 +78,10 @@ const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
<ToastBody body={body} />
{!title && (
<IconButton onClick={onClick}>
<Icon name="X" size={20} />
<Icon
name="X"
size={20}
/>
</IconButton>
)}
</Stack>
@@ -24,7 +24,13 @@ const AddMemberMenu = ({ handleInviteOpen, handleIsRegisterOpen }) => {
<Button
variant="contained"
color="accent"
endIcon={<Icon name="ChevronDown" size={20} color="secondary.light" />}
endIcon={
<Icon
name="ChevronDown"
size={20}
color="secondary.light"
/>
}
onClick={handleClick}
>
{t("teamPanel.addTeamMember.addMemberMenu")}
@@ -23,28 +23,40 @@ const StatusBox = ({ title, value, status }) => {
color = theme.palette.success.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
<Icon name="CheckCircle" size={20} />
<Icon
name="CheckCircle"
size={20}
/>
</Box>
);
} else if (status === "down") {
color = theme.palette.error.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
<Icon name="X" size={20} />
<Icon
name="X"
size={20}
/>
</Box>
);
} else if (status === "paused") {
color = theme.palette.warning.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
<Icon name="AlertTriangle" size={20} />
<Icon
name="AlertTriangle"
size={20}
/>
</Box>
);
} else {
color = theme.palette.accent.main;
icon = (
<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
<Icon name="Bell" size={20} />
<Icon
name="Bell"
size={20}
/>
</Box>
);
}
@@ -63,7 +63,10 @@ const ActiveIncidentsPanel = ({ totalCount = 0, isLoading = false, error = null
mb: theme.spacing(2),
}}
>
<Icon name="CheckCircle" size={60} />
<Icon
name="CheckCircle"
size={60}
/>
</Box>
<Typography
@@ -104,7 +107,10 @@ const ActiveIncidentsPanel = ({ totalCount = 0, isLoading = false, error = null
},
}}
>
<Icon name="AlertTriangle" size={60} />
<Icon
name="AlertTriangle"
size={60}
/>
</Box>
<Typography
@@ -68,7 +68,10 @@ const IncidentItem = ({ incident }) => {
...iconWrapperStyle,
}}
>
<Icon name="Globe" size={20} />
<Icon
name="Globe"
size={20}
/>
</Box>
<Stack
@@ -100,7 +103,10 @@ const IncidentItem = ({ incident }) => {
gap={theme.spacing(3)}
>
<Box sx={{ ...iconWrapperStyle }}>
<Icon name="Wifi" size={20} />
<Icon
name="Wifi"
size={20}
/>
</Box>
<Stack
direction="row"
@@ -86,7 +86,10 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
...iconWrapperStyle,
}}
>
<Icon name="Bell" size={20} />
<Icon
name="Bell"
size={20}
/>
</Box>
<Box>
<Typography
@@ -107,7 +110,10 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
gap={theme.spacing(2)}
>
<Box sx={iconWrapperStyle}>
<Icon name="AlertTriangle" size={20} />
<Icon
name="AlertTriangle"
size={20}
/>
</Box>
<Box>
<Typography
@@ -129,7 +135,10 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
gap={theme.spacing(2)}
>
<Box sx={iconWrapperStyle}>
<Icon name="Wrench" size={20} />
<Icon
name="Wrench"
size={20}
/>
</Box>
<Box>
<Typography
@@ -153,7 +162,10 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
mb={theme.spacing(1.5)}
>
<Box sx={iconWrapperStyle}>
<Icon name="RefreshCw" size={20} />
<Icon
name="RefreshCw"
size={20}
/>
</Box>
<Box>
@@ -35,12 +35,18 @@ const MonitorActionButtons = ({ monitor, isBusy, handlePause, handleRemove }) =>
>
{monitor?.isActive ? (
<>
<Icon name="PauseCircle" size={20} />
<Icon
name="PauseCircle"
size={20}
/>
{t("pause")}
</>
) : (
<>
<Icon name="PlayCircle" size={20} />
<Icon
name="PlayCircle"
size={20}
/>
{t("resume")}
</>
)}
@@ -68,7 +68,12 @@ const Filter = ({
color={theme.palette.primary.contrastText}
onClick={handleReset}
variant="contained"
endIcon={<Icon name="X" size={18} />}
endIcon={
<Icon
name="X"
size={18}
/>
}
sx={{
visibility: isFilterActive ? "visible" : "hidden",
}}
@@ -67,7 +67,10 @@ const MonitorsTable = ({
alignItems={"center"}
gap=".25rem"
>
<Icon name="Cpu" size={20} />
<Icon
name="Cpu"
size={20}
/>
{row.processor}
</Stack>
),
@@ -100,7 +100,10 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
}}
ref={anchor}
>
<Icon name="Settings" size={20} />
<Icon
name="Settings"
size={20}
/>
</IconButton>
<Menu
@@ -14,7 +14,9 @@ const MonitorListItem = ({ monitor, onDelete }) => {
width="100%"
>
<Typography flexGrow={1}>{monitor.name}</Typography>
<Icon name="Trash2" size={20}
<Icon
name="Trash2"
size={20}
sx={{ cursor: "pointer" }}
onClick={() => onDelete(monitor)}
/>
@@ -217,7 +217,14 @@ const CreateMaintenance = () => {
disablePast
disableHighlightToday
value={form.startDate}
slots={{ openPickerIcon: () => <Icon name="Calendar" size={20} /> }}
slots={{
openPickerIcon: () => (
<Icon
name="Calendar"
size={20}
/>
),
}}
slotProps={{
switchViewButton: { sx: { display: "none" } },
nextIconButton: { sx: { ml: theme.spacing(2) } },
@@ -98,7 +98,10 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
},
}}
>
<Icon name="Settings" size={20} />
<Icon
name="Settings"
size={20}
/>
</IconButton>
<Menu
@@ -67,9 +67,15 @@ const MaintenanceTable = ({
}}
>
{sort.order === "asc" ? (
<Icon name="ArrowUp" size={18} />
<Icon
name="ArrowUp"
size={18}
/>
) : (
<Icon name="ArrowDown" size={18} />
<Icon
name="ArrowDown"
size={18}
/>
)}
</span>
</Box>
@@ -88,9 +94,15 @@ const MaintenanceTable = ({
}}
>
{sort.order === "asc" ? (
<Icon name="ArrowUp" size={18} />
<Icon
name="ArrowUp"
size={18}
/>
) : (
<Icon name="ArrowDown" size={18} />
<Icon
name="ArrowDown"
size={18}
/>
)}
</span>
</Box>
@@ -49,7 +49,10 @@ const ActionMenu = ({ notification, onDelete }) => {
onClick={handleClick}
onMouseDown={(e) => e.stopPropagation()}
>
<Icon name="Settings" size={20} />
<Icon
name="Settings"
size={20}
/>
</IconButton>
<Menu
+8 -2
View File
@@ -312,12 +312,18 @@ const PageSpeedSetup = () => {
>
{monitor?.isActive ? (
<>
<Icon name="PauseCircle" size={20} />
<Icon
name="PauseCircle"
size={20}
/>
{t("pause")}
</>
) : (
<>
<Icon name="PlayCircle" size={20} />
<Icon
name="PlayCircle"
size={20}
/>
{t("resume")}
</>
)}
@@ -10,7 +10,12 @@ const AreaChartLegend = ({ metrics, handleMetrics }) => {
const { t } = useTranslation();
return (
<LegendBox
icon={<Icon name="Ruler" size={20} />}
icon={
<Icon
name="Ruler"
size={20}
/>
}
header="Metrics"
>
<Box>
@@ -9,7 +9,12 @@ const PieChartLegend = ({ audits }) => {
return (
<LegendBox
icon={<Icon name="Gauge" size={20} />}
icon={
<Icon
name="Gauge"
size={20}
/>
}
header="Performance metrics"
sx={{ flex: 1 }}
>
@@ -24,7 +24,12 @@ const PageSpeedAreaChart = ({ shouldRender, monitor, metrics, handleMetrics }) =
>
<ChartBox
justifyContent="flex-start"
icon={<Icon name="TrendingUp" size={20} />}
icon={
<Icon
name="TrendingUp"
size={20}
/>
}
header="Score history"
height="100%"
borderRadiusRight={16}
@@ -17,7 +17,12 @@ const PerformanceReport = ({ shouldRender, audits }) => {
return (
<ChartBox
icon={<Icon name="Layers" size={20} />}
icon={
<Icon
name="Layers"
size={20}
/>
}
header="Performance report"
Legend={<PieChartLegend audits={audits} />}
borderRadiusRight={16}
@@ -240,7 +240,10 @@ const Card = ({ monitor }) => {
}}
>
<IconBox>
<Icon name="Gauge" size={20} />
<Icon
name="Gauge"
size={20}
/>
</IconBox>
<Typography
component="h2"
@@ -27,9 +27,14 @@ const MonitorListItem = ({
justifyContent={"start"}
border={`1px solid ${theme.palette.primary.lowContrast}`}
>
<Icon name="GripVertical" size={20} />
<Icon
name="GripVertical"
size={20}
/>
<Typography>{monitor.name}</Typography>
<Icon name="Trash2" size={20}
<Icon
name="Trash2"
size={20}
sx={{ marginLeft: "auto" }}
onClick={() => {
onDelete(monitor);
@@ -8,7 +8,12 @@ const Progress = ({ isLoading, progressValue, logo, logoType, removeLogo, errors
if (isLoading) {
return (
<ProgressUpload
icon={<Icon name="Image" size={20} />}
icon={
<Icon
name="Image"
size={20}
/>
}
label={logo?.name}
size={formatBytes(logo?.size)}
progress={progressValue}
@@ -45,7 +45,12 @@ const Controls = ({ url, type }) => {
},
}}
>
<Icon name="Settings" size={18} style={{ marginRight: '8px' }} /> {t("configure")}
<Icon
name="Settings"
size={18}
style={{ marginRight: "8px" }}
/>{" "}
{t("configure")}
</Button>
</Box>
</Stack>
@@ -110,7 +115,10 @@ const ControlsHeader = ({ statusPage, isPublic, url, type = "uptime" }) => {
}}
>
<Typography>{t("publicLink")}</Typography>
<Icon name="ExternalLink" size={18} />
<Icon
name="ExternalLink"
size={18}
/>
</Stack>
)}
</Stack>
@@ -9,14 +9,22 @@ import PropTypes from "prop-types";
const getMonitorStatus = (monitors, theme) => {
const monitorsStatus = {
icon: (
<Icon name="AlertTriangle" size={24} color="primary.contrastTextSecondaryDarkBg" />
<Icon
name="AlertTriangle"
size={24}
color="primary.contrastTextSecondaryDarkBg"
/>
),
};
if (monitors.every((monitor) => monitor.status === true)) {
monitorsStatus.msg = "All systems operational";
monitorsStatus.color = theme.palette.success.lowContrast;
monitorsStatus.icon = (
<Icon name="CheckCircle2" size={24} color="primary.contrastTextSecondaryDarkBg" />
<Icon
name="CheckCircle2"
size={24}
color="primary.contrastTextSecondaryDarkBg"
/>
);
}
@@ -48,7 +48,12 @@ const StatusPagesTable = ({ data }) => {
}}
>
<Typography>{content}</Typography>
{row.isPublished && <Icon name="ExternalLink" size={18} />}
{row.isPublished && (
<Icon
name="ExternalLink"
size={18}
/>
)}
</Stack>
);
},
+11 -1
View File
@@ -426,7 +426,17 @@ const UptimeCreate = ({ isClone = false }) => {
color="secondary"
loading={isBusy}
startIcon={
monitor?.isActive ? <Icon name="Pause" size={18} /> : <Icon name="Play" size={18} />
monitor?.isActive ? (
<Icon
name="Pause"
size={18}
/>
) : (
<Icon
name="Play"
size={18}
/>
)
}
onClick={handlePause}
>
@@ -36,7 +36,12 @@ const ChartBoxes = ({
gap={theme.spacing(8)}
>
<ChartBox
icon={<Icon name="Activity" size={20} />}
icon={
<Icon
name="Activity"
size={20}
/>
}
header="Uptime"
isEmpty={monitorData?.groupedUpChecks?.length === 0}
>
@@ -87,7 +92,12 @@ const ChartBoxes = ({
/>
</ChartBox>
<ChartBox
icon={<Icon name="AlertTriangle" size={20} />}
icon={
<Icon
name="AlertTriangle"
size={20}
/>
}
header="Incidents"
noDataMessage={noIncidentsMessage}
isEmpty={monitorData?.groupedDownChecks?.length === 0}
@@ -121,7 +131,12 @@ const ChartBoxes = ({
/>
</ChartBox>
<ChartBox
icon={<Icon name="BarChart3" size={20} />}
icon={
<Icon
name="BarChart3"
size={20}
/>
}
header="Average Response Time"
>
<ResponseGaugeChart avgResponseTime={monitorData?.groupedAvgResponseTime ?? 0} />
@@ -11,7 +11,12 @@ const ResponseTImeChart = ({ isLoading = false, groupedChecks = [], dateRange })
return (
<ChartBox
icon={<Icon name="TrendingUp" size={20} />}
icon={
<Icon
name="TrendingUp"
size={20}
/>
}
header="Response Times"
>
<MonitorDetailsAreaChart
@@ -184,7 +184,12 @@ const ResponseTable = ({
return (
<ChartBox
icon={<Icon name="History" size={20} />}
icon={
<Icon
name="History"
size={20}
/>
}
header="Response Times"
height="100%"
>
@@ -131,7 +131,12 @@ const Filter = ({
color={theme.palette.primary.contrastText}
onClick={handleReset}
variant="contained"
endIcon={<Icon name="X" size={18} />}
endIcon={
<Icon
name="X"
size={18}
/>
}
sx={{
visibility: isFilterActive ? "visible" : "hidden",
}}
@@ -19,21 +19,30 @@ const StatusBox = ({ title, value, status }) => {
color = theme.palette.success.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, top: theme.spacing(4) }}>
<Icon name="ArrowUpRight" size={20} />
<Icon
name="ArrowUpRight"
size={20}
/>
</Box>
);
} else if (status === "down") {
color = theme.palette.error.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: theme.spacing(2) }}>
<Icon name="ArrowUpRight" size={20} />
<Icon
name="ArrowUpRight"
size={20}
/>
</Box>
);
} else if (status === "paused") {
color = theme.palette.warning.lowContrast;
icon = (
<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
<Icon name="Clock" size={20} />
<Icon
name="Clock"
size={20}
/>
</Box>
);
}
@@ -91,9 +91,15 @@ const UptimeDataTable = ({
}}
>
{sort?.order === "asc" ? (
<Icon name="ArrowUp" size={18} />
<Icon
name="ArrowUp"
size={18}
/>
) : (
<Icon name="ArrowDown" size={18} />
<Icon
name="ArrowDown"
size={18}
/>
)}
</Stack>
</Stack>
@@ -127,9 +133,15 @@ const UptimeDataTable = ({
}}
>
{sort?.order === "asc" ? (
<Icon name="ArrowUp" size={18} />
<Icon
name="ArrowUp"
size={18}
/>
) : (
<Icon name="ArrowDown" size={18} />
<Icon
name="ArrowDown"
size={18}
/>
)}
</Stack>
</Stack>