Refactor only formatting of file
This commit is contained in:
@@ -19,7 +19,7 @@ import {WIDGET_REGISTRY} from "../../constants/widgetRegistry.jsx";
|
|||||||
|
|
||||||
// 🚨 NEW: Tiny helper to convert size keys into abbreviations
|
// 🚨 NEW: Tiny helper to convert size keys into abbreviations
|
||||||
const getSizeAbbreviation = (key) => {
|
const getSizeAbbreviation = (key) => {
|
||||||
const mapping = { small: "S", medium: "M", large: "L", xlarge: "XL" };
|
const mapping = {small: "S", medium: "M", large: "L", xlarge: "XL"};
|
||||||
return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
|
return mapping[key.toLowerCase()] || key.charAt(0).toUpperCase();
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -48,7 +48,7 @@ export function SettingsButton() {
|
|||||||
|
|
||||||
const checkScroll = useCallback(() => {
|
const checkScroll = useCallback(() => {
|
||||||
if (tabsRef.current) {
|
if (tabsRef.current) {
|
||||||
const { scrollLeft, scrollWidth, clientWidth } = tabsRef.current;
|
const {scrollLeft, scrollWidth, clientWidth} = tabsRef.current;
|
||||||
setCanScrollLeft(scrollLeft > 0);
|
setCanScrollLeft(scrollLeft > 0);
|
||||||
// We use -1 here to account for sub-pixel rendering in some browsers
|
// We use -1 here to account for sub-pixel rendering in some browsers
|
||||||
setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
|
setCanScrollRight(Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1);
|
||||||
@@ -99,10 +99,10 @@ export function SettingsButton() {
|
|||||||
css={tabStyles}
|
css={tabStyles}
|
||||||
data-state="open"
|
data-state="open"
|
||||||
onClick={() => setIsLibraryOpen(true)}
|
onClick={() => setIsLibraryOpen(true)}
|
||||||
color={{ base: "blue.500", _dark: "blue.300" }}
|
color={{base: "blue.500", _dark: "blue.300"}}
|
||||||
_hover={{ bg: "rgba(66, 153, 225, 0.1)" }}
|
_hover={{bg: "rgba(66, 153, 225, 0.1)"}}
|
||||||
>
|
>
|
||||||
<LayoutGrid size={20} style={{ flexShrink: 0 }} />
|
<LayoutGrid size={20} style={{flexShrink: 0}}/>
|
||||||
<Box as="span">Widget Library</Box>
|
<Box as="span">Widget Library</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
@@ -112,10 +112,10 @@ export function SettingsButton() {
|
|||||||
css={tabStyles}
|
css={tabStyles}
|
||||||
data-state="open"
|
data-state="open"
|
||||||
onClick={saveEdit}
|
onClick={saveEdit}
|
||||||
color={{ base: "green.600", _dark: "green.400" }}
|
color={{base: "green.600", _dark: "green.400"}}
|
||||||
_hover={{ bg: "rgba(72, 187, 120, 0.1)" }}
|
_hover={{bg: "rgba(72, 187, 120, 0.1)"}}
|
||||||
>
|
>
|
||||||
<Save size={20} style={{ flexShrink: 0 }} />
|
<Save size={20} style={{flexShrink: 0}}/>
|
||||||
<Box as="span">Save Layout</Box>
|
<Box as="span">Save Layout</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
@@ -125,20 +125,20 @@ export function SettingsButton() {
|
|||||||
css={tabStyles}
|
css={tabStyles}
|
||||||
data-state="open"
|
data-state="open"
|
||||||
onClick={cancelEdit}
|
onClick={cancelEdit}
|
||||||
color={{ base: "red.500", _dark: "red.400" }}
|
color={{base: "red.500", _dark: "red.400"}}
|
||||||
_hover={{ bg: "rgba(245, 101, 101, 0.1)" }}
|
_hover={{bg: "rgba(245, 101, 101, 0.1)"}}
|
||||||
>
|
>
|
||||||
<X size={20} style={{ flexShrink: 0 }} />
|
<X size={20} style={{flexShrink: 0}}/>
|
||||||
<Box as="span">Discard</Box>
|
<Box as="span">Discard</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</HStack>
|
</HStack>
|
||||||
) : (
|
) : (
|
||||||
// 👀 VIEW MODE: The Static Dropdown Menu
|
// 👀 VIEW MODE: The Static Dropdown Menu
|
||||||
<Menu.Root positioning={{ getAnchorRect }}>
|
<Menu.Root positioning={{getAnchorRect}}>
|
||||||
<Menu.Trigger asChild>
|
<Menu.Trigger asChild>
|
||||||
<Box ref={menuRef} as="button" css={tabStyles}>
|
<Box ref={menuRef} as="button" css={tabStyles}>
|
||||||
{/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
|
{/* size increased to 24 to match tabs. flexShrink: 0 is CRITICAL */}
|
||||||
<Settings size={24} style={{ flexShrink: 0 }} />
|
<Settings size={24} style={{flexShrink: 0}}/>
|
||||||
<Box as="span">Dashboard Settings</Box>
|
<Box as="span">Dashboard Settings</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</Menu.Trigger>
|
</Menu.Trigger>
|
||||||
@@ -148,215 +148,222 @@ export function SettingsButton() {
|
|||||||
<Menu.Item
|
<Menu.Item
|
||||||
onClick={enterEditMode}
|
onClick={enterEditMode}
|
||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
_hover={{ WebkitTextStroke: "0.5px currentColor" }}
|
_hover={{WebkitTextStroke: "0.5px currentColor"}}
|
||||||
>
|
>
|
||||||
<Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
|
<Move size={16} style={{marginRight: '8px'}}/> Edit Layout
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
<Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
|
<Menu.Separator my={1} borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}/>
|
||||||
|
|
||||||
<Menu.Item
|
<Menu.Item
|
||||||
onClick={() => setIsLibraryOpen(true)}
|
onClick={() => setIsLibraryOpen(true)}
|
||||||
cursor="pointer"
|
cursor="pointer"
|
||||||
_hover={{
|
_hover={{
|
||||||
bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
|
bg: {base: "rgba(0, 0, 0, 0.05)", _dark: "rgba(255, 255, 255, 0.1)"},
|
||||||
WebkitTextStroke: "0.5px currentColor"
|
WebkitTextStroke: "0.5px currentColor"
|
||||||
}}
|
}}
|
||||||
>
|
|
||||||
<LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu.Content>
|
|
||||||
</Menu.Positioner>
|
|
||||||
</Menu.Root>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
|
|
||||||
<Dialog.Root
|
|
||||||
open={isLibraryOpen}
|
|
||||||
onOpenChange={(e) => setIsLibraryOpen(e.open)}
|
|
||||||
size="xl"
|
|
||||||
placement="center"
|
|
||||||
closeOnInteractOutside={true}
|
|
||||||
closeOnEscapeKeyDown={true}
|
|
||||||
>
|
>
|
||||||
{/* Soft blur can be added to the background behind the modal */}
|
<LayoutGrid size={16} style={{marginRight: '8px'}}/> Widget Library
|
||||||
{/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
|
</Menu.Item>
|
||||||
<Dialog.Positioner>
|
</Menu.Content>
|
||||||
|
</Menu.Positioner>
|
||||||
|
</Menu.Root>
|
||||||
|
)}
|
||||||
|
|
||||||
<Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>
|
{/* 📚📚📚 THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}
|
||||||
|
<Dialog.Root
|
||||||
|
open={isLibraryOpen}
|
||||||
|
onOpenChange={(e) => setIsLibraryOpen(e.open)}
|
||||||
|
size="xl"
|
||||||
|
placement="center"
|
||||||
|
closeOnInteractOutside={true}
|
||||||
|
closeOnEscapeKeyDown={true}
|
||||||
|
>
|
||||||
|
{/* Soft blur can be added to the background behind the modal */}
|
||||||
|
{/*<Dialog.Backdrop bg="blackAlpha.100" backdropFilter="blur(2px)"/>*/}
|
||||||
|
<Dialog.Positioner>
|
||||||
|
|
||||||
<Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
|
<Dialog.Content css={modalStyles.root} overflow="hidden" maxW="800px" minH="800px" p={0}>
|
||||||
borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
|
|
||||||
<Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
|
|
||||||
</Dialog.Header>
|
|
||||||
|
|
||||||
<Dialog.Body p={0}>
|
<Dialog.Header bg="transparent" color={{base: "gray.800", _dark: "white"}} py={4}
|
||||||
<Tabs.Root defaultValue={categories[0]} variant="unstyled">
|
borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}>
|
||||||
<Box position="relative" display="flex" mx="auto" maxWidth="100%" mt={4} mb={6}>
|
<Dialog.Title fontSize="xl" fontWeight="bold">Widgets Shop</Dialog.Title>
|
||||||
|
</Dialog.Header>
|
||||||
|
|
||||||
{/* LEFT GLASS CRESCENT */}
|
<Dialog.Body p={0}>
|
||||||
{canScrollLeft && (
|
<Tabs.Root defaultValue={categories[0]} variant="unstyled">
|
||||||
<Flex
|
<Box position="relative" display="flex" mx="auto" maxWidth="100%" mt={4} mb={6}>
|
||||||
position="absolute"
|
|
||||||
left="0" top="0" bottom="0"
|
|
||||||
w="40px"
|
|
||||||
align="center" justify="center"
|
|
||||||
zIndex={2}
|
|
||||||
cursor="pointer"
|
|
||||||
onClick={() => tabsRef.current.scrollBy({ left: -200, behavior: 'smooth' })}
|
|
||||||
// The Glass Look hugging the left pill edge
|
|
||||||
bg={{ base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)" }}
|
|
||||||
backdropFilter="blur(8px)"
|
|
||||||
borderTopLeftRadius="full"
|
|
||||||
borderBottomLeftRadius="full"
|
|
||||||
// Fades the inner edge so it blends into the track
|
|
||||||
boxShadow={{ base: "10px 0 15px -5px rgba(255,255,255,0.8)", _dark: "10px 0 15px -5px rgba(30,30,30,0.9)" }}
|
|
||||||
color={{ base: "gray.600", _dark: "gray.300" }}
|
|
||||||
_hover={{ color: { base: "blue.500", _dark: "blue.300" } }}
|
|
||||||
>
|
|
||||||
<ChevronLeft size={18} />
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
<Tabs.List
|
|
||||||
ref={tabsRef}
|
|
||||||
onScroll={checkScroll}
|
|
||||||
bg={{ base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)" }}
|
|
||||||
p={1}
|
|
||||||
mx={3}
|
|
||||||
mt={4}
|
|
||||||
mb={6}
|
|
||||||
borderRadius="full"
|
|
||||||
display="flex"
|
|
||||||
flexWrap="nowrap"
|
|
||||||
overflowX="auto"
|
|
||||||
maxWidth="100%"
|
|
||||||
border="1px solid"
|
|
||||||
borderColor={{ base: "blackAlpha.50", _dark: "whiteAlpha.100" }}
|
|
||||||
css={{
|
|
||||||
scrollbarWidth: "none",
|
|
||||||
"&::-webkit-scrollbar": { display: "none" },
|
|
||||||
}}
|
|
||||||
// This is for desktop users not on trackpad to scroll the
|
|
||||||
onWheel={(e) => {
|
|
||||||
if (e.currentTarget) {
|
|
||||||
e.currentTarget.scrollLeft += e.deltaY;
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{categories.map(cat => (
|
|
||||||
<Tabs.Trigger
|
|
||||||
key={cat}
|
|
||||||
value={cat}
|
|
||||||
px={5}
|
|
||||||
py={2}
|
|
||||||
borderRadius="full"
|
|
||||||
whiteSpace="nowrap"
|
|
||||||
flexShrink={0}
|
|
||||||
color={{ base: "gray.500", _dark: "gray.400" }}
|
|
||||||
fontWeight="medium"
|
|
||||||
transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
|
|
||||||
_hover={{
|
|
||||||
color: { base: "gray.800", _dark: "gray.200" }
|
|
||||||
}}
|
|
||||||
_selected={{
|
|
||||||
bg: { base: "white", _dark: "rgba(255, 255, 255, 0.12)" },
|
|
||||||
color: { base: "blue.600", _dark: "blue.200" },
|
|
||||||
boxShadow: "sm",
|
|
||||||
fontWeight: "bold",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{cat}
|
|
||||||
</Tabs.Trigger>
|
|
||||||
))}
|
|
||||||
</Tabs.List>
|
|
||||||
{canScrollRight && (
|
|
||||||
<Flex
|
|
||||||
position="absolute"
|
|
||||||
right="0" top="0" bottom="0"
|
|
||||||
w="40px"
|
|
||||||
align="center" justify="center"
|
|
||||||
zIndex={2}
|
|
||||||
cursor="pointer"
|
|
||||||
onClick={() => tabsRef.current.scrollBy({ left: 200, behavior: 'smooth' })}
|
|
||||||
// The Glass Look hugging the right pill edge
|
|
||||||
bg={{ base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)" }}
|
|
||||||
backdropFilter="blur(8px)"
|
|
||||||
borderTopRightRadius="full"
|
|
||||||
borderBottomRightRadius="full"
|
|
||||||
boxShadow={{ base: "-10px 0 15px -5px rgba(255,255,255,0.8)", _dark: "-10px 0 15px -5px rgba(30,30,30,0.9)" }}
|
|
||||||
color={{ base: "gray.600", _dark: "gray.300" }}
|
|
||||||
_hover={{ color: { base: "blue.500", _dark: "blue.300" } }}
|
|
||||||
>
|
|
||||||
<ChevronRight size={18} />
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
</Box>
|
{/* LEFT GLASS CRESCENT */}
|
||||||
{categories.map(cat => (
|
{canScrollLeft && (
|
||||||
<Tabs.Content key={cat} value={cat} p={6}>
|
<Flex
|
||||||
<Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
|
position="absolute"
|
||||||
{categorizedWidgets[cat].map(widget => (
|
left="0" top="0" bottom="0"
|
||||||
<Flex
|
w="40px"
|
||||||
key={widget.id}
|
align="center" justify="center"
|
||||||
direction="column"
|
zIndex={2}
|
||||||
bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
|
cursor="pointer"
|
||||||
p={4}
|
onClick={() => tabsRef.current.scrollBy({left: -200, behavior: 'smooth'})}
|
||||||
borderRadius="xl"
|
// The Glass Look hugging the left pill edge
|
||||||
border="1px solid"
|
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
|
||||||
borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
|
backdropFilter="blur(8px)"
|
||||||
boxShadow="sm"
|
borderTopLeftRadius="full"
|
||||||
|
borderBottomLeftRadius="full"
|
||||||
|
// Fades the inner edge so it blends into the track
|
||||||
|
boxShadow={{
|
||||||
|
base: "10px 0 15px -5px rgba(255,255,255,0.8)",
|
||||||
|
_dark: "10px 0 15px -5px rgba(30,30,30,0.9)"
|
||||||
|
}}
|
||||||
|
color={{base: "gray.600", _dark: "gray.300"}}
|
||||||
|
_hover={{color: {base: "blue.500", _dark: "blue.300"}}}
|
||||||
|
>
|
||||||
|
<ChevronLeft size={18}/>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
<Tabs.List
|
||||||
|
ref={tabsRef}
|
||||||
|
onScroll={checkScroll}
|
||||||
|
bg={{base: "rgba(0, 0, 0, 0.04)", _dark: "rgba(255, 255, 255, 0.05)"}}
|
||||||
|
p={1}
|
||||||
|
mx={3}
|
||||||
|
mt={4}
|
||||||
|
mb={6}
|
||||||
|
borderRadius="full"
|
||||||
|
display="flex"
|
||||||
|
flexWrap="nowrap"
|
||||||
|
overflowX="auto"
|
||||||
|
maxWidth="100%"
|
||||||
|
border="1px solid"
|
||||||
|
borderColor={{base: "blackAlpha.50", _dark: "whiteAlpha.100"}}
|
||||||
|
css={{
|
||||||
|
scrollbarWidth: "none",
|
||||||
|
"&::-webkit-scrollbar": {display: "none"},
|
||||||
|
}}
|
||||||
|
// This is for desktop users not on trackpad to scroll the
|
||||||
|
onWheel={(e) => {
|
||||||
|
if (e.currentTarget) {
|
||||||
|
e.currentTarget.scrollLeft += e.deltaY;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{categories.map(cat => (
|
||||||
|
<Tabs.Trigger
|
||||||
|
key={cat}
|
||||||
|
value={cat}
|
||||||
|
px={5}
|
||||||
|
py={2}
|
||||||
|
borderRadius="full"
|
||||||
|
whiteSpace="nowrap"
|
||||||
|
flexShrink={0}
|
||||||
|
color={{base: "gray.500", _dark: "gray.400"}}
|
||||||
|
fontWeight="medium"
|
||||||
|
transition="background-color 0.2s, color 0.2s, box-shadow 0.2s"
|
||||||
|
_hover={{
|
||||||
|
color: {base: "gray.800", _dark: "gray.200"}
|
||||||
|
}}
|
||||||
|
_selected={{
|
||||||
|
bg: {base: "white", _dark: "rgba(255, 255, 255, 0.12)"},
|
||||||
|
color: {base: "blue.600", _dark: "blue.200"},
|
||||||
|
boxShadow: "sm",
|
||||||
|
fontWeight: "bold",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</Tabs.Trigger>
|
||||||
|
))}
|
||||||
|
</Tabs.List>
|
||||||
|
{canScrollRight && (
|
||||||
|
<Flex
|
||||||
|
position="absolute"
|
||||||
|
right="0" top="0" bottom="0"
|
||||||
|
w="40px"
|
||||||
|
align="center" justify="center"
|
||||||
|
zIndex={2}
|
||||||
|
cursor="pointer"
|
||||||
|
onClick={() => tabsRef.current.scrollBy({left: 200, behavior: 'smooth'})}
|
||||||
|
// The Glass Look hugging the right pill edge
|
||||||
|
bg={{base: "rgba(255, 255, 255, 0.7)", _dark: "rgba(30, 30, 30, 0.8)"}}
|
||||||
|
backdropFilter="blur(8px)"
|
||||||
|
borderTopRightRadius="full"
|
||||||
|
borderBottomRightRadius="full"
|
||||||
|
boxShadow={{
|
||||||
|
base: "-10px 0 15px -5px rgba(255,255,255,0.8)",
|
||||||
|
_dark: "-10px 0 15px -5px rgba(30,30,30,0.9)"
|
||||||
|
}}
|
||||||
|
color={{base: "gray.600", _dark: "gray.300"}}
|
||||||
|
_hover={{color: {base: "blue.500", _dark: "blue.300"}}}
|
||||||
|
>
|
||||||
|
<ChevronRight size={18}/>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</Box>
|
||||||
|
{categories.map(cat => (
|
||||||
|
<Tabs.Content key={cat} value={cat} p={6}>
|
||||||
|
<Grid templateColumns="repeat(auto-fill, minmax(300px, 1fr))" gap={4}>
|
||||||
|
{categorizedWidgets[cat].map(widget => (
|
||||||
|
<Flex
|
||||||
|
key={widget.id}
|
||||||
|
direction="column"
|
||||||
|
bg={{base: "rgba(255, 255, 255, 0.6)", _dark: "rgba(0, 0, 0, 0.2)"}}
|
||||||
|
p={4}
|
||||||
|
borderRadius="xl"
|
||||||
|
border="1px solid"
|
||||||
|
borderColor={{base: "rgba(255, 255, 255, 0.9)", _dark: "whiteAlpha.200"}}
|
||||||
|
boxShadow="sm"
|
||||||
|
>
|
||||||
|
<Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
|
||||||
|
<Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
|
||||||
|
|
||||||
|
<Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
|
||||||
|
pt={3}>
|
||||||
|
<Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
|
||||||
|
mb={2}>
|
||||||
|
Add to Dashboard:
|
||||||
|
</Text>
|
||||||
|
<HStack gap={2} flexWrap="wrap">
|
||||||
|
{Object.keys(widget.allowedSizes).map(sizeKey => (
|
||||||
|
<Box
|
||||||
|
key={sizeKey}
|
||||||
|
as="button"
|
||||||
|
css={tabStyles}
|
||||||
|
onClick={() => handleAddWidget(widget.id, sizeKey)}
|
||||||
|
color={{base: "blue.600", _dark: "blue.300"}}
|
||||||
>
|
>
|
||||||
<Text fontWeight="bold" fontSize="md" mb={1}>{widget.name}</Text>
|
{/* 🚨 THE ABBREVIATION ICON: Always visible */}
|
||||||
<Text fontSize="sm" color="gray.500" mb={4} flex="1">{widget.description}</Text>
|
<Flex
|
||||||
|
align="center"
|
||||||
|
justify="center"
|
||||||
|
w="24px"
|
||||||
|
h="24px"
|
||||||
|
flexShrink={0}
|
||||||
|
borderRadius="full"
|
||||||
|
bg={{base: "blue.50", _dark: "whiteAlpha.200"}}
|
||||||
|
fontWeight="black"
|
||||||
|
fontSize="xs"
|
||||||
|
bg='transparent'
|
||||||
|
>
|
||||||
|
{getSizeAbbreviation(sizeKey)}
|
||||||
|
</Flex>
|
||||||
|
|
||||||
<Box borderTop="1px solid" borderColor={{base: "gray.200", _dark: "whiteAlpha.200"}}
|
{/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
|
||||||
pt={3}>
|
<Box as="span">Add Widget</Box>
|
||||||
<Text fontSize="xs" fontWeight="bold" color="gray.400" textTransform="uppercase"
|
</Box>
|
||||||
mb={2}>
|
|
||||||
Add to Dashboard:
|
|
||||||
</Text>
|
|
||||||
<HStack gap={2} flexWrap="wrap">
|
|
||||||
{Object.keys(widget.allowedSizes).map(sizeKey => (
|
|
||||||
<Box
|
|
||||||
key={sizeKey}
|
|
||||||
as="button"
|
|
||||||
css={tabStyles}
|
|
||||||
onClick={() => handleAddWidget(widget.id, sizeKey)}
|
|
||||||
color={{base: "blue.600", _dark: "blue.300"}}
|
|
||||||
>
|
|
||||||
{/* 🚨 THE ABBREVIATION ICON: Always visible */}
|
|
||||||
<Flex
|
|
||||||
align="center"
|
|
||||||
justify="center"
|
|
||||||
w="24px"
|
|
||||||
h="24px"
|
|
||||||
flexShrink={0}
|
|
||||||
borderRadius="full"
|
|
||||||
bg={{ base: "blue.50", _dark: "whiteAlpha.200" }}
|
|
||||||
fontWeight="black"
|
|
||||||
fontSize="xs"
|
|
||||||
bg='transparent'
|
|
||||||
>
|
|
||||||
{getSizeAbbreviation(sizeKey)}
|
|
||||||
</Flex>
|
|
||||||
|
|
||||||
{/* 🚨 THE EXPANDED TEXT: Only visible on hover */}
|
|
||||||
<Box as="span">Add Widget</Box>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</HStack>
|
|
||||||
</Box>
|
|
||||||
</Flex>
|
|
||||||
))}
|
))}
|
||||||
</Grid>
|
</HStack>
|
||||||
</Tabs.Content>
|
</Box>
|
||||||
))}
|
</Flex>
|
||||||
</Tabs.Root>
|
))}
|
||||||
</Dialog.Body>
|
</Grid>
|
||||||
<Dialog.CloseTrigger position="absolute" top={3} right={3} color={{ base: "gray.500", _dark: "whiteAlpha.800" }} _hover={{ color: "red.400" }} />
|
</Tabs.Content>
|
||||||
</Dialog.Content>
|
))}
|
||||||
</Dialog.Positioner>
|
</Tabs.Root>
|
||||||
</Dialog.Root>
|
</Dialog.Body>
|
||||||
|
<Dialog.CloseTrigger position="absolute" top={3} right={3}
|
||||||
|
color={{base: "gray.500", _dark: "whiteAlpha.800"}} _hover={{color: "red.400"}}/>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Dialog.Positioner>
|
||||||
|
</Dialog.Root>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user