| 6 | "": "const Elements = styled.div`\\\\n display:flex;\\\\n flex-wrap:wrap;\\\\n justify-content:space-between;\\\\n\\\\n > div {\\\\n margin:10px;\\\\n }\\\\n`;\\\\n\\\\nconst Button = styled.button`\\\\n border:0;\\\\n outline-style:none;\\\\n background-color: rgba(0,0,0,.05);\\\\n padding:.5rem 1rem;\\\\n font-weight:bold;\\\\n border-radius:10px;\\\\n font-size:.8rem;\\\\n transition: all .2s;\\\\n box-shadow: 0 0 0 0 rgba(0,0,0,.05);\\\\n padding: 10px 15px;\\\\n font-size: var(--font-size-sm);\\\\n border:1px solid var(--border-color);\\\\n border-radius: var(--border-radius-xl);\\\\n cursor: pointer;\\\\n color: var(--color-text-primary);\\\\n box-shadow: 0 0 0 0 rgba(0,0,0, var(--opacity-ultra-light));\\\\n\\\\n &:hover {\\\\n opacity: var(--opacity-strong);\\\\n transition: all .2s;\\\\n box-shadow: 0 0 0 3px rgba(0,0,0, var(--opacity-ultra-light));\\\\n }\\\\n\\\\n &:disabled {\\\\n background-color: #cccccc;\\\\n cursor: not-allowed;\\\\n }\\\\n`;\\\\n\\\\nconst Input = styled.input`\\\\n padding: 10px;\\\\n font-size: var(--font-size-sm);\\\\n border: 1px solid var(--border-color);\\\\n border-radius: var(--border-radius-lg);\\\\n margin: 10px 0;\\\\n\\\\n &:focus {\\\\n outline: none;\\\\n }\\\\n`;\\\\n\\\\nconst Navbar = styled.div`\\\\n width:100%;\\\\n background-color: var(--color-secondary);\\\\n color: var(--color-text-primary);\\\\n padding: 10px 20px;\\\\n display: flex;\\\\n justify-content: space-between;\\\\n align-items: center;\\\\n`;\\\\n\\\\nconst NavbarLogo = styled.div`\\\\n font-weight:bold;\\\\n`;\\\\n\\\\nconst NavbarContent = styled.div``;\\\\n\\\\nconst NavbarLink = styled.a`\\\\n color: var(--color-text-primary);\\\\n font-size: var(--font-size-sm);\\\\n text-decoration: none;\\\\n margin-left: 20px;\\\\n\\\\n &:hover {\\\\n text-decoration: underline;\\\\n }\\\\n`;\\\\n\\\\n\\\\nconst Spinner = styled.div`\\\\n border: 5px solid #f3f3f3;\\\\n border-top: 5px solid var(--color-primary);\\\\n border-radius: 50%;\\\\n width: 40px;\\\\n height: 40px;\\\\n animation: spin .8s linear infinite;\\\\n\\\\n @keyframes spin {\\\\n 0% { transform: rotate(0deg); }\\\\n 100% { transform: rotate(360deg); }\\\\n }\\\\n`;\\\\n\\\\nconst Alert = styled.div`\\\\n width:100%;\\\\n padding: 15px;\\\\n margin-bottom: 20px;\\\\n border: 1px solid transparent;\\\\n border-radius: 4px;\\\\n color: #004085;\\\\n background-color: #cce5ff;\\\\n border-color: #b8daff;\\\\n\\\\n ${({ type }) => type === \\\\\\'success\\\\\\' && `\\\\n color: #155724;\\\\n background-color: #d4edda;\\\\n border-color: #c3e6cb;\\\\n `}\\\\n\\\\n ${({ type }) => type === \\\\\\'danger\\\\\\' && `\\\\n color: #721c24;\\\\n background-color: #f8d7da;\\\\n border-color: #f5c6cb;\\\\n `}\\\\n\\\\n ${({ type }) => type === \\\\\\'warning\\\\\\' && `\\\\n color: #856404;\\\\n background-color: #fff3cd;\\\\n border-color: #ffeeba;\\\\n `}\\\\n`;\\\\n\\\\n\\\\nconst Modal = styled.div`\\\\n display: ${({ isOpen }) => isOpen ? \\\\\\'block\\\\\\' : \\\\\\'none\\\\\\'};\\\\n position: fixed;\\\\n z-index: 1;\\\\n left: 0;\\\\n top: 0;\\\\n width: 100%;\\\\n height: 100%;\\\\n overflow: auto;\\\\n background-color: rgba(0,0,0,.2);\\\\n`;\\\\n\\\\nconst ModalContent = styled.div`\\\\n background-color: #fefefe;\\\\n margin: 15% auto;\\\\n padding: 20px;\\\\n border: 1px solid #888;\\\\n width: 80%;\\\\n border-radius: 5px;\\\\n`;\\\\n\\\\nconst Switch = styled.label`\\\\n position: relative;\\\\n display: inline-block;\\\\n width: 60px;\\\\n height: 34px;\\\\n\\\\n .switch {\\\\n opacity: 0;\\\\n width: 0;\\\\n height: 0;\\\\n\\\\n &:checked + .slider {\\\\n background-color: #2196F3;\\\\n }\\\\n\\\\n &:focus + .slider {\\\\n box-shadow: 0 0 1px #2196F3;\\\\n }\\\\n\\\\n &:checked + .slider:before {\\\\n transform: translateX(26px);\\\\n }\\\\n }\\\\n\\\\n .slider {\\\\n position: absolute;\\\\n cursor: pointer;\\\\n top: 0;\\\\n left: 0;\\\\n right: 0;\\\\n bottom: 0;\\\\n background-color: #ccc;\\\\n transition: .4s;\\\\n border-radius: 34px;\\\\n\\\\n &:before {\\\\n position: absolute;\\\\n content: \\\\\\\"\\\\\\\";\\\\n height: 26px;\\\\n width: 26px;\\\\n left: 4px;\\\\n bottom: 4px;\\\\n background-color: white;\\\\n transition: .4s;\\\\n border-radius: 50%;\\\\n }\\\\n }\\\\n`;\\\\n\\\\nconst Card = styled.div`\\\\n width:100%;\\\\n background: #fff;\\\\n border-radius: 8px;\\\\n box-shadow: 0 2px 4px rgba(0,0,0,.1);\\\\n padding: 20px;\\\\n margin-bottom: 20px;\\\\n`;\\\\n\\\\nconst List = styled.ul`\\\\n width:100%;\\\\n list-style: none;\\\\n padding: 0;\\\\n`;\\\\n\\\\nconst ListItem = styled.li`\\\\n padding: 10px 0;\\\\n border-bottom: 1px solid #ccc;\\\\n\\\\n &:last-child {\\\\n border-bottom: none;\\\\n }\\\\n`;\\\\n\\\\nconst DrawerWrapper = styled.div`\\\\n position: fixed;\\\\n top: 0;\\\\n right: ${({ isOpen }) => isOpen ? \\\\\\'0%\\\\\\' : \\\\\\'-100%\\\\\\'};\\\\n width: 300px;\\\\n height: 100%;\\\\n background-color: #fff;\\\\n box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);\\\\n transition: all 0.3s ease-in-out;\\\\n z-index: 1000;\\\\n`;\\\\n\\\\nconst DrawerContent = styled.div`\\\\n padding: 10px;\\\\n`;\\\\n\\\\n// Componente opcional para oscurecer el fondo cuando el Drawer est\\\\u{e1} abierto\\\\nconst DrawerOverlay = styled.div`\\\\n display: ${({ isOpen }) => isOpen ? \\\\\\'block\\\\\\' : \\\\\\'none\\\\\\'};\\\\n position: fixed;\\\\n top: 0;\\\\n left: 0;\\\\n width: 100%;\\\\n height: 100%;\\\\n background-color: rgba(0, 0, 0, 0.5);\\\\n z-index: 999; // Aseg\\\\u{fa}rate de que este valor sea adecuado para tu aplicaci\\\\u{f3}n\\\\n`;\\\\n\\\\n// Componente principal del Drawer\\\\nconst Drawer = ({ isOpen, children, onClose }) => (\\\\n <>\\\\n <DrawerOverlay isOpen={isOpen} onClick={onClose} />\\\\n <DrawerWrapper isOpen={isOpen}>\\\\n <DrawerContent>{children}</DrawerContent>\\\\n </DrawerWrapper>\\\\n </>\\\\n);\\\\n\\\\nconst ExampleBox = styled.div`\\\\n display:flex;\\\\n flex-direction:column;\\\\n width:300px;\\\\n height:300px;\\\\n border-radius:20px;\\\\n border:1px solid rgba(0,0,0,.05);\\\\n overflow:hidden;\\\\n`;\\\\n\\\\nconst ExampleComponent = styled.div`\\\\n display:flex;\\\\n align-items:center;\\\\n justify-content:center;\\\\n padding:1rem;\\\\n height:60%;\\\\n`;\\\\n\\\\nconst ExampleDescription = styled.div`\\\\n height:40%;\\\\n background-color:#fff;\\\\n padding:1rem;\\\\n border-top:1px solid rgba(0,0,0,.05);\\\\n`;\\\\n\\\\nconst ExampleTitle = styled.h1`\\\\n font-size:1.2rem;\\\\n color:#000;\\\\n font-weight:bold;\\\\n`;\\\\n\\\\nconst ExampleText = styled.p`\\\\n font-size:.8rem;\\\\n padding:.3rem 0;\\\\n`;\\\\n\\\\nreturn <>\\\\n <br/>\\\\n <h2>Future cubes</h2>\\\\n <br/>\\\\n <Elements>\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Button>Click me</Button>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Button</ExampleTitle>\\\\n <ExampleText>This is the Button cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Input type=\\\\\\\"text\\\\\\\" />\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Input</ExampleTitle>\\\\n <ExampleText>This is the Input cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n \\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Spinner/>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Spinner</ExampleTitle>\\\\n <ExampleText>This is the Spinner cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Navbar>\\\\n <NavbarLogo>Navbar</NavbarLogo>\\\\n <NavbarContent>\\\\n <NavbarLink href=\\\\\\\"#home\\\\\\\">Home</NavbarLink>\\\\n </NavbarContent>\\\\n </Navbar>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Navbar</ExampleTitle>\\\\n <ExampleText>This is the Navbar cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Alert type=\\\\\\\"warning\\\\\\\">An example alert</Alert>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Alert</ExampleTitle>\\\\n <ExampleText>This is the Alert cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Button onClick={() => State.update({ modalIsOpen: true })}>Open Modal</Button>\\\\n\\\\n <Modal isOpen={state.modalIsOpen}>\\\\n <ModalContent>\\\\n This is a modal\\\\n </ModalContent>\\\\n </Modal>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Modal</ExampleTitle>\\\\n <ExampleText>This is the Modal cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Switch>\\\\n <input type=\\\\\\\"checkbox\\\\\\\" className=\\\\\\\"switch\\\\\\\" />\\\\n <div className=\\\\\\\"slider\\\\\\\"></div>\\\\n </Switch>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Switch</ExampleTitle>\\\\n <ExampleText>This is the Switch cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Card>Example card content</Card>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Card</ExampleTitle>\\\\n <ExampleText>This is the Card cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <List>\\\\n <ListItem>Uno</ListItem>\\\\n <ListItem>Dos</ListItem>\\\\n <ListItem>Tres</ListItem>\\\\n </List>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>List</ExampleTitle>\\\\n <ExampleText>This is the List cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n\\\\n <ExampleBox>\\\\n <ExampleComponent>\\\\n <Button onClick={() => State.update({ openDrawer: true })}>Open drawer</Button>\\\\n\\\\n <Drawer isOpen={state.openDrawer}>\\\\n <DrawerContent>\\\\n This is a test\\\\n </DrawerContent>\\\\n </Drawer>\\\\n </ExampleComponent>\\\\n <ExampleDescription>\\\\n <ExampleTitle>Drawer</ExampleTitle>\\\\n <ExampleText>This is the Drawer cube description</ExampleText>\\\\n </ExampleDescription>\\\\n </ExampleBox>\\\\n </Elements>\\\\n</>;", |