Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-09 15:05:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

✨ Change integration structure to array and rename to widgets in config

Browse Source
This commit is contained in:
Meierschlumpf
2022-12-19 17:03:39 +01:00
parent ed0146e7b0
commit 8f7a3111ca
21 changed files with 154 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
data/configs/default.json
View File

@@ -164,7 +164,28 @@
}
}
],
"integrations": [],
"widgets": [{
"id": "date",
"properties": {
"display24HourFormat": true
},
"area": {
"type": "wrapper",
"properties": {
"id": "47af36c0-47c1-4e5b-bfc7-ad645ee6a33e"
}
},
"shape": {
"location": {
"x": 0,
"y": 3
},
"size": {
"width": 4,
"height": 2
}
}
}],
"settings": {
"common": {
"searchEngine": {

14
src/components/Dashboard/Modals/ChangePosition/ChangeIntegrationPositionModal.tsx
View File

@@ -22,10 +22,10 @@ export const ChangeIntegrationPositionModal = ({
updateConfig(configName, (prev) => ({
...prev,
integrations: {
...prev.integrations,
widgets: {
...prev.widgets,
[innerProps.integration]: {
...prev.integrations[innerProps.integration],
...prev.widgets[innerProps.integration],
shape: {
location: {
x,
@@ -55,10 +55,10 @@ export const ChangeIntegrationPositionModal = ({
onCancel={handleCancel}
heightData={heightData}
widthData={widthData}
initialX={innerProps.module.shape.location.x}
initialY={innerProps.module.shape.location.y}
initialWidth={innerProps.module.shape.size.width}
initialHeight={innerProps.module.shape.size.height}
initialX={innerProps.widget.shape.location.x}
initialY={innerProps.widget.shape.location.y}
initialWidth={innerProps.widget.shape.size.width}
initialHeight={innerProps.widget.shape.size.height}
/>
);
};

2
src/components/Dashboard/Tiles/TileWrapper.tsx
View File

@@ -2,7 +2,7 @@ import { ReactNode, RefObject } from 'react';
interface GridstackTileWrapperProps {
id: string;
type: 'app' | 'module';
type: 'app' | 'widget';
x?: number;
y?: number;
width?: number;

10
src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
View File

@@ -47,15 +47,15 @@ export const WidgetsEditModal = ({
const handleSave = () => {
updateConfig(configName, (prev) => ({
...prev,
integrations: {
...prev.integrations,
widgets: {
...prev.widgets,
[innerProps.integration]:
'properties' in (prev.integrations[innerProps.integration] ?? {})
'properties' in (prev.widgets[innerProps.integration] ?? {})
? {
...prev.integrations[innerProps.integration],
...prev.widgets[innerProps.integration],
properties: moduleProperties,
}
: prev.integrations[innerProps.integration],
: prev.widgets[innerProps.integration],
},
}));
context.closeModal(id);

14
src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
View File

@@ -8,18 +8,18 @@ import { WidgetsRemoveModalInnerProps } from './WidgetsRemoveModal';
export type WidgetChangePositionModalInnerProps = {
integration: string;
module: IWidget<string, any>;
widget: IWidget<string, any>;
};
interface WidgetsMenuProps {
integration: string;
module: IWidget<string, any> | undefined;
widget: IWidget<string, any> | undefined;
}
export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => {
export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
const { t } = useTranslation(`modules/${integration}`);
if (!module) return null;
if (!widget) return null;
const handleDeleteClick = () => {
openContextModalGeneric<WidgetsRemoveModalInnerProps>({
@@ -38,7 +38,7 @@ export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => {
title: null,
innerProps: {
integration,
module,
widget: widget,
},
});
};
@@ -49,7 +49,7 @@ export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => {
title: <Title order={4}>{t('descriptor.settings.title')}</Title>,
innerProps: {
integration,
options: module.properties,
options: widget.properties,
},
});
};
@@ -59,7 +59,7 @@ export const WidgetsMenu = ({ integration, module }: WidgetsMenuProps) => {
handleClickEdit={handleEditClick}
handleClickChangePosition={handleChangeSizeClick}
handleClickDelete={handleDeleteClick}
displayEdit={module.properties !== undefined}
displayEdit={widget.properties !== undefined}
/>
);
};

26
src/components/Dashboard/Wrappers/Category/Category.tsx
View File

@@ -14,7 +14,7 @@ interface DashboardCategoryProps {
}
export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
const { refs, items, integrations } = useGridstack('category', category.id);
const { refs, items, widgets } = useGridstack('category', category.id);
const isEditMode = useEditModeStore((x) => x.enabled);
return (
@@ -45,21 +45,23 @@ export const DashboardCategory = ({ category }: DashboardCategoryProps) => {
</GridstackTileWrapper>
);
})}
{Object.entries(integrations).map(([k, v]) => {
const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined;
if (!widget) return null;
{widgets.map((widget) => {
const definition = Widgets[widget.id as keyof typeof Widgets] as
| IWidgetDefinition
| undefined;
if (!definition) return null;
return (
<GridstackTileWrapper
type="module"
key={k}
itemRef={refs.items.current[k]}
id={widget.id}
{...widget.gridstack}
{...v.shape.location}
{...v.shape.size}
type="widget"
key={widget.id}
itemRef={refs.items.current[widget.id]}
id={definition.id}
{...definition.gridstack}
{...widget.shape.location}
{...widget.shape.size}
>
<widget.component className="grid-stack-item-content" module={v} />
<definition.component className="grid-stack-item-content" widget={widget} />
</GridstackTileWrapper>
);
})}

26
src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
View File

@@ -11,7 +11,7 @@ interface DashboardSidebarProps {
}
export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
const { refs, items, integrations } = useGridstack('sidebar', location);
const { refs, items, widgets } = useGridstack('sidebar', location);
const minRow = useMinRowForFullHeight(refs.wrapper);
@@ -47,21 +47,23 @@ export const DashboardSidebar = ({ location }: DashboardSidebarProps) => {
</GridstackTileWrapper>
);
})}
{Object.entries(integrations).map(([k, v]) => {
const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined;
if (!widget) return null;
{widgets.map((widget) => {
const definition = Widgets[widget.id as keyof typeof Widgets] as
| IWidgetDefinition
| undefined;
if (!definition) return null;
return (
<GridstackTileWrapper
type="module"
key={k}
itemRef={refs.items.current[k]}
id={widget.id}
{...widget.gridstack}
{...v.shape.location}
{...v.shape.size}
type="widget"
key={widget.id}
itemRef={refs.items.current[widget.id]}
id={definition.id}
{...definition.gridstack}
{...widget.shape.location}
{...widget.shape.size}
>
<widget.component className="grid-stack-item-content" module={v} />
<definition.component className="grid-stack-item-content" widget={widget} />
</GridstackTileWrapper>
);
})}

26
src/components/Dashboard/Wrappers/Wrapper/Wrapper.tsx
View File

@@ -10,7 +10,7 @@ interface DashboardWrapperProps {
}
export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
const { refs, items, integrations } = useGridstack('wrapper', wrapper.id);
const { refs, items, widgets } = useGridstack('wrapper', wrapper.id);
return (
<div
@@ -35,21 +35,23 @@ export const DashboardWrapper = ({ wrapper }: DashboardWrapperProps) => {
</GridstackTileWrapper>
);
})}
{Object.entries(integrations).map(([k, v]) => {
const widget = Widgets[k as keyof typeof Widgets] as IWidgetDefinition | undefined;
if (!widget) return null;
{widgets.map((widget) => {
const definition = Widgets[widget.id as keyof typeof Widgets] as
| IWidgetDefinition
| undefined;
if (!definition) return null;
return (
<GridstackTileWrapper
type="module"
key={k}
itemRef={refs.items.current[k]}
id={widget.id}
{...widget.gridstack}
{...v.shape.location}
{...v.shape.size}
type="widget"
key={widget.id}
itemRef={refs.items.current[widget.id]}
id={definition.id}
{...definition.gridstack}
{...widget.shape.location}
{...widget.shape.size}
>
<widget.component className="grid-stack-item-content" module={v} />
<definition.component className="grid-stack-item-content" widget={widget} />
</GridstackTileWrapper>
);
})}

11
src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
View File

@@ -1,7 +1,7 @@
import { GridStack, GridStackNode } from 'fily-publish-gridstack';
import { MutableRefObject, RefObject } from 'react';
import { IntegrationsType } from '../../../../types/integration';
import { AppType } from '../../../../types/app';
import { IWidget } from '../../../../widgets/widgets';
export const initializeGridstack = (
areaType: 'wrapper' | 'category' | 'sidebar',
@@ -10,7 +10,7 @@ export const initializeGridstack = (
itemRefs: MutableRefObject<Record<string, RefObject<HTMLDivElement>>>,
areaId: string,
items: AppType[],
integrations: IntegrationsType,
widgets: IWidget<string, any>[],
isEditMode: boolean,
events: {
onChange: (changedNode: GridStackNode) => void;
@@ -60,9 +60,10 @@ export const initializeGridstack = (
({ id }) =>
itemRefs.current[id] && grid.makeWidget(itemRefs.current[id].current as HTMLDivElement)
);
Object.keys(integrations).forEach(
(key) =>
itemRefs.current[key] && grid.makeWidget(itemRefs.current[key].current as HTMLDivElement)
console.log('widgets', widgets, itemRefs.current);
widgets.forEach(
({ id }) =>
itemRefs.current[id] && grid.makeWidget(itemRefs.current[id].current as HTMLDivElement)
);
grid.batchUpdate(false);
};

62
src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
View File

@@ -11,15 +11,14 @@ import {
import { useConfigContext } from '../../../../config/provider';
import { useConfigStore } from '../../../../config/store';
import { useResize } from '../../../../hooks/use-resize';
import { IntegrationsType } from '../../../../types/integration';
import { AppType } from '../../../../types/app';
import { TileBaseType } from '../../../../types/tile';
import { IWidget } from '../../../../widgets/widgets';
import { useEditModeStore } from '../../Views/useEditModeStore';
import { initializeGridstack } from './init-gridstack';
interface UseGristackReturnType {
items: AppType[];
integrations: Partial<IntegrationsType>;
widgets: IWidget<string, any>[];
refs: {
wrapper: RefObject<HTMLDivElement>;
items: MutableRefObject<Record<string, RefObject<HTMLDivElement>>>;
@@ -54,32 +53,24 @@ export const useGridstack = (
) ?? [],
[config]
);
const integrations = useMemo(() => {
if (!config) return;
return (Object.entries(config.integrations) as [keyof IntegrationsType, TileBaseType][])
.filter(
([k, v]) =>
v.area.type === areaType &&
(v.area.type === 'sidebar'
? v.area.properties.location === areaId
: v.area.properties.id === areaId)
)
.reduce((prev, [k, v]) => {
prev[k] = v as unknown as any;
return prev;
}, {} as IntegrationsType);
const widgets = useMemo(() => {
if (!config) return [];
return config.widgets.filter(
(w) =>
w.area.type === areaType &&
(w.area.type === 'sidebar'
? w.area.properties.location === areaId
: w.area.properties.id === areaId)
);
}, [config]);
// define items in itemRefs for easy access and reference to items
if (
Object.keys(itemRefs.current).length !==
items.length + Object.keys(integrations ?? {}).length
) {
if (Object.keys(itemRefs.current).length !== items.length + (widgets ?? []).length) {
items.forEach(({ id }: { id: keyof typeof itemRefs.current }) => {
itemRefs.current[id] = itemRefs.current[id] || createRef();
});
Object.keys(integrations ?? {}).forEach((k) => {
itemRefs.current[k] = itemRefs.current[k] || createRef();
(widgets ?? []).forEach(({ id }) => {
itemRefs.current[id] = itemRefs.current[id] || createRef();
});
}
@@ -102,7 +93,7 @@ export const useGridstack = (
const currentItem =
itemType === 'app'
? previous.apps.find((x) => x.id === itemId)
: previous.integrations[itemId as keyof typeof previous.integrations];
: previous.widgets.find((x) => x.id === itemId);
if (!currentItem) return previous;
currentItem.shape = {
@@ -126,11 +117,12 @@ export const useGridstack = (
};
}
const integrationsCopy = { ...previous.integrations };
integrationsCopy[itemId as keyof typeof integrationsCopy] = currentItem as any;
return {
...previous,
integrations: integrationsCopy,
widgets: [
...previous.widgets.filter((x) => x.id !== itemId),
{ ...(currentItem as IWidget<string, any>) },
],
};
});
}
@@ -149,8 +141,7 @@ export const useGridstack = (
const currentItem =
itemType === 'app'
? previous.apps.find((x) => x.id === itemId)
: previous.integrations[itemId as keyof typeof previous.integrations];
: previous.widgets.find((x) => x.id === itemId);
if (!currentItem) return previous;
if (areaType === 'sidebar') {
@@ -190,11 +181,12 @@ export const useGridstack = (
};
}
const integrationsCopy = { ...previous.integrations };
integrationsCopy[itemId as keyof typeof integrationsCopy] = currentItem as any;
return {
...previous,
integrations: integrationsCopy,
widgets: [
...previous.widgets.filter((x) => x.id !== itemId),
{ ...(currentItem as IWidget<string, any>) },
],
};
});
}
@@ -209,18 +201,18 @@ export const useGridstack = (
itemRefs,
areaId,
items,
integrations ?? {},
widgets ?? [],
isEditMode,
{
onChange,
onAdd,
}
);
}, [items.length, wrapperRef.current, Object.keys(integrations ?? {}).length]);
}, [items.length, wrapperRef.current, (widgets ?? []).length]);
return {
items,
integrations: integrations ?? {},
widgets: widgets ?? [],
refs: {
items: itemRefs,
wrapper: wrapperRef,

2
src/pages/api/modules/dashdot/info.ts
View File

@@ -13,7 +13,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
const config = getConfig(configName);
const dashDotUrl = config.integrations.dashdot?.properties.url;
const dashDotUrl = config.widgets.dashdot?.properties.url;
if (!dashDotUrl) {
return res.status(400).json({

2
src/pages/api/modules/dashdot/storage.ts
View File

@@ -13,7 +13,7 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
const config = getConfig(configName);
const dashDotUrl = config.integrations.dashdot?.properties.url;
const dashDotUrl = config.widgets.dashdot?.properties.url;
if (!dashDotUrl) {
return res.status(400).json({

2
src/tools/config/getFallbackConfig.ts
View File

@@ -6,7 +6,7 @@ export const getFallbackConfig = (name?: string): BackendConfigType => ({
name: name ?? 'default',
},
categories: [],
integrations: {},
widgets: {},
apps: [],
settings: {
common: {

4
src/types/config.ts
View File

@@ -1,8 +1,8 @@
import { CategoryType } from './category';
import { WrapperType } from './wrapper';
import { ConfigAppType, AppType } from './app';
import { IntegrationsType } from './integration';
import { SettingsType } from './settings';
import { IWidget } from '../widgets/widgets';
export interface ConfigType {
schemaVersion: string;
@@ -10,7 +10,7 @@ export interface ConfigType {
categories: CategoryType[];
wrappers: WrapperType[];
apps: AppType[];
integrations: IntegrationsType;
widgets: IWidget<string, any>[];
settings: SettingsType;
}

4
src/widgets/bitTorrent/BitTorrentTile.tsx
View File

@@ -20,10 +20,10 @@ const definition = defineWidget({
export type IBitTorrent = IWidget<typeof definition['id'], typeof definition>;
interface BitTorrentTileProps extends BaseTileProps {
module: IBitTorrent; // TODO: change to new type defined through widgetDefinition
widget: IBitTorrent; // TODO: change to new type defined through widgetDefinition
}
function BitTorrentTile({ className, module }: BitTorrentTileProps) {
function BitTorrentTile({ className, widget }: BitTorrentTileProps) {
return <HomarrCardWrapper>Bit Torrent</HomarrCardWrapper>;
}

6
src/widgets/calendar/CalendarTile.tsx
View File

@@ -34,10 +34,10 @@ const definition = defineWidget({
export type ICalendarWidget = IWidget<typeof definition['id'], typeof definition>;
interface CalendarTileProps extends BaseTileProps {
module: ICalendarWidget;
widget: ICalendarWidget;
}
function CalendarTile({ className, module }: CalendarTileProps) {
function CalendarTile({ className, widget }: CalendarTileProps) {
const { secondaryColor } = useColorTheme();
const { name: configName } = useConfigContext();
const { classes, cx } = useStyles(secondaryColor);
@@ -64,7 +64,7 @@ function CalendarTile({ className, module }: CalendarTileProps) {
size="xs"
fullWidth
onChange={() => {}}
firstDayOfWeek={module.properties.sundayStart ? 'sunday' : 'monday'}
firstDayOfWeek={widget.properties.sundayStart ? 'sunday' : 'monday'}
dayStyle={(date) => ({
margin: 1,
backgroundColor: isToday(date)

2
src/widgets/dashDot/DashDotCompactStorage.tsx
View File

@@ -58,7 +58,7 @@ const useDashDotStorage = () => {
'dashdot/storage',
{
configName,
url: config?.integrations.dashDot?.properties.url,
url: config?.widgets.dashDot?.properties.url,
},
],
queryFn: () => fetchDashDotStorageLoad(configName),

24
src/widgets/dashDot/DashDotTile.tsx
View File

@@ -50,24 +50,24 @@ const definition = defineWidget({
export type IDashDotTile = IWidget<typeof definition['id'], typeof definition>;
interface DashDotTileProps extends BaseTileProps {
module: IDashDotTile; // TODO: change to new type defined through widgetDefinition
widget: IDashDotTile; // TODO: change to new type defined through widgetDefinition
}
function DashDotTile({ module, className }: DashDotTileProps) {
function DashDotTile({ widget, className }: DashDotTileProps) {
const { classes } = useDashDotTileStyles();
const { t } = useTranslation('modules/dashdot');
const dashDotUrl = module?.properties.url;
const dashDotUrl = widget?.properties.url;
const { data: info } = useDashDotInfo();
const { data: info } = useDashDotInfo({ dashDotUrl });
const graphs = module?.properties.graphs.map((g) => ({
const graphs = widget?.properties.graphs.map((g) => ({
id: g,
name: t(`card.graphs.${g}.title`),
twoSpan: ['network', 'gpu'].includes(g),
isMultiView:
(g === 'cpu' && module.properties.cpuMultiView) ||
(g === 'storage' && module.properties.storageMultiView),
(g === 'cpu' && widget.properties.cpuMultiView) ||
(g === 'storage' && widget.properties.storageMultiView),
}));
const heading = (
@@ -78,7 +78,7 @@ function DashDotTile({ module, className }: DashDotTileProps) {
const menu = (
// TODO: add widgetWrapper that is generic and uses the definition
<WidgetsMenu module={module} integration={definition.id} />
<WidgetsMenu widget={widget} integration={definition.id} />
);
if (!dashDotUrl) {
@@ -93,7 +93,7 @@ function DashDotTile({ module, className }: DashDotTileProps) {
);
}
const isCompact = module?.properties.useCompactView ?? false;
const isCompact = widget?.properties.useCompactView ?? false;
const isCompactStorageVisible = graphs?.some((g) => g.id === 'storage' && isCompact);
@@ -130,14 +130,14 @@ function DashDotTile({ module, className }: DashDotTileProps) {
);
}
const useDashDotInfo = () => {
const { name: configName, config } = useConfigContext();
const useDashDotInfo = ({ dashDotUrl }: { dashDotUrl: string }) => {
const { name: configName } = useConfigContext();
return useQuery({
queryKey: [
'dashdot/info',
{
configName,
url: config?.integrations.dashDot?.properties.url,
dashDotUrl,
},
],
queryFn: () => fetchDashDotInfo(configName),

8
src/widgets/date/DateTile.tsx
View File

@@ -30,17 +30,17 @@ const definition = defineWidget({
export type IDateWidget = IWidget<typeof definition['id'], typeof definition>;
interface DateTileProps extends BaseTileProps {
module: IDateWidget; // TODO: change to new type defined through widgetDefinition
widget: IDateWidget; // TODO: change to new type defined through widgetDefinition
}
function DateTile({ className, module }: DateTileProps) {
function DateTile({ className, widget }: DateTileProps) {
const date = useDateState();
const formatString = module.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
const formatString = widget.properties.display24HourFormat ? 'HH:mm' : 'h:mm A';
// TODO: add widgetWrapper that is generic and uses the definition
return (
<HomarrCardWrapper className={className}>
<WidgetsMenu integration={definition.id} module={module} />
<WidgetsMenu integration={definition.id} widget={widget} />
<Center style={{ height: '100%' }}>
<Stack spacing="xs">
<Title>{dayjs(date).format(formatString)}</Title>

4
src/widgets/torrentNetworkTraffic/TorrentNetworkTrafficTile.tsx
View File

@@ -21,10 +21,10 @@ const definition = defineWidget({
export type ITorrentNetworkTraffic = IWidget<typeof definition['id'], typeof definition>;
interface TorrentNetworkTrafficTileProps extends BaseTileProps {
module: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition
widget: ITorrentNetworkTraffic; // TODO: change to new type defined through widgetDefinition
}
function TorrentNetworkTrafficTile({ className, module }: TorrentNetworkTrafficTileProps) {
function TorrentNetworkTrafficTile({ className, widget }: TorrentNetworkTrafficTileProps) {
return <HomarrCardWrapper>TorrentNetworkTraffic</HomarrCardWrapper>;
}

14
src/widgets/weather/WeatherTile.tsx
View File

@@ -33,11 +33,11 @@ const definition = defineWidget({
export type IWeatherWidget = IWidget<typeof definition['id'], typeof definition>;
interface WeatherTileProps extends BaseTileProps {
module: IWeatherWidget;
widget: IWeatherWidget;
}
function WeatherTile({ className, module }: WeatherTileProps) {
const { data: weather, isLoading, isError } = useWeatherForCity(module.properties.location);
function WeatherTile({ className, widget }: WeatherTileProps) {
const { data: weather, isLoading, isError } = useWeatherForCity(widget.properties.location);
if (isLoading) {
return (
@@ -67,7 +67,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
// TODO: add widgetWrapper that is generic and uses the definition
return (
<HomarrCardWrapper className={className}>
<WidgetsMenu integration={definition.id} module={module} />
<WidgetsMenu integration={definition.id} widget={widget} />
<Center style={{ height: '100%' }}>
<Group spacing="md" noWrap align="center">
<WeatherIcon code={weather!.current_weather.weathercode} />
@@ -75,7 +75,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
<Title order={2}>
{getPerferedUnit(
weather!.current_weather.temperature,
module.properties.displayInFahrenheit
widget.properties.displayInFahrenheit
)}
</Title>
<Group spacing="xs" noWrap>
@@ -83,7 +83,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
<span>
{getPerferedUnit(
weather!.daily.temperature_2m_max[0],
module.properties.displayInFahrenheit
widget.properties.displayInFahrenheit
)}
</span>
<IconArrowUpRight size={16} style={{ right: 15 }} />
@@ -92,7 +92,7 @@ function WeatherTile({ className, module }: WeatherTileProps) {
<span>
{getPerferedUnit(
weather!.daily.temperature_2m_min[0],
module.properties.displayInFahrenheit
widget.properties.displayInFahrenheit
)}
</span>
<IconArrowDownRight size={16} />