feat: show text for the buttons in project card on mobile

src/components/ProjectCard.tsx

@@ -11,10 +11,18 @@ const ProjectTag = ({ children }:{children?: ReactNode}) => {
 };
 
 const ProjectLink = ({ children, link, newTab } : {children?: ReactNode, link: string, newTab?: true}) => {
+  const LinkContent = ({ children }:{children?: ReactNode}) => {
+    return (
+      <div className="project-card-link-content">
+        {children}
+      </div>
+    );
+  };
+
   return (
     <Link href={link} target={newTab ? "_blank" : "_self"} className="project-card-link">
-      <div className="flex justify-center">
-        {children} {newTab && <IconExternalLink className="w-4 h-4" />}
+      <div className="project-card-link-content-container">
+        <LinkContent>{children}</LinkContent> {newTab && <IconExternalLink className="w-4 h-4 hide-on-mobile" />}
       </div>
     </Link>
   );
@@ -37,26 +45,31 @@ const ProjectCard = ({ title, description, repoLink, demoLink, videoLink, design
           {videoLink &&
             <ProjectLink link={videoLink} newTab>
               <IconBrandYoutube />
+              <span className="hide-on-desktop">video</span>
             </ProjectLink>
           }
           {demoLink &&
             <ProjectLink link={demoLink} newTab>
               <IconPlayerPlay />
+              <span className="hide-on-desktop">demo</span>
             </ProjectLink>
           }
           {repoLink &&
             <ProjectLink link={repoLink} newTab>
               <IconCode />
+              <span className="hide-on-desktop">code</span>
             </ProjectLink>
           }
           {designLink &&
             <ProjectLink link={designLink} newTab>
               <IconBrush />
+              <span className="hide-on-desktop">design</span>
             </ProjectLink>
           }
           {paperLink &&
             <ProjectLink link={paperLink} newTab>
               <IconFile />
+              <span className="hide-on-desktop">paper</span>
             </ProjectLink>
           }
         </div>

src/styles/components/project-card.css

@@ -19,6 +19,14 @@
   .project-card-links .project-card-link {
     @apply py-2 px-4 min-w-[72px] bg-orange-500 bg-opacity-30 rounded-full
     hover:text-orange-600 dark:hover:text-orange-300;
+
+    .project-card-link-content-container {
+      @apply flex justify-center gap-1;
+    }
+
+    .project-card-link-content-container .project-card-link-content {
+      @apply flex gap-1;
+    }
   }
 
   .project-card-tags {

src/styles/index.css

@@ -1,4 +1,5 @@
 @import "fonts.css";
+@import "utils.css";
 
 @import "pages/pages.css";
 @import "pages/home.css";

src/styles/utils.css

@@ -0,0 +1,7 @@
+.hide-on-mobile {
+  @apply md:block hidden;
+}
+
+.hide-on-desktop {
+  @apply md:hidden;
+}