mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
New design & bug fixes
This commit is contained in:
pheralb
+17
-17
@@ -5,6 +5,7 @@ import Head from "next/head";
|
||||
import { ChakraProvider, Container } from "@chakra-ui/react";
|
||||
|
||||
// 📦 Components ->
|
||||
import Layout from "components/layout";
|
||||
import Header from "components/header";
|
||||
import Footer from "components/footer";
|
||||
|
||||
@@ -14,36 +15,35 @@ import "styles/globals.css";
|
||||
// 🎨 Theme ->
|
||||
import theme from "styles/theme";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
// 🐢 Animations ->
|
||||
import Transitions from "animations/transitions";
|
||||
|
||||
function MyApp({ Component, pageProps, router }) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>SVGParty - Beautiful SVG vector logos</title>
|
||||
<title>SVGL - Beautiful SVG vector logos</title>
|
||||
<meta name="description" content="SVGs for everyone, totally free" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta
|
||||
property="og:title"
|
||||
content="SVGParty - Beautiful SVG logos"
|
||||
/>
|
||||
<meta property="og:url" content="https://svgparty.vercel.app/" />
|
||||
<meta property="og:title" content="SVGL - Beautiful SVG logos" />
|
||||
<meta property="og:url" content="https://svgl.vercel.app/" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Beautiful SVG logos. Free and open source."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://svgparty.vercel.app/images/banner.png"
|
||||
/>
|
||||
<meta property="og:image" content="/images/logo.png" />
|
||||
<meta name="keywords" content="svg,vector,logo,logos,download" />
|
||||
<meta content="#16161a" name="theme-color" />
|
||||
<link rel="icon" href="/images/logo.png" />
|
||||
<link rel="icon" href="/icons/icon.ico" />
|
||||
</Head>
|
||||
<ChakraProvider theme={theme}>
|
||||
<Container maxW={{ base: "100%", md: "85%" }}>
|
||||
<Header />
|
||||
<Component {...pageProps} />
|
||||
<Footer />
|
||||
</Container>
|
||||
<Header />
|
||||
<Layout>
|
||||
<Transitions key={router.route}>
|
||||
<Component {...pageProps} />
|
||||
</Transitions>
|
||||
</Layout>
|
||||
<Footer />
|
||||
</ChakraProvider>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
import { ColorModeScript } from "@chakra-ui/react";
|
||||
import NextDocument, { Html, Head, Main, NextScript } from "next/document";
|
||||
import theme from "styles/theme";
|
||||
|
||||
export default class Document extends NextDocument {
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body>
|
||||
<ColorModeScript initialColorMode={theme.config.initialColorMode} />
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
+14
-16
@@ -1,27 +1,25 @@
|
||||
import { chakra, Box, Container, Text } from "@chakra-ui/react";
|
||||
import { chakra, Box, Container, Text, Flex, Icon } from "@chakra-ui/react";
|
||||
import Search from "components/search";
|
||||
import Items from "components/items/all";
|
||||
import Show from "animations/show";
|
||||
import { rocket } from "components/svg";
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<>
|
||||
<Box mt="10">
|
||||
<Box mt="6">
|
||||
<Box w="full" border="solid 1px transparent">
|
||||
<Box textAlign="center">
|
||||
<Show delay="0">
|
||||
<chakra.h1
|
||||
fontSize={{ base: "25px", sm: "35px", md: "6xl" }}
|
||||
letterSpacing="tight"
|
||||
lineHeight="short"
|
||||
fontWeight="extrabold"
|
||||
mb={{ base: 4, md: 8 }}
|
||||
>
|
||||
Beautiful SVG vector logos
|
||||
</chakra.h1>
|
||||
</Show>
|
||||
<Search />
|
||||
</Box>
|
||||
<chakra.h1
|
||||
fontSize={{ base: "25px", sm: "35px", md: "6xl" }}
|
||||
textAlign="center"
|
||||
letterSpacing="tight"
|
||||
lineHeight="short"
|
||||
fontWeight="extrabold"
|
||||
mb="3"
|
||||
>
|
||||
Beautiful SVG vector logos
|
||||
</chakra.h1>
|
||||
<Search />
|
||||
<Box mt={{ base: 4, md: 8 }}>
|
||||
<Items />
|
||||
</Box>
|
||||
|
||||
+13
-26
@@ -3,13 +3,11 @@ import {
|
||||
chakra,
|
||||
Box,
|
||||
Flex,
|
||||
Badge,
|
||||
SimpleGrid,
|
||||
Button,
|
||||
Image,
|
||||
Container,
|
||||
Center,
|
||||
HStack,
|
||||
} from "@chakra-ui/react";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
@@ -43,14 +41,10 @@ export default function Icon() {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{data.title} - SVGParty</title>
|
||||
<title>{data.title} - SVGL</title>
|
||||
</Head>
|
||||
<Show delay="0">
|
||||
<Container
|
||||
maxW="100%"
|
||||
borderWidth="1px"
|
||||
borderRadius="30px"
|
||||
>
|
||||
<Container maxW="100%" borderWidth="1px" borderRadius="30px">
|
||||
<SimpleGrid columns={{ base: 1, md: 1, lg: 2 }} spacing={0}>
|
||||
<Box py={{ base: "10", md: "24" }}>
|
||||
<Center>
|
||||
@@ -79,24 +73,18 @@ export default function Icon() {
|
||||
{data.title}
|
||||
</chakra.h1>
|
||||
<Flex direction={{ base: "column", md: "row" }} mt="2">
|
||||
<Hover>
|
||||
<Link href={data.href} passHref>
|
||||
<Button
|
||||
leftIcon={<IoCloudDownloadOutline />}
|
||||
colorScheme="black"
|
||||
variant="outline"
|
||||
bg="transparent"
|
||||
fontWeight="light"
|
||||
mr="2"
|
||||
>
|
||||
Download .svg
|
||||
</Button>
|
||||
</Link>
|
||||
</Hover>
|
||||
<Link href={data.href} passHref>
|
||||
<Button
|
||||
leftIcon={<IoCloudDownloadOutline />}
|
||||
variant="primary"
|
||||
fontWeight="light"
|
||||
mr="2"
|
||||
>
|
||||
Download .svg
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href={data.url} passHref>
|
||||
<Button
|
||||
colorScheme="teal"
|
||||
variant="outline"
|
||||
fontWeight="light"
|
||||
borderWidth="1px"
|
||||
rightIcon={<BiLinkExternal />}
|
||||
@@ -111,9 +99,8 @@ export default function Icon() {
|
||||
<Link href="/" passHref>
|
||||
<Button
|
||||
leftIcon={<IoArrowBackOutline />}
|
||||
colorScheme="twitter"
|
||||
variant="outline"
|
||||
fontWeight="bold"
|
||||
fontWeight="light"
|
||||
w="100%"
|
||||
border="0"
|
||||
mt="4"
|
||||
|
||||
Reference in New Issue
Block a user