import React from "react"; import { ClassNames } from "@emotion/react"; import { Box, Editable, EditablePreview, EditableInput, Flex, IconButton, Skeleton, Tooltip, VisuallyHidden, Menu, MenuButton, MenuList, MenuItem, Portal, Button, Spinner, useColorModeValue, Modal, ModalContent, ModalOverlay, ModalHeader, ModalBody, ModalFooter, useDisclosure, ModalCloseButton, } from "@chakra-ui/react"; import { CheckIcon, DeleteIcon, EditIcon, QuestionIcon, WarningTwoIcon, } from "@chakra-ui/icons"; import { FaCartPlus } from "react-icons/fa6"; import { CSSTransition, TransitionGroup } from "react-transition-group"; import { useSearchParams } from "react-router-dom"; import { Delay, ErrorMessage, Heading1, Heading2, useLocalStorage, } from "../util"; import Item, { ItemListContainer, ItemListSkeleton } from "./Item"; import { BiRename } from "react-icons/bi"; import { IoCloudUploadOutline } from "react-icons/io5"; import { MdMoreVert } from "react-icons/md"; import { buildOutfitUrl } from "./useOutfitState"; import { useDeleteOutfitMutation } from "../loaders/outfits"; /** * ItemsPanel shows the items in the current outfit, and lets the user toggle * between them! It also shows an editable outfit name, to help set context. * * Note that this component provides an effective 1 unit of padding around * itself, which is uncommon in this app: we usually prefer to let parents * control the spacing! * * This is because Item has padding, but it's generally not visible; so, to * *look* aligned with the other elements like the headings, the headings need * to have extra padding. Essentially: while the Items _do_ stretch out the * full width of the container, it doesn't look like it! */ function ItemsPanel({ outfitState, outfitSaving, loading, dispatchToOutfit }) { const { altStyleId, zonesAndItems, incompatibleItems } = outfitState; return ( {({ css }) => ( {loading ? ( ) : ( <> {zonesAndItems.map(({ zoneId, zoneLabel, items }) => ( ))} {incompatibleItems.length > 0 && ( } items={incompatibleItems} outfitState={outfitState} dispatchToOutfit={dispatchToOutfit} isDisabled /> )} )} )} ); } /** * ItemZoneGroup shows the items for a particular zone, and lets the user * toggle between them. * * For each item, it renders a