Update Links, Tiles

adamplesnik · Sep 30, 2024 · 5db852a · 5db852a
1 parent e32e55e
commit 5db852a
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 40 deletions.
diff --git a/src/components/Link.tsx b/src/components/Link.tsx
@@ -29,7 +29,11 @@ const Link = ({
       ) : (
         ''
       )}
-      <a href={href} target={target} className="hover:text-pink-700 print:text-gray-700">
+      <a
+        href={href}
+        target={target}
+        className="text-cyan-700 hover:text-zinc-700 print:text-gray-700"
+      >
         {children}
       </a>
     </div>

diff --git a/src/components/Tile.tsx b/src/components/Tile.tsx
@@ -2,14 +2,21 @@ import { HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
 import { addWithSpace } from '../utils/addWithSpace'
 import Heading from './Heading'
 
-const Tile = ({ children, className, title, badge }: PropsWithChildren<TileWrapperProps>) => {
+const Tile = ({
+  children,
+  className,
+  title,
+  badge,
+  links,
+}: PropsWithChildren<TileWrapperProps>) => {
   return (
     <div className={'' + addWithSpace(className)}>
       <div className="flex gap-1">
         <Heading size={4}>{title}</Heading>
         {badge && badge}
       </div>
       {children}
+      {links && <div className="flex flex-col gap-2 pt-2">{links}</div>}
     </div>
   )
 }
@@ -19,6 +26,7 @@ export type TileWrapperProps = {
   title: string
   className?: string | '' | undefined
   badge?: ReactNode
+  links?: ReactNode
 } & HTMLAttributes<HTMLDivElement>
 
 export default Tile
diff --git a/src/components/__snapshots__/Link.test.tsx.snap b/src/components/__snapshots__/Link.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Link with href 1`] = `
   onMouseLeave={[Function]}
 >
   <a
-    className="hover:text-pink-700 print:text-gray-700"
+    className="text-cyan-700 hover:text-zinc-700 print:text-gray-700"
     href="url/"
     target="_blank"
   >
@@ -23,7 +23,7 @@ exports[`Link with href and custom target 1`] = `
   onMouseLeave={[Function]}
 >
   <a
-    className="hover:text-pink-700 print:text-gray-700"
+    className="text-cyan-700 hover:text-zinc-700 print:text-gray-700"
     href="url/"
     target="_self"
   >
@@ -103,7 +103,7 @@ exports[`Link with href, custom target and icon 1`] = `
     </svg>
   </div>
   <a
-    className="hover:text-pink-700 print:text-gray-700"
+    className="text-cyan-700 hover:text-zinc-700 print:text-gray-700"
     href="url/"
     target="_self"
   >

diff --git a/src/content/KolbordTile.tsx b/src/content/KolbordTile.tsx
@@ -1,25 +1,33 @@
-import Link from '../components/Link'
+import Link from '@/components/Link'
 import Paragraph from '../components/Paragraph'
 import Tile from '../components/Tile'
 
+const Badge = () => {
+  return (
+    <span className="flex h-fit -rotate-6 rounded border border-white bg-zinc-800 p-1 text-xs text-white">
+      Beta
+    </span>
+  )
+}
+
+const Links = () => {
+  return (
+    <>
+      <Link href="https://github.com/adamplesnik/kolbord">@adamplesnik/kolbord</Link>
+      <Link href="https://github.com/adamplesnik/kolbord-payload">
+        @adamplesnik/kolbord-payload
+      </Link>
+    </>
+  )
+}
+
 const KolbordTile = () => {
   return (
-    <Tile
-      title="Kolbord: the smoothest space booking"
-      badge={
-        <span className="flex h-fit -rotate-6 rounded border border-white bg-zinc-800 p-1 text-xs text-white">
-          Beta
-        </span>
-      }
-    >
+    <Tile title="Kolbord: the smoothest space booking" badge={<Badge />} links={<Links />}>
       <Paragraph>
         Opinionated, free to use, and open source app for one-click reservation of anything.
       </Paragraph>
       <Paragraph>Built in React, Payload CMS with user management in Clerk.</Paragraph>
-      <Link href="https://github.com/adamplesnik/kolbord">@adamplesnik/kolbord</Link>
-      <Link href="https://github.com/adamplesnik/kolbord-payload">
-        @adamplesnik/kolbord-payload
-      </Link>
     </Tile>
   )
 }

diff --git a/src/content/PluginTile.tsx b/src/content/PluginTile.tsx
@@ -1,25 +1,25 @@
-import { Github, NotepadText } from 'lucide-react'
 import Link from '../components/Link'
 import Paragraph from '../components/Paragraph'
 import Tile from '../components/Tile'
 
+const Links = () => {
+  return (
+    <>
+      <Link href="https://scrolldriven.dev">scrolldriven.dev</Link>
+      <Link href="https://github.com/adamplesnik/tailwindcss-scroll-driven-animations">
+        @adamplesnik/tailwindcss-scroll-driven-animations
+      </Link>
+    </>
+  )
+}
+
 const PluginTile = () => {
   return (
-    <Tile title="Scroll-driven animations plugin for Tailwind CSS">
+    <Tile title="Scroll-driven animations plugin for Tailwind CSS" links={<Links />}>
       <Paragraph>
         A plugin for Tailwind CSS v3.4+ that provides utilities for scroll-driven animations.
       </Paragraph>
-      <div className="flex flex-col gap-2 pt-2">
-        <Link Icon={NotepadText} href="https://scrolldriven.dev">
-          scrolldriven.dev
-        </Link>
-        <Link
-          Icon={Github}
-          href="https://github.com/adamplesnik/tailwindcss-scroll-driven-animations"
-        >
-          @adamplesnik/tailwindcss-scroll-driven-animations
-        </Link>
-      </div>
+      <div className="flex flex-col gap-2 pt-2"></div>
     </Tile>
   )
 }

diff --git a/src/content/WebUmeniaTile.tsx b/src/content/WebUmeniaTile.tsx
@@ -1,22 +1,23 @@
-import { Github } from 'lucide-react'
-import Link from '../components/Link'
+import Link from '@/components/Link'
 import Paragraph from '../components/Paragraph'
 import Tile from '../components/Tile'
 
+const Links = () => {
+  return (
+    <Link href="https://github.com/adamplesnik/webumenia.sk/tree/feature/css-refactoring">
+      @adamplesnik/webumenia.sk
+    </Link>
+  )
+}
+
 const WebUmeniaTile = () => {
   return (
-    <Tile title="CSS refactoring for webumenia.sk">
+    <Tile title="CSS refactoring for webumenia.sk" links={<Links />}>
       <Paragraph>
         Web umenia features almost 180k artworks from the collections of Slovak galleries. I forked
         their dev branch and started the process of removing old code, reorganizing dependencies and
         eventually creating the dark mode.
       </Paragraph>
-      <Link
-        href="https://github.com/adamplesnik/webumenia.sk/tree/feature/css-refactoring"
-        Icon={Github}
-      >
-        @adamplesnik/webumenia.sk
-      </Link>
     </Tile>
   )
 }