diff --git a/README.md b/README.md index 21ea89f..0ce182c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@

- svgl logo + svgl logo

diff --git a/animations/tap.js b/animations/tap.js index 153215b..d129012 100644 --- a/animations/tap.js +++ b/animations/tap.js @@ -3,7 +3,7 @@ import { motion } from "framer-motion"; const Tap = ({ children }) => { return ( - + {children} ); diff --git a/components/card/index.js b/components/card/index.js index 8d50cc8..d7375f5 100644 --- a/components/card/index.js +++ b/components/card/index.js @@ -1,32 +1,76 @@ import React from "react"; import Link from "next/link"; -import { Box, Text, Icon, Image, Center } from "@chakra-ui/react"; +import { + Box, + Text, + Image, + Center, + HStack, + IconButton, + useColorModeValue, +} from "@chakra-ui/react"; +import { IoCloudDownloadOutline } from "react-icons/io5"; +import { FiExternalLink } from "react-icons/fi"; +import download from "downloadjs"; +import toast from "react-hot-toast"; import Tap from "animations/tap"; const Index = ({ title, url, href }) => { + const bgColor = useColorModeValue("#F2F2F2", "#1D1D1D"); + const color = useColorModeValue("black", "white"); + + const downloadSvg = (url) => { + toast(`Downloading ${title}...`, { + icon: "🥳", + style: { + borderRadius: "10px", + background: bgColor, + color: color, + }, + }); + download(url); + }; + return ( - - - -
- {title} -
- - {title} - - - - + +
+ {title} +
+ + {title} + +
+ + + } + onClick={() => downloadSvg(href)} + /> + + + + } + /> + + + +
+ ); }; diff --git a/components/error/index.js b/components/error/index.js index dfb97f5..09e5d2c 100644 --- a/components/error/index.js +++ b/components/error/index.js @@ -20,10 +20,9 @@ const Error = () => { - - ))} - - - - - - } - /> - - - - - } - onClick={mobileNav.onOpen} - /> - - - - - - - - - - - - - - - - ); -}; - -export default Header; diff --git a/components/header/links.js b/components/header/links.js deleted file mode 100644 index 5c4cf1d..0000000 --- a/components/header/links.js +++ /dev/null @@ -1,16 +0,0 @@ -const HEADER_LINKS = [ - { - id: 1, - href: "/", - external: false, - title: "Browse", - }, - { - id: 2, - href: "https://github.com/pheralb/svgl/tree/main/public/library", - external: true, - title: "Library", - } -]; - -export default HEADER_LINKS; diff --git a/components/header/logo.js b/components/header/logo.js deleted file mode 100644 index 4491c7e..0000000 --- a/components/header/logo.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { useEffect } from "react"; -import Link from "next/link"; -import { useRouter } from "next/router"; -import { IconButton } from "@chakra-ui/react"; -import Hover from "animations/tap"; -import { svgl } from "components/svg"; -import confetti from "canvas-confetti"; - -const Logo = () => { - const router = useRouter(); - - useEffect(() => { - logoHeader.addEventListener("contextmenu", (event) => { - event.preventDefault(); - router.push("/design"); - }); - }, []); - - return ( - - - - - - ); -}; - -export default Logo; diff --git a/components/search/index.js b/components/search/index.js index 9b14a41..c9c54b2 100644 --- a/components/search/index.js +++ b/components/search/index.js @@ -13,33 +13,31 @@ import { Icon, } from "@chakra-ui/react"; import { IoSearch } from "react-icons/io5"; -import { BiLinkExternal } from "react-icons/bi"; +import { FiExternalLink } from "react-icons/fi"; import { Algolia } from "components/svg"; -import Tap from "animations/tap"; const AutocompleteItem = ({ id, title, href, url }) => { return ( <> - - - - - {title} - - {title} - - - - - - + + + + {title} + + {title} + + + + + ); }; @@ -96,6 +94,7 @@ export default function Search(props) { placeholder="Search icons..." _focus={{ shadow: "md" }} ref={inputRef} + autoFocus {...inputProps} /> diff --git a/components/search/modal.js b/components/search/modal.js index 613ba00..f58937b 100644 --- a/components/search/modal.js +++ b/components/search/modal.js @@ -13,21 +13,18 @@ import { useColorModeValue, } from "@chakra-ui/react"; import Search from "components/search"; -import { IoSearch } from "react-icons/io5"; +import { IoSearchOutline } from "react-icons/io5"; +import Item from "components/sidebar/item"; const ModalSearch = (props) => { const { isOpen, onOpen, onClose } = useDisclosure(); const bg = useColorModeValue("light.100", "dark.800"); return ( <> - } - onClick={onOpen} - {...props} - /> - + + Search + + Search diff --git a/components/footer/index.js b/components/sidebar/by.js similarity index 65% rename from components/footer/index.js rename to components/sidebar/by.js index 82665e3..8ab842e 100644 --- a/components/footer/index.js +++ b/components/sidebar/by.js @@ -1,11 +1,12 @@ import React from "react"; -import { Center, Text, VStack } from "@chakra-ui/react"; +import { Center, useColorModeValue, VStack } from "@chakra-ui/react"; import Link from "next/link"; const Index = () => { + const color = useColorModeValue("gray.400", "gray.600"); return ( <> -
+
Built by Pablo Hdez diff --git a/components/sidebar/dark.js b/components/sidebar/dark.js new file mode 100644 index 0000000..6feedb5 --- /dev/null +++ b/components/sidebar/dark.js @@ -0,0 +1,22 @@ +import React from "react"; +import { useColorMode, useColorModeValue } from "@chakra-ui/react"; +import { IoMoonOutline, IoSunnyOutline } from "react-icons/io5"; +import Item from "./item"; + +const Index = () => { + const { colorMode, toggleColorMode } = useColorMode(); + const iconChange = useColorModeValue(IoSunnyOutline, IoMoonOutline); + const theme = useColorModeValue("Light", "Dark"); + + function toggleTheme() { + toggleColorMode(); + } + + return ( + + {theme} + + ); +}; + +export default Index; diff --git a/components/sidebar/index.js b/components/sidebar/index.js new file mode 100644 index 0000000..57b6c85 --- /dev/null +++ b/components/sidebar/index.js @@ -0,0 +1,108 @@ +import React from "react"; +import { + Box, + Drawer, + DrawerContent, + DrawerOverlay, + DrawerCloseButton, + DrawerHeader, + DrawerBody, + Flex, + IconButton, + useColorModeValue, + useDisclosure, +} from "@chakra-ui/react"; +import NextLink from "next/link"; +import { IoApps } from "react-icons/io5"; + +import Logo from "components/sidebar/logo"; +import Item from "components/sidebar/item"; +import SidebarLinks from "components/sidebar/links"; +import Dark from "components/sidebar/dark"; +import By from "components/sidebar/by"; +import ModalSearch from "components/search/modal"; + +export default function Index({ children }) { + const sidebar = useDisclosure(); + const border = useColorModeValue("dark.200", "dark.800"); + const bg = useColorModeValue("gray.100", "lightDark.900"); + + const SidebarContent = (props) => ( + + + + + + {SidebarLinks.map((link) => ( + + + {link.title} + + + ))} + + + + + + + + ); + + return ( + + + + + + + + + + + + + + } + size="md" + w="100%" + variant="ghost" + borderWidth="1px" + /> + + + {children} + + + + ); +} diff --git a/components/sidebar/item.js b/components/sidebar/item.js new file mode 100644 index 0000000..67c12ce --- /dev/null +++ b/components/sidebar/item.js @@ -0,0 +1,35 @@ +import React from "react"; +import { useRouter } from 'next/router'; +import { Flex, Icon, useColorModeValue } from "@chakra-ui/react"; +import { FiExternalLink } from "react-icons/fi"; +import Tap from "animations/tap"; + +const Item = (props) => { + + const { icon, external, children, href, ...rest } = props; + const { pathname } = useRouter(); + const isActive = pathname === href; + const borderColor = useColorModeValue("dark.800", "white"); + + return ( + + + {icon && } + {children} + {external && } + + + ); +}; + +export default Item; diff --git a/components/sidebar/links.js b/components/sidebar/links.js new file mode 100644 index 0000000..df2ec93 --- /dev/null +++ b/components/sidebar/links.js @@ -0,0 +1,28 @@ +import { IoHomeOutline, IoLogoGithub } from 'react-icons/io5'; +import { FiTwitter } from 'react-icons/fi'; + +const SidebarLinks = [ + { + id: 1, + href: "/", + external: false, + title: "Browse", + icon: IoHomeOutline, + }, + { + id: 2, + href: "https://github.com/pheralb/svgl/", + external: true, + title: "Github", + icon: IoLogoGithub, + }, + { + id: 3, + href: "https://twitter.com/pheralb_", + external: true, + title: "Twitter", + icon: FiTwitter, + } +]; + +export default SidebarLinks; diff --git a/components/sidebar/logo.js b/components/sidebar/logo.js new file mode 100644 index 0000000..7417c3d --- /dev/null +++ b/components/sidebar/logo.js @@ -0,0 +1,30 @@ +import React from "react"; +import Link from "next/link"; +import { HStack, Icon, Text } from "@chakra-ui/react"; +import { svgl } from "components/svg"; +import Tap from "animations/tap"; + +const Logo = () => { + return ( + + + + + + svgl + + + + + ); +}; + +export default Logo; diff --git a/data/icons.js b/data/icons.js index 4141789..28ad773 100644 --- a/data/icons.js +++ b/data/icons.js @@ -300,6 +300,20 @@ const Icons = [ category: "Social", url: "https://www.linkedin.com/", }, + { + id: 44, + href:"/library/telegram.svg", + title: "Telegram", + category: "Social", + url: "https://web.telegram.org/", + }, + { + id: 45, + href: "/library/whatsapp.svg", + title: "WhatsApp", + category: "Social", + url: "https://web.whatsapp.com/", + } ]; export default Icons; diff --git a/package-lock.json b/package-lock.json index e900ec3..a9d2f14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2", + "react-hot-toast": "^2.2.0", "react-icons": "^4.3.1", "swr": "^1.2.2" }, @@ -3194,6 +3195,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz", + "integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -4194,6 +4203,21 @@ "react": "^16.8.0 || ^17.0.0" } }, + "node_modules/react-hot-toast": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz", + "integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==", + "dependencies": { + "goober": "^2.1.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-icons": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", @@ -7229,6 +7253,12 @@ "slash": "^3.0.0" } }, + "goober": { + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.8.tgz", + "integrity": "sha512-S0C85gCzcfFCMSdjD/CxyQMt1rbf2qEg6hmDzxk2FfD7+7Ogk55m8ZFUMtqNaZM4VVX/qaU9AzSORG+Gf4ZpAQ==", + "requires": {} + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -7944,6 +7974,14 @@ "use-sidecar": "^1.0.5" } }, + "react-hot-toast": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.2.0.tgz", + "integrity": "sha512-248rXw13uhf/6TNDVzagX+y7R8J183rp7MwUMNkcrBRyHj/jWOggfXTGlM8zAOuh701WyVW+eUaWG2LeSufX9g==", + "requires": { + "goober": "^2.1.1" + } + }, "react-icons": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", diff --git a/package.json b/package.json index 9e7cb7d..c4707cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svgl", - "version": "1.0.7", + "version": "1.2.0", "description": "Beautiful SVG vector logos", "author": "pheralb", "license": "MIT", @@ -21,6 +21,7 @@ "next": "12.1.0", "react": "17.0.2", "react-dom": "17.0.2", + "react-hot-toast": "^2.2.0", "react-icons": "^4.3.1", "swr": "^1.2.2" }, diff --git a/pages/_app.js b/pages/_app.js index 7d53375..253d44a 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -5,9 +5,9 @@ import Head from "next/head"; import { ChakraProvider, Container } from "@chakra-ui/react"; // 📦 Components -> +import Sidebar from "components/sidebar"; import Layout from "components/layout"; -import Header from "components/header"; -import Footer from "components/footer"; +import Footer from "components/sidebar/by"; // 💙 Global CSS -> import "styles/globals.css"; @@ -17,6 +17,7 @@ import theme from "styles/theme"; // 🐢 Animations -> import Transitions from "animations/transitions"; +import { Toaster } from "react-hot-toast"; function MyApp({ Component, pageProps, router }) { return ( @@ -26,31 +27,47 @@ function MyApp({ Component, pageProps, router }) { SVGL - Beautiful SVG vector logos - + - - + + - + - - + + -
- - - - - -