Updated names for uniformity

This commit is contained in:
Sean Edmunds
2025-04-28 14:21:45 -05:00
parent f44f6e004b
commit 19b793fbf9
26 changed files with 247 additions and 404 deletions

View File

@@ -40,12 +40,12 @@ const ApplicationSettings = () => {
index: 0,
enabled: 1,
};
const appsEndpoint = 'api/apps';
const appsEndpoint = 'api/applications';
const appsOrderEndpoint = 'api/applicationOrder';
const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
const { data: applicationData, isFetching: isAppsFetching } = useQueryAPI({
endpoint: appsEndpoint,
});
const [applicationData, setApplicationData] = useState<Application[]>([]);
const [applications, setApplications] = useState<Application[]>([]);
const [applicationList, setApplicationList] = useState<Application[]>([]);
const { theme, isMobile, reorder } = useCommonHooks();
const [newApplication, setNewApplication] = useState<Application>(defaultApplication);
@@ -64,7 +64,7 @@ const ApplicationSettings = () => {
return;
}
const items = reorder(applicationData, result.source.index, result.destination.index);
const items = reorder(applications, result.source.index, result.destination.index);
setApplicationList(
items.map((item: any, index: number) => {
return {
@@ -83,19 +83,19 @@ const ApplicationSettings = () => {
};
useEffect(() => {
if (apps && !isAppsFetching) {
setApplicationData(
apps
if (applicationData && !isAppsFetching) {
setApplications(
applicationData
.filter((a: Application) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
);
}
}, [apps, isAppsFetching, debouncedSearch]);
}, [applicationData, isAppsFetching, debouncedSearch]);
useEffect(() => {
if (applicationList.length > 0 && applicationList !== applicationData) {
if (applicationList.length > 0 && applicationList !== applications) {
mutateAsync({
method: 'PATCH',
endpoint: appsOrderEndpoint,
@@ -229,7 +229,7 @@ const ApplicationSettings = () => {
endpoint: appsEndpoint,
body: {
...newApplication,
index: applicationData.length,
index: applications.length,
},
}).then(handleClose);
}
@@ -253,10 +253,11 @@ const ApplicationSettings = () => {
openModal={openModal}
title={'Applications'}
tooltip={{
title: 'Applications are the apps that will be displayed on the homepage.',
title:
'Applications are the applicationData that will be displayed on the homepage.',
highlightList: [
'Applications',
'apps',
'applicationData',
'application',
'name',
'base url',
@@ -288,7 +289,7 @@ const ApplicationSettings = () => {
ref={provided.innerRef}
{...provided.droppableProps}
>
{applicationData?.map((app: Application) => (
{applications?.map((app: Application) => (
<Draggable
key={app.id}
draggableId={`${app.id}`}
@@ -361,7 +362,7 @@ const ApplicationSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{applicationData?.map((application: Application) => (
{applications?.map((application: Application) => (
<GridCol span={6} key={application.id}>
<Popover
withArrow

View File

@@ -1,6 +1,5 @@
import {
ActionIcon,
Button,
Card,
type ComboboxItem,
type ComboboxLikeRenderOptionInput,
@@ -38,7 +37,7 @@ function DebouncedApplication({
};
useEffect(() => {
if (debounced && Object.keys(debounced).length > 0) {
mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced });
mutateAsync({ method: 'PATCH', endpoint: 'api/applications', body: debounced });
}
}, [debounced]);
@@ -52,6 +51,7 @@ function DebouncedApplication({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(app, 'api/applications')}
title='Delete Application'
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -68,25 +68,6 @@ function DebouncedApplication({
}}
>{`"${app.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(app, 'api/apps');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

View File

@@ -15,12 +15,12 @@ const BookmarkSettings = () => {
categoryIndex: 0,
filterName: '',
};
const linksEndpoint = 'api/links';
const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
endpoint: linksEndpoint,
const bookmarksEndpoint = 'api/bookmarks';
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
endpoint: bookmarksEndpoint,
});
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const categoriesEndpoint = 'api/categories';
const categoriesEndpoint = 'api/bookmarkCategories';
const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
endpoint: categoriesEndpoint,
});
@@ -60,10 +60,10 @@ const BookmarkSettings = () => {
}
useEffect(() => {
if (linkData && linksIsFetched) {
setBookmarks(linkData);
if (bookmarkData && bookmarksIsFetched) {
setBookmarks(bookmarkData);
}
}, [linksIsFetched, linkData]);
}, [bookmarksIsFetched, bookmarkData]);
useEffect(() => {
if (groupData && groupsIsFetched) {
@@ -98,7 +98,11 @@ const BookmarkSettings = () => {
useEffect(() => {
if (groupList.length > 0 && groupList !== groups) {
mutateAsync({ method: 'PATCH', endpoint: 'api/categoryOrder', body: groupList });
mutateAsync({
method: 'PATCH',
endpoint: 'api/bookmarkCategoryOrder',
body: groupList,
});
}
}, [groupList]);

View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -33,7 +24,7 @@ function DebouncedBookmarkItem({
};
useEffect(() => {
if (Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/links', body: debounced });
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarks', body: debounced });
}
}, [debounced]);
@@ -48,6 +39,7 @@ function DebouncedBookmarkItem({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(bookmark, 'api/bookmarks')}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
<Text>Are you sure you want to delete this bookmark?</Text>
@@ -63,25 +55,6 @@ function DebouncedBookmarkItem({
}}
>{`"${bookmark.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(bookmark, 'api/links');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
title='Delete Bookmark'

View File

@@ -72,7 +72,11 @@ function DebouncedGroupSettingsItem({
useEffect(() => {
if (Object.keys(debounced).length) {
mutateAsync({ method: 'PATCH', endpoint: 'api/categories', body: debounced });
mutateAsync({
method: 'PATCH',
endpoint: 'api/bookmarkCategories',
body: debounced,
});
setUpdate({});
}
}, [debounced]);
@@ -85,7 +89,7 @@ function DebouncedGroupSettingsItem({
useEffect(() => {
if (bookmarkList && bookmarkList !== bookmarks) {
mutateAsync({ method: 'PATCH', endpoint: 'api/linkOrder', body: bookmarkList });
mutateAsync({ method: 'PATCH', endpoint: 'api/bookmarkOrder', body: bookmarkList });
}
}, [bookmarkList]);
@@ -94,6 +98,10 @@ function DebouncedGroupSettingsItem({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => {
handleDelete(bookmarks, 'api/bookmarks');
handleDelete(group, 'api/bookmarkCategories');
}}
title='Delete message'
body={
<Stack gap={0} w={'100%'} h={'175px'} align='center'>
@@ -113,28 +121,6 @@ function DebouncedGroupSettingsItem({
This will also delete all bookmarks in this group!
</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(bookmarks, 'api/links');
handleDelete(group, 'api/categories');
closeModal();
}}
>
Delete
</Button>
<Button
color={'var(--color-text-acc)'}
styles={{ label: { color: 'var(--color-text-pri)' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
}
/>
@@ -401,7 +387,7 @@ function DebouncedGroupSettingsItem({
if (newBookmark) {
mutateAsync({
method: 'POST',
endpoint: 'api/links',
endpoint: 'api/bookmarks',
body: { ...newBookmark, index: bookmarks.length },
});
setPopoverOpened(false);

View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks } from 'hooks';
import { FiTrash } from 'react-icons/fi';
@@ -31,6 +22,7 @@ function DebouncedMessage({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => handleDelete(message, 'api/messages')}
title='Delete message'
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -47,25 +39,6 @@ function DebouncedMessage({
}}
>{`"${message.message}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(message, 'api/messages');
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={closeModal}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -53,6 +44,7 @@ function DebouncedSearchProvider({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(provider, 'api/providers')}
title={'Delete Search Provider'}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -69,25 +61,6 @@ function DebouncedSearchProvider({
}}
>{`"${provider.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(provider, 'api/providers');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

View File

@@ -27,10 +27,10 @@ const SearchProviderSettings = () => {
prefix: '',
};
const endpoint = 'api/providers';
const { data: providers, isFetched: providersIsFetched } = useQueryAPI({
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
endpoint: endpoint,
});
const [providerData, setProviderData] = useState<Provider[]>([]);
const [providers, setProviders] = useState<Provider[]>([]);
const { isMobile } = useCommonHooks();
const { mutateAsync } = useMutationAPI();
const [newProvider, setNewProvider] = useState<Provider>(defaultProvider);
@@ -45,16 +45,16 @@ const SearchProviderSettings = () => {
};
useEffect(() => {
if (providers && providersIsFetched) {
setProviderData(
providers
if (providerData && providerDataIsFetched) {
setProviders(
providerData
.filter((a: Provider) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
);
}
}, [providers, providersIsFetched, debouncedSearch]);
}, [providerData, providerDataIsFetched, debouncedSearch]);
return (
<Stack>
@@ -138,16 +138,16 @@ const SearchProviderSettings = () => {
<SettingsHeader
setDragging={undefined}
openModal={openModal}
title={'Search Providers'}
title={'Search providerData'}
tooltip={{
title: 'Search providers and shortcuts can be configured here.',
highlightList: ['Providers', 'search', 'provider', 'prefix'],
title: 'Search providerData and shortcuts can be configured here.',
highlightList: ['providerData', 'search', 'provider', 'prefix'],
description:
'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
'providerData can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Search Providers...'}
searchPlaceholder={'Search Search providerData...'}
/>
<Stack
mt={isMobile ? '9rem' : '6rem'}
@@ -156,7 +156,7 @@ const SearchProviderSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{providerData?.map((provider: Provider) => (
{providers?.map((provider: Provider) => (
<GridCol span={isMobile ? 18 : 6} key={provider.id}>
<Popover
withArrow

View File

@@ -1,15 +1,17 @@
import { Card, Modal } from '@mantine/core';
import { Button, Card, Group, Modal } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { cardClasses, modalClasses } from 'styles';
function DeleteItemModal({
modalOpened,
handleClose,
handleDelete,
body,
title,
}: {
modalOpened: boolean;
handleClose: () => void;
handleDelete: () => void;
body: React.ReactNode;
title: string;
}) {
@@ -36,6 +38,25 @@ function DeleteItemModal({
<Modal.Body pb={'2rem'}>
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
{body}
<Group w={'100%'} justify='center' bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete();
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'white' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Card>
</Modal.Body>
</Modal.Content>

View File

@@ -46,6 +46,7 @@ function ThemeCard({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => handleDelete(cardTheme, 'api/themes')}
title={'Delete Theme'}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -62,27 +63,6 @@ function ThemeCard({
}}
>{`"${cardTheme.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardTheme, 'api/themes');
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
}
/>

View File

@@ -188,7 +188,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 1'}
{'Bookmark 1'}
</Text>
<Text
style={{
@@ -199,7 +199,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 2'}
{'Bookmark 2'}
</Text>
</Stack>
<Stack
@@ -235,7 +235,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 1'}
{'Bookmark 1'}
</Text>
<Text
style={{
@@ -246,7 +246,7 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
}}
component='a'
>
{'Link 2'}
{'Bookmark 2'}
</Text>
</Stack>
</Stack>

View File

@@ -24,6 +24,7 @@ function ThemePlaylistCard({
handleOpen: (cardPlaylist: ThemePlaylist) => void;
allThemes: Theme[];
}) {
const themePlaylistEndpoint = 'api/themePlaylists';
const [hover, setHover] = useState(false);
const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
@@ -45,6 +46,7 @@ function ThemePlaylistCard({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={closeModal}
handleDelete={() => handleDelete(cardPlaylist, 'api/themePlaylists')}
title='Delete Theme Playlist'
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -61,27 +63,6 @@ function ThemePlaylistCard({
}}
>{`"${cardPlaylist.name}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(cardPlaylist, 'api/themePlaylists');
closeModal();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
}
/>
@@ -124,7 +105,7 @@ function ThemePlaylistCard({
if (cardPlaylist.name === 'All') {
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'All',
@@ -135,7 +116,7 @@ function ThemePlaylistCard({
if (cardPlaylist.name === 'Backgrounds') {
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'Backgrounds',
@@ -152,7 +133,7 @@ function ThemePlaylistCard({
if (cardPlaylist.name === 'No Backgrounds') {
mutateAsync({
method: 'PATCH',
endpoint: 'api/themePlaylists',
endpoint: themePlaylistEndpoint,
body: {
id: cardPlaylist.id,
name: 'No Backgrounds',

View File

@@ -11,11 +11,11 @@ import ThemePlaylistModal from './ThemePlaylistModal';
function ThemePlaylists() {
const themesEndpoint = 'api/themes';
const { data: allThemes } = useQueryAPI({
const { data: allThemeData } = useQueryAPI({
endpoint: themesEndpoint,
});
const themePlaylistsEndpoint = 'api/themePlaylists';
const { data: themePlaylists } = useQueryAPI({
const { data: themePlaylistData } = useQueryAPI({
endpoint: themePlaylistsEndpoint,
});
const defaultPlaylist = {
@@ -60,7 +60,7 @@ function ThemePlaylists() {
defaultPlaylist={defaultPlaylist}
setSelectedPlaylist={setSelectedPlaylist}
handleSavePlaylist={handleSavePlaylist}
allThemes={allThemes}
allThemes={allThemeData}
createPlaylist={mutateAsync}
/>
<Stack h={'100%'} w={'100%'}>
@@ -84,7 +84,7 @@ function ThemePlaylists() {
</Text>
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylists
{themePlaylistData
?.filter((playlist: ThemePlaylist) => playlist.default === 1)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -113,7 +113,7 @@ function ThemePlaylists() {
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
allThemes={allThemes}
allThemes={allThemeData}
/>
</Box>
</Group>
@@ -131,7 +131,7 @@ function ThemePlaylists() {
pos={'relative'}
mb={isMobile ? '6rem' : undefined}
>
{themePlaylists
{themePlaylistData
?.filter((playlist: ThemePlaylist) => playlist.default === 0)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
@@ -161,7 +161,7 @@ function ThemePlaylists() {
<ThemePlaylistCard
cardPlaylist={cardPlaylist}
handleOpen={handleOpen}
allThemes={allThemes}
allThemes={allThemeData}
/>
</Box>
</Group>

View File

@@ -13,7 +13,7 @@ import ThemeModal from './ThemeModal';
function ThemesSettings() {
const themesEndpoint = 'api/themes';
const backgroundsEndpoint = 'api/backgrounds';
const { data: allThemes } = useQueryAPI({
const { data: allThemeData } = useQueryAPI({
endpoint: 'api/themes',
});
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
@@ -161,7 +161,7 @@ function ThemesSettings() {
}}
pos={'absolute'}
/>
{allThemes
{allThemeData
?.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
@@ -191,7 +191,7 @@ function ThemesSettings() {
}}
>
<ThemeCard
allThemes={allThemes}
allThemes={allThemeData}
cardTheme={cardTheme}
handleOpen={handleOpen}
themePlaylists={themePlaylists}

View File

@@ -1,13 +1,4 @@
import {
ActionIcon,
Button,
Card,
Group,
Stack,
Text,
TextInput,
Tooltip,
} from '@mantine/core';
import { ActionIcon, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks';
import { useEffect, useState } from 'react';
@@ -52,6 +43,7 @@ function DebouncedWolClient({
<DeleteItemModal
modalOpened={modalOpened}
handleClose={handleClose}
handleDelete={() => handleDelete(client, 'api/WolClients')}
title={'Delete WoL Client'}
body={
<Stack gap={0} w={'100%'} h={'150px'} align='center'>
@@ -68,25 +60,6 @@ function DebouncedWolClient({
}}
>{`"${client.hostname}"`}</Text>
<Text c='red'>This action cannot be undone!</Text>
<Group pos={'absolute'} bottom={8}>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
handleDelete(client, 'api/WolClients');
handleClose();
}}
>
Delete
</Button>
<Button
color={'grey'}
styles={{ label: { color: 'black' } }}
onClick={handleClose}
>
Cancel
</Button>
</Group>
</Stack>
}
/>