Refactor

src/components/DataTable/DataTable.tsx

@@ -0,0 +1,122 @@
+import {
+	type MRT_Row,
+	type MRT_TableOptions,
+	MantineReactTable,
+	useMantineReactTable,
+} from 'mantine-react-table';
+import { memo } from 'react';
+import '../../../src/dataTableStyles.css';
+import { ActionIcon, Button, Flex, Text } from '@mantine/core';
+import { modals } from '@mantine/modals';
+import { IconEdit, IconTrash } from '@tabler/icons-react';
+import { appTheme } from 'contexts';
+import { useMutationAPI } from 'hooks';
+import { useAtom } from 'jotai';
+import { FiPlus } from 'react-icons/fi';
+import { actionIconClasses, buttonClasses } from 'styles';
+
+export function DataTableComponent({
+	tableName,
+	columns,
+	tableData,
+	isFetching,
+	isLoading,
+	endpoint,
+}: {
+	tableName: string;
+	columns: any;
+	tableData: any;
+	isFetching: boolean;
+	isLoading: boolean;
+	endpoint: string;
+}) {
+	const [theme, _] = useAtom(appTheme);
+	const { mutateAsync: createRow } = useMutationAPI();
+	const { mutateAsync: editRow } = useMutationAPI();
+	const { mutateAsync: deleteRow } = useMutationAPI();
+	const handleCreateRow: MRT_TableOptions<any>['onCreatingRowSave'] = async ({
+		values,
+		exitCreatingMode,
+	}) => {
+		createRow({ method: 'POST', endpoint: endpoint, body: values });
+		exitCreatingMode();
+	};
+	const handleEditRow: MRT_TableOptions<any>['onEditingRowSave'] = async ({
+		values,
+		table,
+	}) => {
+		editRow({ method: 'PATCH', endpoint: endpoint, body: values });
+		table.setEditingRow(null);
+	};
+	const openDeleteConfirmModal = (row: MRT_Row<any>) =>
+		modals.openConfirmModal({
+			title: 'Are you sure you want to delete this user?',
+			children: <Text>Are you sure?</Text>,
+			labels: { confirm: 'Delete', cancel: 'Cancel' },
+			confirmProps: { color: 'red' },
+			onConfirm: () =>
+				deleteRow({ method: 'DELETE', endpoint: endpoint, body: row.original }),
+		});
+	const table = useMantineReactTable({
+		columns: columns,
+		data: tableData,
+		enableFacetedValues: true,
+		enablePagination: false,
+		enableRowVirtualization: true,
+		enableEditing: true,
+		createDisplayMode: 'modal',
+		editDisplayMode: 'row',
+		enableBottomToolbar: false,
+		enableToolbarInternalActions: false,
+		onCreatingRowSave: handleCreateRow,
+		onEditingRowSave: handleEditRow,
+		getRowId: (row: any) => row.id,
+		initialState: {
+			showProgressBars: isFetching,
+			showLoadingOverlay: isLoading,
+			isLoading: isLoading,
+		},
+		state: {
+			showProgressBars: isFetching,
+			showLoadingOverlay: isLoading,
+			isLoading: isLoading,
+		},
+		mantinePaperProps: { className: 'root' },
+		renderRowActions: ({ row, table }) => (
+			<Flex gap='md'>
+				<ActionIcon
+					className={actionIconClasses.editButton}
+					classNames={actionIconClasses}
+					onClick={() => table.setEditingRow(row)}
+				>
+					<IconEdit />
+				</ActionIcon>
+				<ActionIcon color='red' onClick={() => openDeleteConfirmModal(row)}>
+					<IconTrash />
+				</ActionIcon>
+			</Flex>
+		),
+		mantineCreateRowModalProps: {
+			style: {
+				color: theme.primaryColor,
+			},
+		},
+		renderTopToolbarCustomActions: ({ table }) => {
+			return (
+				<Button
+					className={buttonClasses.tableButton}
+					classNames={buttonClasses}
+					disabled={tableName === 'Personalization'}
+					onClick={() => table.setCreatingRow(true)}
+				>
+					<FiPlus />
+				</Button>
+			);
+		},
+	});
+	return <MantineReactTable table={table} />;
+}
+
+export const DataTable = memo(DataTableComponent);
+
+export default DataTable;

src/components/DataTable/columns/ApplicationColumns.tsx

@@ -0,0 +1,86 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function ApplicationColumns() {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'id',
+				header: 'ID',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.name) {
+						return `${row.name}`;
+					}
+					return '';
+				},
+				id: 'name',
+				header: 'Name',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.url) {
+						return `${row.url}`;
+					}
+					return '';
+				},
+				id: 'url',
+				header: 'Url',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.icon) {
+						return `${row.icon}`;
+					}
+					return '';
+				},
+				id: 'icon',
+				header: 'Icon',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.baseUrl) {
+						return `${row.baseUrl}`;
+					}
+					return '';
+				},
+				id: 'baseUrl',
+				header: 'Base Url',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.filterName) {
+						return `${row.filterName}`;
+					}
+					return '';
+				},
+				id: 'filterName',
+				header: 'Filter Name',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+	return columns;
+}

src/components/DataTable/columns/BookmarkColumns.tsx

@@ -0,0 +1,64 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function BookmarkColumns(groups: any) {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'id',
+				header: 'ID',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.name) {
+						return `${row.name}`;
+					}
+					return '';
+				},
+				id: 'name',
+				header: 'Name',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.url) {
+						return `${row.url}`;
+					}
+					return '';
+				},
+				id: 'url',
+				header: 'Url',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.category) {
+						return `${row.category}`;
+					}
+					return '';
+				},
+				id: 'category',
+				header: 'Category',
+				editVariant: 'select',
+				mantineEditSelectProps: { data: groups },
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[groups],
+	);
+
+	return columns;
+}

src/components/DataTable/columns/CategoryColumns.tsx

@@ -0,0 +1,66 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function CategoryColumns() {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'id',
+				header: 'ID',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.categoryName) {
+						return `${row.categoryName}`;
+					}
+					return '';
+				},
+				id: 'categoryName',
+				header: 'Name',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.categoryIndex > -1) {
+						return `${row.categoryIndex}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'categoryIndex',
+				header: 'Index',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.filterName) {
+						return `${row.filterName}`;
+					}
+					return '';
+				},
+				id: 'filterName',
+				header: 'Filter Name',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+	return columns;
+}

src/components/DataTable/columns/MessagesColumns.tsx

@@ -0,0 +1,38 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function MessagesColumns() {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'id',
+				header: 'ID',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.message) {
+						return `${row.message}`;
+					}
+					return '';
+				},
+				id: 'message',
+				header: 'Message',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+	return columns;
+}

src/components/DataTable/columns/PersonalizationColumns.tsx

@@ -0,0 +1,49 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function PersonalizationColumns() {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row: any) => {
+					if (row.firstName) {
+						return `${row.firstName}`;
+					}
+					return '';
+				},
+				id: 'firstName',
+				header: 'First Name',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row: any) => {
+					if (row.lastName) {
+						return `${row.lastName}`;
+					}
+					return '';
+				},
+				id: 'lastName',
+				header: 'Last Name',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row: any) => {
+					if (row.email) {
+						return `${row.email}`;
+					}
+					return '';
+				},
+				id: 'email',
+				header: 'Email',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+	return columns;
+}

src/components/DataTable/columns/SearchProviderColumns.tsx

@@ -0,0 +1,62 @@
+import type { MRT_ColumnDef } from 'mantine-react-table';
+import { useMemo } from 'react';
+
+export function SearchProviderColumns() {
+	const columns = useMemo<MRT_ColumnDef<any>[]>(
+		() => [
+			{
+				accessorFn: (row) => {
+					if (row.id) {
+						return `${row.id}`;
+					}
+					return '';
+				},
+				enableEditing: false,
+				id: 'id',
+				header: 'ID',
+				size: 50,
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.name) {
+						return `${row.name}`;
+					}
+					return '';
+				},
+				id: 'name',
+				header: 'Name',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.url) {
+						return `${row.url}`;
+					}
+					return '';
+				},
+				id: 'url',
+				header: 'Url',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+			{
+				accessorFn: (row) => {
+					if (row.prefix) {
+						return `${row.prefix}`;
+					}
+					return '';
+				},
+				id: 'prefix',
+				header: 'Prefix',
+				Cell: ({ renderedCellValue }) => renderedCellValue,
+				Header: ({ column }) => column.columnDef.header,
+			},
+		],
+		[],
+	);
+
+	return columns;
+}

src/components/HelpModal/HelpModal.tsx

@@ -0,0 +1,59 @@
+import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
+import { appTheme } from 'contexts';
+import { useAtom } from 'jotai';
+import { modalClasses } from 'styles';
+
+export function HelpModal({
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+	providers,
+	providerModalOpened,
+	closeProviderModal,
+}: any) {
+	const [theme, _] = useAtom(appTheme);
+	return (
+		<Modal.Root
+			size={'60%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={providerModalOpened}
+			onClose={() => {
+				closeProviderModal();
+				setValue('');
+				setProviderLabel('Google Search');
+				setProviderURL('https://www.google.com/search?q=');
+			}}
+			style={{
+				'--color-text-pri': theme.primaryColor,
+				'--color-text-acc': theme.accentColor,
+				'--color-background': theme.backgroundColor,
+				'--color-border': theme.borderColor,
+				'--color-search-background': theme.searchColor,
+				'--image-background': `url(${theme.backgroundImage})`,
+			}}
+			closeOnEscape
+			closeOnClickOutside
+		>
+			<Modal.Overlay />
+			<Modal.Content>
+				<Modal.Header>
+					<Modal.Title>Help info</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Stack gap={0} w={'100%'} align='center'>
+						<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
+						<Divider py={8} w={'65%'} color={theme.accentColor} />
+						{providers?.map((provider: any) => (
+							<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
+								<Text>{provider.prefix}</Text>
+								<Text>{provider.name}</Text>
+							</Group>
+						))}
+					</Stack>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}

src/components/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@mantine/core';
 
-export default function ThemeProvider({
+export function ThemeProvider({
 	theme,
 	children,
 }: { theme: any; children: React.ReactNode }) {

src/components/ToastError.tsx

@@ -1,5 +1,5 @@
 import { Stack, Text } from '@mantine/core';
-import { stackClasses } from '../styles';
+import { stackClasses } from 'styles';
 
 export function ToastError({ err }: { err: any }) {
 	const errorResponse = JSON.parse(err.message);

src/components/WeatherModal/HourlyCard.tsx

@@ -0,0 +1,120 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Box, Card, Center, Group, Image, Stack, Text } from '@mantine/core';
+
+export enum WindDirection {
+	N = 0,
+	NE = 45,
+	E = 90,
+	SE = 135,
+	S = 180,
+	SW = 225,
+	W = 270,
+	NW = 315,
+}
+
+export default function HourlyCard({ weather }: any) {
+	return (
+		<Stack gap={0} align='center'>
+			<Card
+				style={{
+					height: '8rem',
+					width: '4rem',
+					backgroundColor: 'var(--color-text-pri)',
+					background: 'rgba(255, 255, 255, 0.6)',
+					padding: 0,
+					margin: 0,
+				}}
+			>
+				<Stack gap={0} h={'100%'} w={'100%'} align='center'>
+					<Stack gap={0} align='center'>
+						<Text mb={-6} fz={12} style={{ zIndex: 2 }}>
+							{new Date(weather.startTime).toLocaleString('en-US', {
+								weekday: 'short',
+								month: 'numeric',
+								day: 'numeric',
+							})}
+						</Text>
+						<Text fz={12} style={{ zIndex: 2 }}>
+							{new Date(weather.startTime).toLocaleTimeString('en-US', {
+								hour: 'numeric',
+								minute: 'numeric',
+							})}
+						</Text>
+						<Stack gap={0} align='center'>
+							<Box
+								style={{
+									position: 'absolute',
+									width: '56px',
+									height: '56px',
+									backgroundColor: 'transparent',
+									boxShadow:
+										'inset 0px 0px 10px 3px rgba(255, 255, 255, 1), 0px 0px 10px 0px rgba(255, 255, 255, .6)',
+									zIndex: 1,
+									borderRadius: '100%',
+									borderStyle: 'none',
+									border: '0px solid',
+								}}
+							/>
+							<Image
+								src={weather.icon}
+								style={{
+									zIndex: 0,
+									borderRadius: '100%',
+									border: '0px solid',
+									borderStyle: 'none',
+								}}
+							/>
+						</Stack>
+					</Stack>
+					<Stack gap={0} align='center' style={{ zIndex: 1 }}>
+						<Center>
+							<Icon
+								icon={'mdi:navigation'}
+								style={{
+									position: 'absolute',
+									transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+								}}
+							/>
+							<Icon fontSize={28} icon={'mdi:circle-outline'} />
+						</Center>
+						<Text mt={-6} fz={12}>
+							{weather.windSpeed}
+						</Text>
+					</Stack>
+				</Stack>
+			</Card>
+			<Text
+				mt={4}
+				w={'100%'}
+				fz={14}
+				style={{
+					textAlign: 'center',
+					borderRadius: '4px',
+					background: 'rgba(0, 0, 0, 0.6)',
+				}}
+			>
+				{weather.temperature}°{weather.temperatureUnit}/{weather.relativeHumidity.value}%
+			</Text>
+			<Text
+				mt={4}
+				w={'100%'}
+				fz={14}
+				style={{
+					textAlign: 'center',
+					borderRadius: '4px',
+					background: 'rgba(0, 0, 0, 0.6)',
+				}}
+			>
+				<Group gap={0} justify='center'>
+					<Icon
+						icon={'mdi:drop'}
+						style={{
+							transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+						}}
+					/>
+					{`${weather.probabilityOfPrecipitation.value}`}%
+				</Group>
+			</Text>
+		</Stack>
+	);
+}

src/components/WeatherModal/SmallOutlookCard.tsx

@@ -0,0 +1,60 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Box, Center, Image, Overlay, Stack, Text } from '@mantine/core';
+
+export enum WindDirection {
+	N = 0,
+	NE = 45,
+	E = 90,
+	SE = 135,
+	S = 180,
+	SW = 225,
+	W = 270,
+	NW = 315,
+}
+
+export default function SmallOutlookCard({ weather }: any) {
+	return (
+		<Center display={'flex'}>
+			<Box pos={'relative'} style={{ zIndex: -1 }}>
+				<Image radius={'lg'} src={weather.icon} />
+				<Overlay
+					color='black'
+					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
+					zIndex={0}
+					radius={'lg'}
+				/>
+			</Box>
+			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
+				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
+					<Center>
+						<Icon
+							icon={'mdi:navigation'}
+							style={{
+								position: 'absolute',
+								transform: `rotate(${WindDirection[weather.windDirection]}deg)`,
+							}}
+						/>
+						<Icon fontSize={32} icon={'mdi:circle-outline'} />
+					</Center>
+					<Text mt={-6} fz={12}>
+						{weather.windSpeed}
+					</Text>
+				</Stack>
+				<Stack gap={0} pos={'absolute'} bottom={8}>
+					<Text mt={-4} mb={-4} fz={14}>
+						Precip:
+					</Text>
+					<Text mt={-8} mb={-8} p={0} fz={24}>
+						{weather.precipitation}%
+					</Text>
+					<Text mt={-4} mb={-4} fz={14}>
+						{weather.isDayTime ? 'High of:' : 'Low of:'}
+					</Text>
+					<Text mt={-8} mb={-8} p={0} fz={36}>
+						{weather.temperature}°F
+					</Text>
+				</Stack>
+			</Stack>
+		</Center>
+	);
+}

src/components/WeatherModal/SmallWeatherCard.tsx

@@ -0,0 +1,58 @@
+import { Icon } from '@iconify/react/dist/iconify.js';
+import { Box, Center, Group, Image, Overlay, Stack, Text } from '@mantine/core';
+
+export default function SmallWeatherCard({ weather }: any) {
+	return (
+		<Center display={'flex'}>
+			<Box pos={'relative'} style={{ zIndex: -1 }}>
+				<Image radius={'lg'} src={weather.icon} />
+				<Overlay
+					color='black'
+					gradient='linear-gradient(0deg, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0.35))'
+					zIndex={0}
+					radius={'lg'}
+				/>
+			</Box>
+			<Stack h={'124px'} w={'124px'} gap={0} pos={'absolute'}>
+				<Text mb={-8} p={0} fz={12}>
+					{weather.highTemp}°F/{weather.lowTemp}°F
+				</Text>
+				<Stack gap={0} align='center' pos={'absolute'} right={0} top={0}>
+					{weather.precipitation !== 'N/A' && (
+						<Group gap={0}>
+							<Icon icon={'mdi:weather-pouring'} height={32} width={32} />
+							<Text>{weather.precipitation} mm</Text>
+						</Group>
+					)}
+					{weather.precipitation === 'N/A' && (
+						<Icon icon={'mdi:white-balance-sunny'} height={32} width={32} />
+					)}
+					<Center>
+						<Icon
+							icon={'mdi:navigation'}
+							style={{
+								position: 'absolute',
+								transform: `rotate(${weather.windDirection}deg)`,
+							}}
+						/>
+						<Icon fontSize={32} icon={'mdi:circle-outline'} />
+					</Center>
+					<Text mt={-6} fz={12}>
+						{weather.windSpeed} mph
+					</Text>
+				</Stack>
+				<Stack gap={0} pos={'absolute'} bottom={8}>
+					<Text mt={-8} mb={-8} p={0} fz={36}>
+						{weather.temperature}°F
+					</Text>
+					<Text mt={-8} fz={12}>
+						Feels like: {weather.heatIndex}°F
+					</Text>
+					<Text mt={-6} fz={12}>
+						Humidity: {weather.humidity}%
+					</Text>
+				</Stack>
+			</Stack>
+		</Center>
+	);
+}

src/components/WeatherModal/WeatherModal.tsx

@@ -0,0 +1,116 @@
+import { Center, Divider, Group, Modal, Stack } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { modalClasses } from 'styles';
+import SmallOutlookCard from './SmallOutlookCard';
+import SmallWeatherCard from './SmallWeatherCard';
+
+import { useEffect, useState } from 'react';
+import { appTheme } from '../../contexts/theme';
+import HourlyCard from './HourlyCard';
+
+export function WeatherModal({
+	current,
+	outlook,
+	hourly,
+	closeWeatherModal,
+	weatherModalOpened,
+	setValue,
+	setProviderLabel,
+	setProviderURL,
+}: any) {
+	const [theme, _] = useAtom(appTheme);
+	const [hourlyForecast, setHourlyForecast] = useState<any>([]);
+	const [sunset, setSunset] = useState(100);
+
+	useEffect(() => {
+		if (hourly) {
+			setHourlyForecast(hourly.properties.periods.slice(1, 13));
+		}
+	}, [hourly]);
+
+	useEffect(() => {
+		if (hourlyForecast) {
+			hourlyForecast[0]?.isDaytime
+				? setSunset(
+						(hourlyForecast.findIndex((item: any) => item.isDaytime === false) / 12) *
+							100,
+					)
+				: setSunset(
+						(hourlyForecast.findIndex((item: any) => item.isDaytime === true) / 12) * 100,
+					);
+		}
+	}, [hourlyForecast]);
+	return (
+		<Modal.Root
+			size={'60%'}
+			className={modalClasses.helpModal}
+			classNames={modalClasses}
+			opened={weatherModalOpened}
+			onClose={() => {
+				closeWeatherModal();
+				setValue('');
+				setProviderLabel('Google Search');
+				setProviderURL('https://www.google.com/search?q=');
+			}}
+			style={{
+				'--color-text-pri': theme.primaryColor,
+				'--color-text-acc': theme.accentColor,
+				'--color-background': theme.backgroundColor,
+				'--color-border': theme.borderColor,
+				'--color-search-background': theme.searchColor,
+				'--image-background': `url(${theme.backgroundImage})`,
+			}}
+			closeOnEscape
+			closeOnClickOutside
+		>
+			<Modal.Overlay />
+			<Modal.Content>
+				<Modal.Header>
+					<Modal.Title>Weather Forecast</Modal.Title>
+					<Modal.CloseButton />
+				</Modal.Header>
+				<Modal.Body pb={'2rem'}>
+					<Center w={'100%'}>
+						<Stack>
+							<Group gap={0} w={'100%'} align='center' justify='center'>
+								<Stack gap={0} align='center'>
+									<h3 style={{ padding: 0, margin: 0 }}>Currently</h3>
+									<Stack>
+										<SmallWeatherCard weather={current} />
+									</Stack>
+								</Stack>
+								<Divider orientation='vertical' mx={16} color={theme.accentColor} />
+								<Group gap={8}>
+									{outlook.map((o: any) => (
+										<Stack key={o.name} gap={0} align='center'>
+											<h3 style={{ padding: 0, margin: 0 }}>{o.name}</h3>
+											<Stack>
+												<SmallOutlookCard weather={o} />
+											</Stack>
+										</Stack>
+									))}
+								</Group>
+							</Group>
+							<Divider orientation='horizontal' mx={8} color={theme.accentColor} />
+							<Group
+								style={{
+									background:
+										hourlyForecast.length > 0 && hourlyForecast[0].isDaytime
+											? `linear-gradient(90deg, rgba(245, 225, 171, 0.85) ${sunset - 5}%, rgba(35, 28, 42, 0.85) ${sunset + 5}%)`
+											: `linear-gradient(90deg, rgba(35, 28, 42, 0.85)${sunset - 5}%, rgba(245, 225, 171, 0.85)${sunset + 5}%)`,
+									padding: '.5rem',
+									borderRadius: '.5rem',
+								}}
+							>
+								{hourlyForecast.length > 0 &&
+									hourlyForecast.map((h: any) => {
+										return <HourlyCard key={h.time} weather={h} />;
+									})}
+							</Group>
+						</Stack>
+					</Center>
+				</Modal.Body>
+			</Modal.Content>
+		</Modal.Root>
+	);
+}

src/components/index.ts

@@ -0,0 +1,10 @@
+export { HelpModal } from './HelpModal/HelpModal';
+export { WeatherModal } from './WeatherModal/WeatherModal';
+export { DataTable } from './DataTable/DataTable';
+export { ThemeProvider } from './ThemeProvider';
+export { ApplicationColumns } from './DataTable/columns/ApplicationColumns';
+export { BookmarkColumns } from './DataTable/columns/BookmarkColumns';
+export { CategoryColumns } from './DataTable/columns/CategoryColumns';
+export { MessagesColumns } from './DataTable/columns/MessagesColumns';
+export { PersonalizationColumns } from './DataTable/columns/PersonalizationColumns';
+export { SearchProviderColumns } from './DataTable/columns/SearchProviderColumns';