Add Badges

src/components/Badge.tsx

@@ -0,0 +1,10 @@
+const Badge = ({ value }: { value: string }) => {
+  return (
+    <div className="group flex text-base">
+      <div className="uppercase">{value}</div>
+      <span className="px-2 group-last-of-type:hidden">+</span>
+    </div>
+  )
+}
+
+export default Badge

src/components/WorkTile.tsx

@@ -68,6 +68,7 @@ type WorkTileWrapperProps = {
   title?: string
   text?: string
   more?: ReactNode
+  badges?: string[]
 } & HTMLAttributes<HTMLDivElement>
 
 export default WorkTile

src/content/kolbord/index.tsx

@@ -35,6 +35,7 @@ const WorkKolbord = () => {
       links={<Links />}
       text="A prototype of an opinionated, free to use, and open source app for reservation of anything. It is meant to provide an alternative to corporate-oriented, heavy, and expensive booking apps."
       more={<More />}
+      badges={['Figma', 'React', 'Payload CMS']}
       top={
         <div className="bg-[#E2BEC0] p-4 sm:p-8">
           <div className="relative mx-auto max-w-screen-lg overflow-hidden before:absolute before:bottom-0 before:right-0 before:top-0 before:z-10 before:w-2 before:bg-[#E2BEC0]">

src/content/mhd/index.tsx

@@ -40,6 +40,7 @@ const WorkMHD = () => {
       more={<More />}
       text="A complete redesign of the ticket-buying experience for Bratislava public transport, from an completely new UX to a simpler, more intuitive ticket machine interface."
       top={<CustomImg src={mhdHome} />}
+      badges={['Figma']}
     >
       <CustomImg src={mhdTrio} />
       <GridWrapper>

src/pages/Home.tsx

@@ -3,6 +3,7 @@ import Intro from '@/content/Intro'
 import kolbordPreview from '@/content/kolbord/images/kolbord-home.jpg'
 import martinPreview from '@/content/martin/images/martin-home.jpg'
 import mhdPreview from '@/content/mhd/images/mhd-home.jpg'
+import thankPreview from '@/content/thankful/images/thank-home.jpg'
 import vkjbPreview from '@/content/vkjb/images/vkjb-home.jpg'
 
 const Home = () => {
@@ -16,6 +17,7 @@ const Home = () => {
           src={mhdPreview}
         />
         <WorkPreviewTile title="Kolbord" link="/work/kolbord" src={kolbordPreview} />
+        <WorkPreviewTile title="Thankful" link="/work/thankful" src={thankPreview} />
         <WorkPreviewTile title="Public library in Košice" link="/work/library" src={vkjbPreview} />
         <WorkPreviewTile title="Hospital in Martin" link="/work/martin" src={martinPreview} />
       </div>