devicons-react 1.0.5 → 1.0.9

package/docs/components/Footer/Footer.js

@@ -0,0 +1,24 @@
+import { Fragment } from 'react'
+import { FooterContainer, FooterLink } from './Style'
+
+const Footer = () => {
+  return (
+    <Fragment>
+      <FooterContainer>
+        <p>
+          All Copyrights Reserved © 2021, Made With ❤{' '}
+          <FooterLink href="https://mkabumattar.github.io/">
+            MKAbuMattar
+          </FooterLink>{' '}
+          (under{' '}
+          <FooterLink href="https://github.com/MKAbuMattar/devicons-react/blob/main/LICENSE">
+            MIT License
+          </FooterLink>
+          )
+        </p>
+      </FooterContainer>
+    </Fragment>
+  )
+}
+
+export default Footer

package/docs/components/Footer/Style.js

@@ -0,0 +1,19 @@
+import styled from 'styled-components'
+
+export const FooterContainer = styled.footer`
+  background-color: #fff;
+  text-align: center;
+  padding: 1em 0 2em 0;
+  font-size: 0.8em;
+`
+
+export const FooterLink = styled.a`
+  text-decoration: none;
+  color: inherit;
+  padding: 0.1em;
+
+  &&:hover {
+    color: #000;
+    border-bottom: 2px solid #000;
+  }
+`

package/docs/components/Header/Header.js

@@ -0,0 +1,101 @@
+import { Fragment, useEffect } from 'react'
+import Link from 'next/link'
+
+import hljs from 'highlight.js'
+import javascript from 'highlight.js/lib/languages/javascript'
+hljs.registerLanguage('javascript', javascript)
+
+import {
+  HeaderContainer,
+  HeaderBox,
+  HeaderTitleBox,
+  HeaderTitle,
+  HeaderInfo,
+  HeaderLink,
+  HeaderCard,
+  HeaderCardInfo,
+  HeaderCardTitle,
+  HeaderArrowWaveBox,
+  HeaderArrowWave,
+} from './Style'
+
+import { DeviconsReactOriginal } from 'devicons-react'
+
+const Header = () => {
+  useEffect(() => {
+    hljs.initHighlighting()
+  }, [])
+
+  return (
+    <Fragment>
+      <HeaderContainer>
+        <HeaderBox>
+          <HeaderTitleBox>
+            <DeviconsReactOriginal size="60" />
+            <HeaderTitle>
+              Devicons <span>React</span>
+            </HeaderTitle>
+          </HeaderTitleBox>
+          <HeaderInfo>
+            Devicons React is a collection of icons that symbolize programming
+            languages, design tools, and development software.
+          </HeaderInfo>
+
+          <HeaderArrowWaveBox>
+            <Link href="#search">
+              <a>
+                <HeaderArrowWave>
+                  <span />
+                  <span />
+                  <span />
+                </HeaderArrowWave>
+              </a>
+            </Link>
+          </HeaderArrowWaveBox>
+
+          <HeaderCard>
+            <HeaderCardInfo>
+              <HeaderCardTitle>Install package</HeaderCardTitle>
+            </HeaderCardInfo>
+            <pre>
+              <code className="bash language-bash hljs">
+                {`#npm
+npm install --save devicons-react
+
+#yarn
+yarn add devicons-react`}
+              </code>
+            </pre>
+          </HeaderCard>
+
+          <HeaderCard>
+            <HeaderCardInfo>
+              <HeaderCardTitle>Demo</HeaderCardTitle>
+            </HeaderCardInfo>
+            <pre>
+              <code className="js hljs language-javascript">
+                {`import { Fragment } from 'react'
+import { Aarch64Plain, ReactOriginal } from 'devicons-react'
+import DeviconsReactOriginal from 'devicons-react/dist/icon/deviconsreact-original'
+
+const App = () => {
+  return (
+    <Fragment>
+      <Aarch64Plain />
+      <ReactOriginal color="red" size="500" />
+      <DeviconsReactOriginal />
+    </Fragment>
+  )
+}
+
+export default App`}
+              </code>
+            </pre>
+          </HeaderCard>
+        </HeaderBox>
+      </HeaderContainer>
+    </Fragment>
+  )
+}
+
+export default Header

package/docs/components/Header/Style.js

@@ -0,0 +1,138 @@
+import styled from 'styled-components'
+
+export const HeaderContainer = styled.header`
+  background-color: #2d2d2d;
+`
+
+export const HeaderBox = styled.div`
+  max-width: 550px;
+  padding: 6em 2em;
+  margin: 0 auto;
+`
+
+export const HeaderTitleBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`
+
+export const HeaderTitle = styled.h1`
+  margin: 0;
+  font-size: 3em;
+  text-align: center;
+  color: #eeeeee;
+
+  && span {
+    font-size: 0.6em;
+    opacity: 0.5;
+  }
+
+  @media only screen and (max-width: 512px) {
+    font-size: 1.7em;
+  }
+`
+
+export const HeaderInfo = styled.p`
+  padding: 2em 0 0 0;
+  margin: 0 auto;
+  color: #eeeeee;
+`
+
+export const HeaderLink = styled.a`
+  text-decoration: none;
+  color: inherit;
+  padding: 0.1em;
+  cursor: pointer;
+
+  &&:hover {
+    border-bottom: 2px solid #eeeeee;
+  }
+`
+
+export const HeaderCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 5em;
+  max-width: 820px;
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
+`
+
+export const HeaderCardInfo = styled.div`
+  padding: 2.5em 3em;
+`
+
+export const HeaderCardTitle = styled.h4`
+  margin: 0;
+  font-size: 1.5em;
+
+  &&:after {
+    content: '';
+    display: block;
+    width: 100px;
+    padding-top: 12px;
+    border-bottom: 3px solid #2e2e2e;
+  }
+`
+
+export const HeaderArrowWaveBox = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2rem;
+`
+
+export const HeaderArrowWave = styled.div`
+  display: inline-block;
+  cursor: pointer;
+  font-size: 0;
+
+  && span {
+    display: block;
+    position: relative;
+    height: 10px;
+    width: 16px;
+    opacity: 0.2;
+
+    ::before,
+    ::after {
+      display: block;
+      content: '';
+      position: absolute;
+      height: 2px;
+      width: 12px;
+      background-color: #d52128;
+    }
+
+    ::before {
+      top: -2px;
+      left: 0;
+      transform-origin: left center;
+      transform: rotate(45deg);
+    }
+
+    ::after {
+      top: -2px;
+      right: 0;
+      transform-origin: right center;
+      transform: rotate(-45deg);
+    }
+
+    :nth-child(1n) {
+      animation: animate-arrow-wave 2s infinite;
+      animation-delay: 0.25s;
+    }
+
+    :nth-child(2n) {
+      animation: animate-arrow-wave 2s infinite;
+      animation-delay: 0.5s;
+    }
+
+    :nth-child(3n) {
+      animation: animate-arrow-wave 2s infinite;
+      animation-delay: 0.75s;
+    }
+  }
+`

package/docs/next-seo.config.js

@@ -0,0 +1,16 @@
+export default {
+  title: 'Devicons React',
+  description:
+    'Devicons React is a collection of icons that symbolize programming languages, design tools, and development software.',
+  openGraph: {
+    type: 'website',
+    locale: 'en_IE',
+    url: 'https://devicons-react.netlify.app/',
+    site_name: 'Devicons React',
+  },
+  twitter: {
+    handle: '@mkabumattar',
+    site: '@mkabumattar',
+    cardType: 'summary_large_image',
+  },
+}

package/docs/next.config.js

@@ -0,0 +1,11 @@
+const withPWA = require('next-pwa')
+const runtimeCaching = require('next-pwa/cache')
+
+module.exports = withPWA({
+  pwa: {
+    dest: 'public',
+    register: true,
+    skipWaiting: true,
+    runtimeCaching,
+  },
+})