diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..3ccf435 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,20 @@ +module.exports = { + root: true, + parser: '@typescript-eslint/parser', + extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], + plugins: ['svelte3', '@typescript-eslint'], + ignorePatterns: ['*.cjs'], + overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], + settings: { + 'svelte3/typescript': () => require('typescript') + }, + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020 + }, + env: { + browser: true, + es2017: true, + node: true + } +}; diff --git a/.eslintrc.json b/.eslintrc.json deleted file mode 100644 index 957cd15..0000000 --- a/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["next/core-web-vitals"] -} diff --git a/.gitignore b/.gitignore index a5b11df..6635cf5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,48 +1,10 @@ -# dependencies -> -/node_modules -/.pnp -.pnp.js -package-lock.json - -# testing -> -/coverage - -# next.js -> -/.next/ -/out/ - -# production -> -/build - -# misc -> .DS_Store -*.pem - -# debug -> -npm-debug.log* -yarn-debug.log* -yarn-error.log* -.pnpm-debug.log* - -# local env files -> -.env*.local - -# vercel -> -.vercel - -# typescript -> -*.tsbuildinfo - -# PWA files -> -**/public/sw.js -**/public/workbox-*.js -**/public/worker-*.js -**/public/sw.js.map -**/public/workbox-*.js.map -**/public/worker-*.js.map - -# SWC files -> -.swc - -# PNPM files -> -pnpm-lock.yaml +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/.nvmrc b/.nvmrc deleted file mode 100644 index 0a2cd98..0000000 --- a/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v16.15.1 \ No newline at end of file diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a77fdde --- /dev/null +++ b/.prettierrc @@ -0,0 +1,9 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte"], + "pluginSearchDirs": ["."], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/README.md b/README.md index cb6c3d0..5c91169 100644 --- a/README.md +++ b/README.md @@ -1,108 +1,38 @@ -

- - SVGL Banner - -

+# create-svelte -## 📦 Packages: +Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte). -- ⚡️ [Nextjs](https://nextjs.org/) - The React Framework for Production. -- ⚒️ [React 18](https://reactjs.org/) - A JavaScript library for building user interfaces. -- 💙 [Typescript](https://www.typescriptlang.org/) - A superset of JavaScript. -- ✅ [Vitest](https://vitest.dev/) - A blazing fast unit test framework. -- 💅 [Chakra UI](https://chakra-ui.com/) - Create accessible React apps with speed. -- 💥 [Framer Motion](https://www.framer.com/motion/) - Production-ready motion library. -- 💖 [Phosphor Icons](https://phosphoricons.com/) - A flexible icon family for everyone. -- ⬇️ [Next-PWA](https://github.com/shadowwalker/next-pwa) - Zero config PWA plugin for Next.js, with workbox. +## Creating a project -## 🚀 Getting started: - -You need: - -- [Node.js 16+ (recommend: 16.15.1 LTS)](https://nodejs.org/en/) -- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) - -1. Clone the repository: +If you're seeing this, you've probably already done this step. Congrats! ```bash -git@github.com:pheralb/svgl.git +# create a new project in the current directory +npm create svelte@latest + +# create a new project in my-app +npm create svelte@latest my-app ``` -2. Install dependencies: +## Developing -```bash -npm install -# or -yarn install -``` - -3. Run: +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: ```bash npm run dev -# or -yarn dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open ``` -4. Test & Build: +## Building + +To create a production version of your app: ```bash -npm run ready -# or -yarn ready +npm run build ``` -Open [localhost:3000](localhost:3000) with your browser to see the result. +You can preview the production build with `npm run preview`. -## 🤔 Can I add my logo? - -Yes! Here is a guide for you 🥳: - -1. [Fork the repository](https://github.com/pheralb/svgl/fork). - -2. Clone the forked repository: - -```bash -git@github.com:YOUR_USERNAME/svgl.git -``` - -3. Add the **.svg** logo here: [`/public/library`](https://github.com/pheralb/svgl/tree/main/public/library). - -4. Add your logo information here following the structure: [`/data/svgs.json`](https://github.com/pheralb/svgl/blob/main/data/svgs.json). - -```json -{ - "id": 1, - "slug": "/library/your_logo.svg", - "title": "Logo Title", - "category": "Logo Category", - "url": "Your Website / app url" -} -``` - -5. Create a commit and push: - -```bash -git add . -git commit -m "🥰 Added my logo" -git push origin main -``` - -6. Create a pull request with your changes and 🥳 ready. - -## 🚂 Api endpoints: - -```bash -- /api/all: returns all the logos. -- /api/search?id=2: returns the logo with id 2. -- /api/search?q=logo: returns the logo with query. -``` - -## ⚒️ Shortcuts: - -- ⭐ SVG Library: [/public/library/](https://github.com/pheralb/svgl/tree/main/public/library). -- ✍️ SVG JSON logos: [/data/](https://github.com/pheralb/svgl/tree/main/data). - -## 🔑 License: - -- [MIT](https://github.com/pheralb/svgl/blob/main/LICENSE). +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. diff --git a/next-env.d.ts b/next-env.d.ts deleted file mode 100644 index 4f11a03..0000000 --- a/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/next-seo.config.ts b/next-seo.config.ts deleted file mode 100644 index a2e4c89..0000000 --- a/next-seo.config.ts +++ /dev/null @@ -1,57 +0,0 @@ -export default { - title: "A beautiful library with SVG logos", - titleTemplate: "%s - Svgl", - description: "Svgl is a library of free and open source SVG logos.", - defaultTitle: "svgl", - additionalLinkTags: [ - { - rel: "icon", - href: "/icons/icon.ico", - }, - { - rel: "apple-touch-icon", - href: "/icons/apple-touch-icon-180x180.png", - sizes: "180x180", - }, - { - rel: "apple-touch-icon", - href: "/icons/apple-touch-icon-152x152.png", - sizes: "152x152", - }, - { - rel: "apple-touch-icon", - href: "/icons/apple-touch-icon-114x114.png", - sizes: "114x114", - }, - { - rel: "manifest", - href: "/manifest.json", - }, - { - rel: "preload", - href: "/fonts/Inter-Regular.woff2", - as: "font", - type: "font/woff2", - crossOrigin: "anonymous", - }, - ], - openGraph: { - site_name: "Svgl", - url: "https://svgl.vercel.app/", - type: "website", - locale: "en_IE", - images: [ - { - url: "/images/banner.png", - width: 1920, - height: 1080, - type: "image/png", - } - ], - }, - twitter: { - handle: "@pheralb_", - site: "@pheralb_", - cardType: "summary_large_image", - }, -}; diff --git a/next.config.js b/next.config.js deleted file mode 100644 index 9fbf65a..0000000 --- a/next.config.js +++ /dev/null @@ -1,14 +0,0 @@ -/** @type {import('next').NextConfig} */ -const withPWA = require("next-pwa"); - -const nextConfig = withPWA({ - reactStrictMode: true, - pwa: { - dest: "public", - register: true, - skipWaiting: true, - disable: process.env.NODE_ENV === "development", - }, -}); - -module.exports = nextConfig; diff --git a/package.json b/package.json index c37aee3..e665270 100644 --- a/package.json +++ b/package.json @@ -1,56 +1,33 @@ { - "name": "svgl", - "version": "2.0.1", - "description": "A beautiful library with SVG logos.", - "private": true, - "author": "@pheralb_", - "license": "MIT", - "keywords": [ - "svgs", - "logos", - "images", - "library" - ], - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "lint": "next lint", - "test": "vitest", - "ready": "vitest && next build" - }, - "dependencies": { - "@chakra-ui/react": "2.2.4", - "@emotion/react": "11.10.0", - "@emotion/styled": "11.10.0", - "@uiball/loaders": "1.2.6", - "canvas-confetti": "1.5.1", - "downloadjs": "1.4.7", - "framer-motion": "6.5.1", - "next": "12.2.3", - "next-pwa": "5.5.4", - "next-seo": "5.5.0", - "nextjs-progressbar": "0.0.14", - "phosphor-react": "1.4.1", - "react": "18.2.0", - "react-dom": "18.2.0", - "react-hot-toast": "2.3.0", - "react-hotkeys-hook": "3.4.7", - "swr": "1.3.0" - }, - "devDependencies": { - "@testing-library/jest-dom": "5.16.4", - "@testing-library/react": "13.3.0", - "@types/canvas-confetti": "1.4.3", - "@types/downloadjs": "1.4.3", - "@types/node": "18.6.3", - "@types/react": "18.0.15", - "@types/react-dom": "18.0.6", - "@vitejs/plugin-react": "2.0.0", - "eslint": "8.21.0", - "eslint-config-next": "12.2.3", - "jsdom": "20.0.0", - "typescript": "4.7.4", - "vitest": "0.20.2" - } + "name": "svgl", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "test:unit": "vitest", + "lint": "prettier --plugin-search-dir . --check . && eslint .", + "format": "prettier --plugin-search-dir . --write ." + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^2.0.0", + "@sveltejs/kit": "^1.5.0", + "@typescript-eslint/eslint-plugin": "^5.45.0", + "@typescript-eslint/parser": "^5.45.0", + "eslint": "^8.28.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-svelte3": "^4.0.0", + "prettier": "^2.8.0", + "prettier-plugin-svelte": "^2.8.1", + "svelte": "^3.54.0", + "svelte-check": "^3.0.1", + "tslib": "^2.4.1", + "typescript": "^4.9.3", + "vite": "^4.0.0", + "vitest": "^0.25.3" + }, + "type": "module" } diff --git a/src/_tests_/categories.test.tsx b/src/_tests_/categories.test.tsx deleted file mode 100644 index b9a8974..0000000 --- a/src/_tests_/categories.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import { test, expect, describe } from "vitest"; -import { render, screen } from "@testing-library/react"; -import "@testing-library/jest-dom"; -import Categories from "@/layout/header/categories"; - -describe("Categories", () => { - test("renders learn react link", () => { - render(); - const showText = screen.getByText(/software/i); - expect(showText).toBeInTheDocument(); - }); -}); diff --git a/src/animations/show.tsx b/src/animations/show.tsx deleted file mode 100644 index 0d8a350..0000000 --- a/src/animations/show.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { FC } from "react"; -import { motion } from "framer-motion"; - -type ShowProps = { - children: React.ReactNode; - delay?: number; -}; - -const Show = ({ children, delay }: ShowProps) => { - return ( - - {children} - - ); -}; - -export default Show; diff --git a/src/animations/tap.tsx b/src/animations/tap.tsx deleted file mode 100644 index e5dd2d6..0000000 --- a/src/animations/tap.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; -import { motion } from "framer-motion"; - -type TapAnimation = { - children: React.ReactNode; -}; - -const Tap = ({ children } : TapAnimation) => { - return ( - - {children} - - ); -}; - -export default Tap; diff --git a/src/app.d.ts b/src/app.d.ts new file mode 100644 index 0000000..f59b884 --- /dev/null +++ b/src/app.d.ts @@ -0,0 +1,12 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } +} + +export {}; diff --git a/src/app.html b/src/app.html new file mode 100644 index 0000000..effe0d0 --- /dev/null +++ b/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/src/common/grid.tsx b/src/common/grid.tsx deleted file mode 100644 index 33bf93a..0000000 --- a/src/common/grid.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import { LayoutProps } from "@/interfaces/components"; -import { SimpleGrid } from "@chakra-ui/react"; - -const Grid = (props: LayoutProps) => { - return ( - - {props.children} - - ); -}; - -export default Grid; diff --git a/src/common/iconBtn.tsx b/src/common/iconBtn.tsx deleted file mode 100644 index f97c746..0000000 --- a/src/common/iconBtn.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import { CustomIconBtnProps } from "@/interfaces/components"; -import { IconButton } from "@chakra-ui/react"; - -const CustomIconBtn = (props: CustomIconBtnProps) => { - return ( - - ); -}; - -export default CustomIconBtn; diff --git a/src/common/link.tsx b/src/common/link.tsx deleted file mode 100644 index bbfacc2..0000000 --- a/src/common/link.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { Link } from "@chakra-ui/react"; -import NextLink from "next/link"; -import { CustomLinkProps } from "@/interfaces/components"; - -const CustomLink = ({ href, children, external, font, mr, ml }: CustomLinkProps) => { - return ( - - - {children} - - - ); -}; - -export default CustomLink; diff --git a/src/components/error.tsx b/src/components/error.tsx deleted file mode 100644 index a31bf50..0000000 --- a/src/components/error.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { ErrorProps } from "@/interfaces/components"; -import { - Button, - Center, - Heading, - HStack, - Text, - VStack, -} from "@chakra-ui/react"; -import { ArrowClockwise, ArrowSquareOut, Warning } from "phosphor-react"; -import { useRouter } from "next/router"; -import CustomLink from "@/common/link"; - -const Error = (props: ErrorProps) => { - const router = useRouter(); - - const handleRefresh = () => { - router.reload(); - }; - - return ( -
- - - {props.title} - {props.description} - - - - - - - -
- ); -}; - -export default Error; diff --git a/src/components/loading.tsx b/src/components/loading.tsx deleted file mode 100644 index 798b74f..0000000 --- a/src/components/loading.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { LoadingProps } from "@/interfaces/components"; -import { Center, Spinner, Text, VStack } from "@chakra-ui/react"; -import { LeapFrog } from "@uiball/loaders"; - -const Loading = (props: LoadingProps) => { - return ( -
- - - {props.text} - -
- ); -}; - -export default Loading; diff --git a/src/components/search.tsx b/src/components/search.tsx deleted file mode 100644 index aa3c4d2..0000000 --- a/src/components/search.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { useEffect, useRef, useState } from "react"; -import { - Input, - Text, - Image, - HStack, - Box, - Center, - Spinner, -} from "@chakra-ui/react"; -import useDebounce from "@/hooks/useDebounce"; -import { SearchProps, SVGCardProps } from "@/interfaces/components"; -import CustomLink from "@/common/link"; -import { getSvgByQuery } from "@/services"; -import CustomIconBtn from "@/common/iconBtn"; -import { Trash } from "phosphor-react"; -import Tap from "@/animations/tap"; - -const Search = ({ availableFocus = false }: SearchProps) => { - const [search, setSearch] = useState(""); - const [empty, setEmpty] = useState(false); - const [results, setResults] = useState([]); - const debouncedSearch = useDebounce(search, 500); - const searchRef = useRef(null); - - useEffect(() => { - if (debouncedSearch) { - fetch(getSvgByQuery + debouncedSearch).then((res) => { - if (res.ok) { - res.json().then((data) => { - setEmpty(data.length === 0); - setResults(data); - }); - } - }); - } - }, [debouncedSearch]); - - useEffect(() => { - const isFocusAvailable = availableFocus && searchRef.current; - - if (!isFocusAvailable) return; - - const timeoutId = setTimeout(() => { - searchRef.current?.focus(); - }, 100); - - return () => clearTimeout(timeoutId); - }, [availableFocus]); - - const handleFilter = (e: React.ChangeEvent) => { - setEmpty(false); - setSearch(e.target.value); - }; - - const handleClear = () => { - setSearch(""); - setResults([]); - }; - - return ( - <> - - {search && !empty && results.length === 0 && ( - - - - )} - {search && empty && No results found!} - {results && results.length > 0 && ( - <> - - {results.map((item: SVGCardProps) => ( - - - -
- {item.title} -
- {item.title} -
-
-
- ))} -
- - } - onClick={handleClear} - /> - - - )} - - ); -}; - -export default Search; diff --git a/src/components/svgCard.tsx b/src/components/svgCard.tsx deleted file mode 100644 index 047e2df..0000000 --- a/src/components/svgCard.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from "react"; -import { SVGCardProps } from "@/interfaces/components"; -import { - Box, - Center, - Image, - Text, - useColorModeValue, - useDisclosure, -} from "@chakra-ui/react"; -import Tap from "@/animations/tap"; -import CustomLink from "@/common/link"; -import { Smiley } from "phosphor-react"; - -const SVGCard = (props: SVGCardProps) => { - const bg = useColorModeValue("bg.light", "bg.dark"); - const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)"); - return ( - <> - - - -
- {props.title} -
- - {props.title} - -
-
-
- - ); -}; - -export default SVGCard; diff --git a/src/components/svgInfo.tsx b/src/components/svgInfo.tsx deleted file mode 100644 index 6f5d8fc..0000000 --- a/src/components/svgInfo.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React from "react"; -import { - Button, - Flex, - Heading, - HStack, - Icon, - Image, - Link, -} from "@chakra-ui/react"; -import { ArrowSquareOut, Copy, DownloadSimple } from "phosphor-react"; -import confetti from "canvas-confetti"; -import download from "downloadjs"; -import { toast } from "react-hot-toast"; -import { ToastTheme } from "@/theme/toast"; -import { SVGCardProps } from "@/interfaces/components"; - -// Download SVG => -const downloadSvg = (url?: string) => { - confetti({ - particleCount: 200, - startVelocity: 30, - spread: 300, - gravity: 1.2, - origin: { y: 0 }, - }); - download(url || ""); -}; - - -const MIMETYPE = 'text/plain'; - -// Return content of svg as blob => -const getSvgContent = async (url: string | undefined, isSupported: boolean) => { - const response = await fetch(url || ""); - const content = await response.text(); - - // It was necessary to use blob because in chrome there were issues with the copy to clipboard - const blob = new Blob([content], { type: MIMETYPE }); - return isSupported ? blob : content; -} - -// Copy to clipboard => -const copyToClipboard = async (url?: string) => { - const data = { - [MIMETYPE]: getSvgContent(url, true) - }; - try { - const clipboardItem = new ClipboardItem(data); - await navigator.clipboard.write([clipboardItem]); - } catch (error) { - // This section works as a fallback on Firefox - const content = await getSvgContent(url, false) as string; - await navigator.clipboard.writeText(content); - } - toast("Copied to clipboard", ToastTheme); -}; - -const SVGInfo = (props: SVGCardProps) => { - return ( - - {props.title} - - {props.title} - - - - - - {props.title} website - - - - ); -}; - -export default SVGInfo; diff --git a/src/hooks/useDebounce.tsx b/src/hooks/useDebounce.tsx deleted file mode 100644 index 27a5bed..0000000 --- a/src/hooks/useDebounce.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { useEffect, useState } from "react"; - -function useDebounce(value: T, delay?: number): T { - const [debouncedValue, setDebouncedValue] = useState(value); - - useEffect(() => { - const timer = setTimeout(() => setDebouncedValue(value), delay || 500); - - return () => { - clearTimeout(timer); - }; - }, [value, delay]); - - return debouncedValue; -} - -export default useDebounce; diff --git a/src/index.test.ts b/src/index.test.ts new file mode 100644 index 0000000..e07cbbd --- /dev/null +++ b/src/index.test.ts @@ -0,0 +1,7 @@ +import { describe, it, expect } from 'vitest'; + +describe('sum test', () => { + it('adds 1 + 2 to equal 3', () => { + expect(1 + 2).toBe(3); + }); +}); diff --git a/src/interfaces/components.ts b/src/interfaces/components.ts deleted file mode 100644 index b7c5ea8..0000000 --- a/src/interfaces/components.ts +++ /dev/null @@ -1,48 +0,0 @@ -export interface LayoutProps { - children: React.ReactNode; -} - -export interface CustomLinkProps { - href: string; - children: React.ReactNode; - external?: boolean; - font?: string; - mr?: string; - ml?: string; -} - -export interface CustomIconBtnProps { - title: string; - icon: React.ReactElement; - mr?: string; - ml?: string; - onClick?: () => void; -} - -export interface SVGCardProps { - id: number; - svg: string; - title: string; - slug?: string; - url?: string; -} - -export interface SidebarContentProps { - display?: object; - w?: string; - borderRight?: string; - children?: React.ReactNode; -} - -export interface LoadingProps { - text: string; -} - -export interface ErrorProps { - title: string; - description: string; -} - -export interface SearchProps { - availableFocus?: boolean; -} diff --git a/src/interfaces/svgData.ts b/src/interfaces/svgData.ts deleted file mode 100644 index ba8e4f0..0000000 --- a/src/interfaces/svgData.ts +++ /dev/null @@ -1,8 +0,0 @@ -export interface SvgData { - id: number; - slug: string; - title: string; - category: string; - categories?: string[]; - url: string; -} diff --git a/src/layout/footer/index.tsx b/src/layout/footer/index.tsx deleted file mode 100644 index 93ce43e..0000000 --- a/src/layout/footer/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import CustomLink from "@/common/link"; -import { Flex, Heading, HStack, Icon, Text } from "@chakra-ui/react"; -import { RocketLaunch, TwitterLogo } from "phosphor-react"; -import React from "react"; - -type Props = {}; - -const Index = (props: Props) => { - return ( - - - - - Created by Pablo - - - - ); -}; - -export default Index; diff --git a/src/layout/header/categories.tsx b/src/layout/header/categories.tsx deleted file mode 100644 index ed290e4..0000000 --- a/src/layout/header/categories.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react"; -import useSWR from "swr"; -import { getCategorySvgs } from "@/services"; -import CustomLink from "@/common/link"; -import { Box, useColorModeValue } from "@chakra-ui/react"; -import { RaceBy } from "@uiball/loaders"; -import Tap from "@/animations/tap"; -import { useRouter } from "next/router"; - -const Categories = () => { - const { data, error } = useSWR(getCategorySvgs); - const color = useColorModeValue("rgb(0,0,0, .1)", "rgb(255,255,255, .1)"); - const router = useRouter(); - if (error) return
failed to load
; - if (!data) - return ; - return ( - <> - {data.map((category: string) => ( - - - - {category} - - - - ))} - - ); -}; - -export default Categories; diff --git a/src/layout/header/index.tsx b/src/layout/header/index.tsx deleted file mode 100644 index e8552da..0000000 --- a/src/layout/header/index.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import { - Box, - Flex, - useColorModeValue, - HStack, - Container, - Heading, - Icon, - useDisclosure, - Collapse, -} from '@chakra-ui/react' -import { ArrowSquareOut, MagnifyingGlass, Sticker, X } from 'phosphor-react' -import Theme from './theme' -import Tap from '@/animations/tap' -import Mobile from './mobile' -import { Links } from './links' -import CustomLink from '@/common/link' -import Categories from './categories' -import Search from '@/components/search' -import CustomIconBtn from '@/common/iconBtn' -import { useHotkeys } from 'react-hotkeys-hook' - -const Header = () => { - const bg = useColorModeValue('bg.light', 'bg.dark') - const { isOpen, onToggle } = useDisclosure() - useHotkeys('ctrl+k', (e) => { - e.preventDefault() - onToggle() - }) - return ( - <> - - - - - - - - svgl - - - - - - {Links.map((link) => ( - - - {link.title} - {link.external ? ( - - ) : null} - - - ))} - - - : - } - onClick={onToggle} - /> - - - - - - - - - - - - - - - - - - - - - - - - ) -} - -export default Header diff --git a/src/layout/header/links.ts b/src/layout/header/links.ts deleted file mode 100644 index ffaf4e5..0000000 --- a/src/layout/header/links.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const Links = [ - { - title: "Github", - slug: "https://github.com/pheralb/svgl", - external: true, - }, - { - title: "Twitter", - slug: "https://twitter.com/pheralb_", - external: true, - }, -]; diff --git a/src/layout/header/mobile.tsx b/src/layout/header/mobile.tsx deleted file mode 100644 index 03b8474..0000000 --- a/src/layout/header/mobile.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import CustomLink from "@/common/link"; -import { - Button, - CloseButton, - IconButton, - useColorModeValue, - useDisclosure, - VStack, -} from "@chakra-ui/react"; -import { List } from "phosphor-react"; -import { Links } from "./links"; -import Theme from "./theme"; - -const Mobile = () => { - const bg = useColorModeValue("bg.light", "bg.dark"); - const mobileNav = useDisclosure(); - return ( - <> - - } - onClick={mobileNav.onOpen} - ml="2" - /> - - - {Links.map((link) => ( - - {link.title} - - ))} - - - ); -}; - -export default Mobile; diff --git a/src/layout/header/theme.tsx b/src/layout/header/theme.tsx deleted file mode 100644 index b63f79f..0000000 --- a/src/layout/header/theme.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import { AnimatePresence, motion } from "framer-motion"; -import { useColorMode, useColorModeValue } from "@chakra-ui/react"; -import CustomIconBtn from "@/common/iconBtn"; -import { Moon, Sun } from "phosphor-react"; - -const Theme = () => { - const { toggleColorMode } = useColorMode(); - const key = useColorModeValue("light", "dark"); - const icon = useColorModeValue(, ); - - return ( - - - - - - ); -}; - -export default Theme; diff --git a/src/layout/index.tsx b/src/layout/index.tsx deleted file mode 100644 index 5bfae45..0000000 --- a/src/layout/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import { LayoutProps } from "@/interfaces/components"; -import { Container } from "@chakra-ui/react"; -import Header from "./header"; -import Footer from "./footer"; - -const Index = ({ children }: LayoutProps) => { - return ( - <> -
- {children} -