Update Heading, Tile

src/components/Heading.tsx

@@ -1,50 +1,32 @@
+import clsx from 'clsx'
 import { PropsWithChildren } from 'react'
-import { addWithSpace } from '../utils/addWithSpace'
 
-const Heading = ({
-  size = 1,
-  className = '',
-  children,
-  id = '',
-}: PropsWithChildren<TitleProps>) => {
-  const defaultClasses = 'relative w-full text-zinc-950' + addWithSpace(className)
-  const anchor = id ? <a id={id} className={'absolute -top-32'} /> : ''
+const Heading = ({ size = 1, className = '', children }: PropsWithChildren<TitleProps>) => {
+  const defaultClasses = clsx('relative w-full text-zinc-950', className)
+
   if (size === 1) {
     return (
-      <h1 className={defaultClasses + '  pb-8 text-xl font-medium leading-normal'}>
+      <h1 className={clsx(defaultClasses, 'pb-8 text-xl font-medium leading-normal')}>
         {children}
-        {anchor}
       </h1>
     )
   } else if (size === 2) {
     return (
-      <h2 className={defaultClasses + '  pb-4 text-2xl font-medium opacity-90'}>
-        {children}
-        {anchor}
-      </h2>
+      <h2 className={clsx(defaultClasses, 'pb-4 text-2xl font-medium opacity-90')}>{children}</h2>
     )
   } else if (size === 3) {
     return (
-      <h3 className={defaultClasses + ' pb-4 text-lg font-semibold opacity-90'}>
-        {children}
-        {anchor}
-      </h3>
+      <h3 className={clsx(defaultClasses, 'pb-4 text-lg font-semibold opacity-90')}>{children}</h3>
     )
   } else {
-    return (
-      <h4 className={defaultClasses + ' text-md pb-4 font-semibold'}>
-        {children}
-        {anchor}
-      </h4>
-    )
+    return <h4 className={clsx(defaultClasses + 'text-md pb-4 font-semibold')}>{children}</h4>
   }
 }
 
 export interface TitleProps {
   children: PropsWithChildren
   size: 1 | 2 | 3 | 4
   className?: string
-  id?: string
 }
 
 export default Heading

src/components/Tile.tsx

@@ -5,7 +5,7 @@ import Heading from './Heading'
 const Tile = ({ children, className, title, badge }: PropsWithChildren<TileWrapperProps>) => {
   return (
     <div className={'' + addWithSpace(className)}>
-      <div className="flex justify-between">
+      <div className="flex gap-4">
         <Heading size={4}>{title}</Heading>
         {badge && badge}
       </div>

src/components/__snapshots__/Tile.test.tsx.snap

@@ -5,10 +5,10 @@ exports[`Tile 1`] = `
   className=""
 >
   <div
-    className="flex justify-between"
+    className="flex gap-4"
   >
     <h4
-      className="relative w-full text-zinc-950 text-md pb-4 font-semibold"
+      className="relative w-full text-zinc-950text-md pb-4 font-semibold"
     >
       Test Title
     </h4>
@@ -22,10 +22,10 @@ exports[`Tile with class name 1`] = `
   className=" test-class"
 >
   <div
-    className="flex justify-between"
+    className="flex gap-4"
   >
     <h4
-      className="relative w-full text-zinc-950 text-md pb-4 font-semibold"
+      className="relative w-full text-zinc-950text-md pb-4 font-semibold"
     >
       Test Title
     </h4>