From 7efe5a1c817b326673d34f1ec5e627eaa3f749b7 Mon Sep 17 00:00:00 2001 From: AdrielIg Date: Wed, 21 Feb 2024 21:54:30 -0300 Subject: [PATCH 01/16] init drawer --- package-lock.json | 51 +++++++++++++++++++++++++ package.json | 4 +- src/components/Drawer/DrawerContent.tsx | 11 ++++++ src/components/Drawer/Menu.tsx | 39 +++++++++++++++++++ src/components/Drawer/index.tsx | 25 ++++++++++++ src/layouts/Layout.astro | 2 + src/utils/cn.ts | 6 +++ 7 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 src/components/Drawer/DrawerContent.tsx create mode 100644 src/components/Drawer/Menu.tsx create mode 100644 src/components/Drawer/index.tsx create mode 100644 src/utils/cn.ts diff --git a/package-lock.json b/package-lock.json index 931dc9b..96e07e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,8 @@ "@astrojs/vercel": "^7.3.1", "@vercel/speed-insights": "^1.0.10", "astro": "^4.4.0", + "clsx": "^2.1.0", + "tailwind-merge": "^2.2.1", "tailwindcss": "^3.4.1" }, "devDependencies": { @@ -514,6 +516,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", + "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.23.9", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz", @@ -6514,6 +6527,11 @@ "node": ">=8.10.0" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/rehype": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz", @@ -7703,6 +7721,18 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tailwind-merge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.1.tgz", + "integrity": "sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==", + "dependencies": { + "@babel/runtime": "^7.23.7" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", @@ -8941,6 +8971,14 @@ "@babel/helper-plugin-utils": "^7.22.5" } }, + "@babel/runtime": { + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", + "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==", + "requires": { + "regenerator-runtime": "^0.14.0" + } + }, "@babel/template": { "version": "7.23.9", "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz", @@ -12949,6 +12987,11 @@ "picomatch": "^2.2.1" } }, + "regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "rehype": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.1.tgz", @@ -13799,6 +13842,14 @@ "tslib": "^2.6.2" } }, + "tailwind-merge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.2.1.tgz", + "integrity": "sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==", + "requires": { + "@babel/runtime": "^7.23.7" + } + }, "tailwindcss": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", diff --git a/package.json b/package.json index 9c52c91..bf45322 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,9 @@ "@astrojs/vercel": "^7.3.1", "@vercel/speed-insights": "^1.0.10", "astro": "^4.4.0", - "tailwindcss": "^3.4.1" + "clsx": "^2.1.0", + "tailwindcss": "^3.4.1", + "tailwind-merge": "^2.2.1" }, "devDependencies": { "@typescript-eslint/parser": "^7.0.1", diff --git a/src/components/Drawer/DrawerContent.tsx b/src/components/Drawer/DrawerContent.tsx new file mode 100644 index 0000000..18ad260 --- /dev/null +++ b/src/components/Drawer/DrawerContent.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const DrawerContent = () => { + return ( +
+

Drawer

+
+ ) +} + +export default DrawerContent diff --git a/src/components/Drawer/Menu.tsx b/src/components/Drawer/Menu.tsx new file mode 100644 index 0000000..c0b7770 --- /dev/null +++ b/src/components/Drawer/Menu.tsx @@ -0,0 +1,39 @@ +import React, { type Dispatch, type SetStateAction } from 'react' +import { cn } from '../../utils/cn' + +interface Props { + open: boolean + setOpen: Dispatch> +} + +const Menu = ({ open, setOpen }: Props) => { + const genericHamburgerLine = `h-1 w-8 my-1 rounded-full bg-white transition ease transform duration-300` + + return ( + + ) +} + +export default Menu diff --git a/src/components/Drawer/index.tsx b/src/components/Drawer/index.tsx new file mode 100644 index 0000000..eb529f8 --- /dev/null +++ b/src/components/Drawer/index.tsx @@ -0,0 +1,25 @@ +import React, { useState } from 'react' +import Menu from './Menu' +import DrawerContent from './DrawerContent' +import { cn } from '../../utils/cn' + +const Drawer = () => { + const [open, setOpen] = useState(false) + return ( + <> + +
+ +
+ + ) +} + +export default Drawer diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 23b4c41..c7cb1e6 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,4 +1,5 @@ --- +import Drawer from '../components/Drawer' interface Props { title: string, metaImage: string, @@ -67,6 +68,7 @@ const { title, metaImage, metaDescription, isFooterVisible = true } = Astro.prop + {isFooterVisible ? (
Date: Fri, 23 Feb 2024 00:22:21 -0300 Subject: [PATCH 02/16] Add new navbar-menu --- src/components/Drawer/DrawerContent.tsx | 4 +- src/components/Drawer/Menu.tsx | 4 +- src/components/Drawer/index.tsx | 2 +- src/components/Menu/MenuDropdown.tsx | 58 +++++++++++++++++++++++++ src/components/Menu/MenuItem.tsx | 19 ++++++++ src/components/Menu/MenuItems.tsx | 32 ++++++++++++++ src/components/Menu/NavBar.tsx | 22 ++++++++++ src/layouts/Layout.astro | 9 ++-- 8 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 src/components/Menu/MenuDropdown.tsx create mode 100644 src/components/Menu/MenuItem.tsx create mode 100644 src/components/Menu/MenuItems.tsx create mode 100644 src/components/Menu/NavBar.tsx diff --git a/src/components/Drawer/DrawerContent.tsx b/src/components/Drawer/DrawerContent.tsx index 18ad260..a7d6691 100644 --- a/src/components/Drawer/DrawerContent.tsx +++ b/src/components/Drawer/DrawerContent.tsx @@ -1,9 +1,11 @@ import React from 'react' +import MenuItems from '../Menu/MenuItems' const DrawerContent = () => { return ( -
+

Drawer

+
) } diff --git a/src/components/Drawer/Menu.tsx b/src/components/Drawer/Menu.tsx index c0b7770..d19cddb 100644 --- a/src/components/Drawer/Menu.tsx +++ b/src/components/Drawer/Menu.tsx @@ -7,11 +7,11 @@ interface Props { } const Menu = ({ open, setOpen }: Props) => { - const genericHamburgerLine = `h-1 w-8 my-1 rounded-full bg-white transition ease transform duration-300` + const genericHamburgerLine = `h-1 w-8 my-1 rounded-full bg-gray-100 dark:bg-gray-400 transition ease transform duration-300` return ( + {isOpen ? ( +
+ +
+ ) : ( + '' + )} +
+ ) +} + +export default MenuDropdown diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx new file mode 100644 index 0000000..a211c2e --- /dev/null +++ b/src/components/Menu/MenuItem.tsx @@ -0,0 +1,19 @@ +import React from 'react' + +const MenuItem = ({ active }: { active: boolean }) => { + return ( +
  • + 📊 + + INICIO + +
    • + ) +} + +export default MenuItem diff --git a/src/components/Menu/MenuItems.tsx b/src/components/Menu/MenuItems.tsx new file mode 100644 index 0000000..6dcac20 --- /dev/null +++ b/src/components/Menu/MenuItems.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import MenuItem from './MenuItem' + +const items = [ + { + name: 'INICIO', + url: '/', + icon: '📊' + }, + { + name: 'PESOS', + url: '/', + icon: '🇦🇷' + }, + { + name: 'DÓLARES', + url: '/', + icon: 'US' + } +] + +const MenuItems = () => { + return ( +
      + + + +
    + ) +} + +export default MenuItems diff --git a/src/components/Menu/NavBar.tsx b/src/components/Menu/NavBar.tsx new file mode 100644 index 0000000..8c4a3e3 --- /dev/null +++ b/src/components/Menu/NavBar.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import Drawer from '../Drawer' +import MenuDropdown from './MenuDropdown' + +const NavBar = () => { + return ( +
    +
    +
    +
    + COMPARA + TASAS + .AR +
    + +
    +
    +
    + ) +} + +export default NavBar diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index c7cb1e6..e13090a 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,10 +1,10 @@ --- -import Drawer from '../components/Drawer' +import NavBar from '../components/Menu/NavBar' interface Props { title: string, metaImage: string, metaDescription: string, - isFooterVisible: boolean + isFooterVisible?: boolean } const { title, metaImage, metaDescription, isFooterVisible = true } = Astro.props @@ -67,8 +67,9 @@ const { title, metaImage, metaDescription, isFooterVisible = true } = Astro.prop - - + + + {isFooterVisible ? (
    Date: Fri, 23 Feb 2024 13:43:40 -0300 Subject: [PATCH 03/16] Add navbar-menu functionality --- .env.example | 1 - package-lock.json | 69 +++++++++++++++++ package.json | 7 +- src/components/Menu/MenuDropdown.tsx | 47 +++++++++--- src/components/Menu/MenuItem.tsx | 23 +++++- src/layouts/Layout.astro | 106 +++++++++++++++------------ src/pages/crypto.astro | 11 +-- src/utils/menuStore.ts | 3 + 8 files changed, 200 insertions(+), 67 deletions(-) delete mode 100644 .env.example create mode 100644 src/utils/menuStore.ts diff --git a/.env.example b/.env.example deleted file mode 100644 index 7c904de..0000000 --- a/.env.example +++ /dev/null @@ -1 +0,0 @@ -PUBLIC_SUPABASE_KEY \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 96e07e5..1030757 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,9 +13,12 @@ "@astrojs/sitemap": "^3.0.5", "@astrojs/tailwind": "^5.1.0", "@astrojs/vercel": "^7.3.1", + "@nanostores/persistent": "^0.10.1", + "@nanostores/react": "^0.7.2", "@vercel/speed-insights": "^1.0.10", "astro": "^4.4.0", "clsx": "^2.1.0", + "nanostores": "^0.10.0", "tailwind-merge": "^2.2.1", "tailwindcss": "^3.4.1" }, @@ -1205,6 +1208,41 @@ "resolved": "https://registry.npmjs.org/@medv/finder/-/finder-3.1.0.tgz", "integrity": "sha512-ojkXjR3K0Zz3jnCR80tqPL+0yvbZk/lEodb6RIVjLz7W8RVA2wrw8ym/CzCpXO9SYVUIKHFUpc7jvf8UKfIM3w==" }, + "node_modules/@nanostores/persistent": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/@nanostores/persistent/-/persistent-0.10.1.tgz", + "integrity": "sha512-BMYj47ONmkrPkHfomimtBAwtDNNjO57lw0uk7jB35GHVwixmqWtlK6DVAAbioqwJn9WEaWSB/9Ss5ukBG0NHlQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "peerDependencies": { + "nanostores": "^0.9.0 || ^0.10.0" + } + }, + "node_modules/@nanostores/react": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@nanostores/react/-/react-0.7.2.tgz", + "integrity": "sha512-e3OhHJFv3NMSFYDgREdlAQqkyBTHJM91s31kOZ4OvZwJKdFk5BLk0MLbh51EOGUz9QGX2aCHfy1RvweSi7fgwA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "peerDependencies": { + "nanostores": "^0.9.0 || ^0.10.0", + "react": ">=18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -5533,6 +5571,20 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/nanostores": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-0.10.0.tgz", + "integrity": "sha512-Poy5+9wFXOD0jAstn4kv9n686U2BFw48z/W8lms8cS8lcbRz7BU20JxZ3e/kkKQVfRrkm4yLWCUA6GQINdvJCQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "engines": { + "node": "^18.0.0 || >=20.0.0" + } + }, "node_modules/napi-build-utils": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz", @@ -9368,6 +9420,18 @@ "resolved": "https://registry.npmjs.org/@medv/finder/-/finder-3.1.0.tgz", "integrity": "sha512-ojkXjR3K0Zz3jnCR80tqPL+0yvbZk/lEodb6RIVjLz7W8RVA2wrw8ym/CzCpXO9SYVUIKHFUpc7jvf8UKfIM3w==" }, + "@nanostores/persistent": { + "version": "0.10.1", + "resolved": "https://registry.npmjs.org/@nanostores/persistent/-/persistent-0.10.1.tgz", + "integrity": "sha512-BMYj47ONmkrPkHfomimtBAwtDNNjO57lw0uk7jB35GHVwixmqWtlK6DVAAbioqwJn9WEaWSB/9Ss5ukBG0NHlQ==", + "requires": {} + }, + "@nanostores/react": { + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/@nanostores/react/-/react-0.7.2.tgz", + "integrity": "sha512-e3OhHJFv3NMSFYDgREdlAQqkyBTHJM91s31kOZ4OvZwJKdFk5BLk0MLbh51EOGUz9QGX2aCHfy1RvweSi7fgwA==", + "requires": {} + }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -12321,6 +12385,11 @@ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" }, + "nanostores": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/nanostores/-/nanostores-0.10.0.tgz", + "integrity": "sha512-Poy5+9wFXOD0jAstn4kv9n686U2BFw48z/W8lms8cS8lcbRz7BU20JxZ3e/kkKQVfRrkm4yLWCUA6GQINdvJCQ==" + }, "napi-build-utils": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz", diff --git a/package.json b/package.json index bf45322..4c75f4d 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,14 @@ "@astrojs/sitemap": "^3.0.5", "@astrojs/tailwind": "^5.1.0", "@astrojs/vercel": "^7.3.1", + "@nanostores/persistent": "^0.10.1", + "@nanostores/react": "^0.7.2", "@vercel/speed-insights": "^1.0.10", "astro": "^4.4.0", "clsx": "^2.1.0", - "tailwindcss": "^3.4.1", - "tailwind-merge": "^2.2.1" + "nanostores": "^0.10.0", + "tailwind-merge": "^2.2.1", + "tailwindcss": "^3.4.1" }, "devDependencies": { "@typescript-eslint/parser": "^7.0.1", diff --git a/src/components/Menu/MenuDropdown.tsx b/src/components/Menu/MenuDropdown.tsx index bcc815a..4f68119 100644 --- a/src/components/Menu/MenuDropdown.tsx +++ b/src/components/Menu/MenuDropdown.tsx @@ -1,10 +1,30 @@ import React, { useState, useEffect, useRef } from 'react' -import MenuItems from './MenuItems' +import MenuItem, { type itemDataType } from './MenuItem' +import { useStore } from '@nanostores/react' +import { $activeItem } from '../../utils/menuStore' + +const items: itemDataType[] = [ + { + name: 'INICIO', + url: '/', + icon: '📊' + }, + { + name: 'PESOS', + url: '/', + icon: '🇦🇷' + }, + { + name: 'DÓLARES', + url: '/', + icon: 'US' + } +] const MenuDropdown = () => { const [isOpen, setIsOpen] = useState(false) + const activeItem = useStore($activeItem) const menuRef = useRef() - const handleOpenMenu = (e) => { if (!menuRef.current?.contains(e.target) && isOpen) { setIsOpen(false) @@ -22,11 +42,11 @@ const MenuDropdown = () => { className='flex items-center gap-1 text-gray-400' >
    - 📊 - INICIO + {items[activeItem]?.icon} + {items[activeItem]?.name}
    @@ -46,7 +66,16 @@ const MenuDropdown = () => { ref={menuRef} className='w-[50%] flex flex-col rounded-lg border-[#CAD0E0] dark:border-[#292B2E] border-[1px] bg-gray-100 dark:bg-gray-900 fixed top-8 right-4' > - +
      + {items.map((item, index) => ( + $activeItem.set(index.toString())} + key={index} + active={index.toString() === activeItem} + data={item} + /> + ))} +
    ) : ( '' diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index a211c2e..c33a362 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -1,16 +1,31 @@ import React from 'react' -const MenuItem = ({ active }: { active: boolean }) => { +export interface itemDataType { + name: string + url: string + icon: string +} + +const MenuItem = ({ + active, + data, + onClick +}: { + active: boolean + data: itemDataType + onClick: () => void +}) => { return (
  • - 📊 + {data.icon} - INICIO + {data.name}
    • ) diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 255d14b..07aceb4 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,19 +1,24 @@ --- import NavBar from '../components/Menu/NavBar' interface Props { - title: string, - metaImage: string, - metaDescription: string, + title: string + metaImage: string + metaDescription: string isFooterVisible?: boolean } -const { title, metaImage, metaDescription, isFooterVisible = true } = Astro.props +const { + title, + metaImage, + metaDescription, + isFooterVisible = true +} = Astro.props --- - +