From 8100618e5d6324e92e1b55217e9808dca86cae28 Mon Sep 17 00:00:00 2001
From: Lunatic Fox <joseliojrx25@gmail.com>
Date: Thu, 25 Apr 2024 12:24:06 -0300
Subject: [PATCH] Patch 13

---
 package-lock.json                             |  6 ++
 package.json                                  |  1 +
 .../pages/waysofuse/devapixreact/page.tsx     | 56 ++++++++++++++++---
 src/app/page.tsx                              |  4 +-
 4 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 74ae443..8576d77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "devapix",
       "version": "0.1.0",
       "dependencies": {
+        "@devapix/react": "^0.0.3",
         "highlight.js": "^11.9.0",
         "kolorz": "^0.0.1",
         "next": "14.1.0",
@@ -45,6 +46,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@devapix/react": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@devapix/react/-/react-0.0.3.tgz",
+      "integrity": "sha512-43tajfAiESF+CszTHErVeqHsfZ6u/psmXtY5agWeVi4GK9KEe7xiKbk2nlAW1zoJrdisYl3HYS7qrSTmCMqb8Q=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
diff --git a/package.json b/package.json
index 04537ab..c59adcd 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@devapix/react": "^0.0.3",
     "highlight.js": "^11.9.0",
     "kolorz": "^0.0.1",
     "next": "14.1.0",
diff --git a/src/app/docs/pages/waysofuse/devapixreact/page.tsx b/src/app/docs/pages/waysofuse/devapixreact/page.tsx
index 085f983..a49eeef 100644
--- a/src/app/docs/pages/waysofuse/devapixreact/page.tsx
+++ b/src/app/docs/pages/waysofuse/devapixreact/page.tsx
@@ -1,8 +1,13 @@
 import Code from '@/app/components/Code'
 import Docs from '@/app/docs/components/Docs'
 import ReqResExample from '@/app/docs/components/ReqResExample'
-import Image from 'next/image'
 import responseStyle from '@/app/docs/components/ReqResExample/index.module.css'
+import {
+  DeviconJavascript,
+  DeviconTypescript,
+  DeviconPython,
+  DeviconVscode
+} from '@devapix/react'
 
 export default function Page() {
   return (
@@ -56,7 +61,17 @@ export default function Page() {
       </p>
       <Code
         h='ts'
-        c={`import { DeviconPhotoshop } from '@devapix/react'`} />
+        c={`
+          import { DeviconPhotoshop } from '@devapix/react'
+
+          export default function Page() {
+            return (
+              <section>
+                <DeviconPhotoshop/>
+              </section>
+            )
+          }
+        `} />
       <p>
         This is equivalent to the latest release of <Code ic='photoshop' /> icon.
       </p>
@@ -68,7 +83,17 @@ export default function Page() {
       </p>
       <Code
         h='ts'
-        c={`import { DeviconPhotoshop } from '@devapix/react/2.15.1'`} />
+        c={`
+          import { DeviconPhotoshop } from '@devapix/react/2.15.1'
+          
+          export default function Page() {
+            return (
+              <section>
+                <DeviconPhotoshop/>
+              </section>
+            )
+          }
+        `} />
       <p>
         Is equivalent to <Code ic='photoshop' /> icon of <Code ic='2.15.1' /> release.
       </p>
@@ -94,7 +119,7 @@ export default function Page() {
           | 'lw' | 'line-wordmark'
         color: string
         theme: 'd' | 'dark' | 'l' | 'light'
-        size: number
+        size: number // default: 128
       `} />
       <p>
         Here we have more examples using the rest of properties.
@@ -123,11 +148,24 @@ export default function Page() {
         }
         `} />
 
-      <section className={responseStyle.reqResImgWrapper} style={{display: 'flex', alignItems: 'center'}}>
-        <Image src='https://devapix.vercel.app/api?js&t=l&s=80' width={80} height={80} alt='i' />
-        <Image src='https://devapix.vercel.app/api?ts&t=d' width={64} height={64} alt='i' />
-        <Image src='https://devapix.vercel.app/api?python&c=008004' width={64} height={64} alt='i' />
-        <Image src='https://devapix.vercel.app/api?vscode&v=ow&c=ff5300&s=80' width={80} height={80} alt='i' />
+      <h5>Requests</h5>
+      <Code c={`
+        https://devapix.vercel.app/api?javascript&t=l&s=80
+        https://devapix.vercel.app/api?typescript&t=d
+        https://devapix.vercel.app/api?python&c=008004
+        https://devapix.vercel.app/api?vscode&v=ow&c=ff5300&s=80
+      `}/>
+
+      <h5>Response</h5>
+      <section className={responseStyle.reqResImgWrapper} style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center'
+      }}>
+        <DeviconJavascript theme='light' size={80}/>
+        <DeviconTypescript theme='dark'/>
+        <DeviconPython color='#008004'/>
+        <DeviconVscode version='ow' color='#ff5300' size={80}/>
       </section>
       <hr />
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 84b4053..bdfe339 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -51,7 +51,7 @@ export default function Home() {
           </section>
         </Link>
 
-        <Link href='#'>
+        {/* <Link href='#'>
           <section className={styles.card}>
           <section className={styles.underConstruction}>
           <Image
@@ -74,7 +74,7 @@ export default function Home() {
               </p>
             </article>
           </section>
-        </Link>
+        </Link> */}
 
       </section>
     </main>