Merge pull request #1184 from ishaanparlikar/1182-display-city

✨ display location name on a weather tile

public/locales/en/modules/weather.json

@@ -7,6 +7,9 @@
       "displayInFahrenheit": {
         "label": "Display in Fahrenheit"
       },
+      "displayCityName":{
+        "label":"Display City Name"
+      },
       "location": {
         "label": "Weather location"
       }

src/widgets/weather/WeatherIcon.tsx

@@ -11,9 +11,11 @@ import {
   IconSun,
 } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
+import { useElementSize } from '@mantine/hooks';
 
 interface WeatherIconProps {
   code: number;
+  size?: number;
 }
 
 /**
@@ -21,16 +23,17 @@ interface WeatherIconProps {
  * @param code weather code from api
  * @returns weather tile component
  */
-export const WeatherIcon = ({ code }: WeatherIconProps) => {
+export const WeatherIcon = ({ code, size=50 }: WeatherIconProps) => {
   const { t } = useTranslation('modules/weather');
-
+  const { width, ref } = useElementSize();
+  
   const { icon: Icon, name } =
     weatherDefinitions.find((wd) => wd.codes.includes(code)) ?? unknownWeather;
 
   return (
     <Tooltip withinPortal withArrow label={t(`card.weatherDescriptions.${name}`)}>
       <Box>
-        <Icon style={{ float: 'left' }} size={50} />
+        <Icon style={{ float: 'left' }} size={size} />
       </Box>
     </Tooltip>
   );

src/widgets/weather/WeatherTile.tsx

@@ -1,6 +1,12 @@
-import { Center, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Center, Flex, Group, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
-import { IconArrowDownRight, IconArrowUpRight, IconCloudRain } from '@tabler/icons-react';
+import {
+  IconArrowDownRight,
+  IconArrowUpRight,
+  IconCloudRain,
+  IconCurrentLocation,
+  IconMapPin,
+} from '@tabler/icons-react';
 import { api } from '~/utils/api';
 
 import { defineWidget } from '../helper';
@@ -15,6 +21,10 @@ const definition = defineWidget({
       type: 'switch',
       defaultValue: false,
     },
+    displayCityName: {
+      type: 'switch',
+      defaultValue: false,
+    },
     location: {
       type: 'location',
       defaultValue: {
@@ -75,21 +85,27 @@ function WeatherTile({ widget }: WeatherTileProps) {
   // TODO: add widgetWrapper that is generic and uses the definition
   return (
     <Stack
-      ref={ref}
-      spacing="xs"
-      justify="space-around"
-      align="center"
       style={{ height: '100%', width: '100%' }}
+      justify="space-around"
+      ref={ref}
+      spacing={0}
+      align="center"
     >
-      <Group align="center" position="center" spacing="xs">
-        <WeatherIcon code={weather.current_weather.weathercode} />
-        <Title>
+      <Flex
+        align="center"
+        gap={width < 120 ? '0.25rem' : 'xs'}
+        justify={'center'}
+        direction={width < 200 ? 'column' : 'row'}
+      >
+        <WeatherIcon size={width < 300 ? 30 : 50} code={weather.current_weather.weathercode} />
+        <Title size={'h2'}>
           {getPerferedUnit(
             weather.current_weather.temperature,
             widget.properties.displayInFahrenheit
           )}
         </Title>
-      </Group>
+      </Flex>
+
       {width > 200 && (
         <Group noWrap spacing="xs">
           <IconArrowUpRight />
@@ -104,6 +120,13 @@ function WeatherTile({ widget }: WeatherTileProps) {
           )}
         </Group>
       )}
+
+      {widget.properties.displayCityName && (
+        <Group noWrap spacing={5} align="center">
+          <IconMapPin height={15} width={15} />
+          <Text style={{ whiteSpace: 'nowrap' }}>{widget.properties.location.name}</Text>
+        </Group>
+      )}
     </Stack>
   );
 }