feat: add new styling to logo in stacks

moonbamijam · Feb 6, 2024 · 1dd36fb · 1dd36fb
1 parent be41a53
commit 1dd36fb
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -93,7 +93,7 @@ const Home = async () => {
               <StackIcon href={"https://web.dev/learn/css"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg"} alt={"css3 logo"} />
               <StackIcon href={"https://html.com/"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg"} alt={"html5 logo"} />
               <StackIcon href={"https://www.figma.com/"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg"} alt={"figma logo"} />
-              <StackIcon href={"https://www.adobe.com/ph_en/products/photoshop/landpa.html?gclid=Cj0KCQiAwbitBhDIARIsABfFYIIgrHeJQ4zSBpfJ5gX1rvBrFTQia5yFavi8cw0dkBzfcODhax_wzjoaAijwEALw_wcB&sdid=GVTYXXRQ&mv=search&mv2=paidsearch&ef_id=Cj0KCQiAwbitBhDIARIsABfFYIIgrHeJQ4zSBpfJ5gX1rvBrFTQia5yFavi8cw0dkBzfcODhax_wzjoaAijwEALw_wcB:G:s&s_kwcid=AL!3085!3!444512451750!e!!g!!photoshop!703953000!39399096689&gad_source=1"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/photoshop/photoshop-plain.svg"} alt={"photoshop logo"} />
+              <StackIcon href={"https://www.adobe.com/ph_en/products/photoshop/landpa.html?gclid=Cj0KCQiAwbitBhDIARIsABfFYIIgrHeJQ4zSBpfJ5gX1rvBrFTQia5yFavi8cw0dkBzfcODhax_wzjoaAijwEALw_wcB&sdid=GVTYXXRQ&mv=search&mv2=paidsearch&ef_id=Cj0KCQiAwbitBhDIARIsABfFYIIgrHeJQ4zSBpfJ5gX1rvBrFTQia5yFavi8cw0dkBzfcODhax_wzjoaAijwEALw_wcB:G:s&s_kwcid=AL!3085!3!444512451750!e!!g!!photoshop!703953000!39399096689&gad_source=1"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/photoshop/photoshop-plain.svg"} alt={"photoshop logo"} className={"bg-[#4FCCFE] rounded-full"} />
               <StackIcon href={"https://git-scm.com/"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/git/git-original.svg"} alt={"git logo"} />
               <StackIcon href={"https://www.mongodb.com/"} src={"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg"} alt={"mongodb logo"} />          
             </div>

diff --git a/components/StackIcon.tsx b/components/StackIcon.tsx
@@ -2,18 +2,21 @@ import { StaticImport } from 'next/dist/shared/lib/get-img-props'
 import { Url } from 'next/dist/shared/lib/router/router'
 import Image from 'next/image'
 import Link from 'next/link'
+import { ReactNode } from 'react';
 
 type Props = {
   href: Url
   src: string | StaticImport
   alt: string 
   className?: string
+  icon?: ReactNode
 }
 
 const StackIcon = (props: Props) => {
   return (
-    <Link href={ props.href } target='_blank'>
-      <Image src={ props.src } alt={ props.alt } width={'50'} height={'50'} className={`${ props.className } w-[50px] md:w-[60px] lg:w-[70px] `} />
+    <Link href={ props.href } target='_blank' className="relative flex items-center justify-center">
+      <div className={`${ props.className } absolute w-[40px] h-[40px] md:w-[50px] md:h-[50px] lg:w-[60px] lg:h-[60px] `}></div>
+      <Image src={ props.src } alt={ props.alt } width={'50'} height={'50'} className="relative w-[50px] md:w-[60px] lg:w-[70px]" />
     </Link>
   )
 }