Finish designing homepage cards

haydenbleasel · Jun 11, 2024 · c9f69ee · c9f69ee
1 parent 077623c
commit c9f69ee
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 30 deletions.
diff --git a/app/(pages)/(home)/cards/announcement.tsx b/app/(pages)/(home)/cards/announcement.tsx
@@ -25,7 +25,7 @@ export const AnnouncementCard = async (): Promise<ReactElement> => {
       <Link
         href={announcement.link}
         className={cn(
-          'rounded-full text-sm py-2.5 px-4 font-medium',
+          'rounded-full text-sm py-2.5 px-4 font-medium no-underline',
           'bg-neutral-100 text-neutral-950 placeholder:text-neutral-500 outline-orange-500',
           'dark:bg-neutral-900 dark:text-white dark:placeholder-text-neutral-600'
         )}

diff --git a/app/(pages)/(home)/cards/spotify/index.tsx → app/(pages)/(home)/cards/spotify.tsx b/app/(pages)/(home)/cards/spotify/index.tsx → app/(pages)/(home)/cards/spotify.tsx
@@ -2,8 +2,6 @@ import { get } from '@vercel/edge-config';
 import Image from 'next/image';
 import { Link } from '@/components/link';
 import { Card } from '@/components/card';
-import Spotify from './spotify.svg';
-import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import type { ReactElement } from 'react';
 import type { SpotifyProperties } from '@/app/api/cron/spotify/route';
 
@@ -19,13 +17,6 @@ const SpotifyCard = async (): Promise<ReactElement> => {
       title="Now Listening"
       className="p-4 flex flex-col justify-between gap-4"
     >
-      <Image
-        src={Spotify as StaticImport}
-        alt=""
-        width={24}
-        height={24}
-        className="absolute top-4 right-4 w-6 h-6 z-10"
-      />
       <Image
         src={song.image}
         alt=""

diff --git a/app/(pages)/(home)/cards/spotify/spotify.svg b/app/(pages)/(home)/cards/spotify/spotify.svg
diff --git a/app/(pages)/(home)/cards/steam/index.tsx → app/(pages)/(home)/cards/steam.tsx b/app/(pages)/(home)/cards/steam/index.tsx → app/(pages)/(home)/cards/steam.tsx
@@ -2,9 +2,7 @@ import Image from 'next/image';
 import { get } from '@vercel/edge-config';
 import { Link } from '@/components/link';
 import { Card } from '@/components/card';
-import Steam from './steam.svg';
 import type { GameProperties } from '@/app/api/cron/steam/route';
-import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import type { ReactElement } from 'react';
 
 const SteamCard = async (): Promise<ReactElement> => {
@@ -17,20 +15,13 @@ const SteamCard = async (): Promise<ReactElement> => {
   return (
     <div className="col-span-2">
       <Card title="Recently Played" className="p-4 flex justify-between gap-4">
-        <Image
-          src={Steam as StaticImport}
-          alt=""
-          width={24}
-          height={24}
-          className="absolute z-10 bottom-4 right-4 w-6 h-6"
-        />
-        <div className="flex flex-col justify-between gap-4">
-          <p className="font-semibold text-neutral-950 dark:text-white line-clamp-2">
+        <div className="text-sm flex flex-col justify-between gap-4">
+          <p>
             <Link href={`https://store.steampowered.com/app/${game.id}`}>
               {game.name}
             </Link>
           </p>
-          <div className="text-neutral-500 dark:text-neutral-400 text-sm">
+          <div>
             <p className="truncate">
               🕦 {Math.round(game.playtime / 60)} hours
             </p>

diff --git a/app/(pages)/(home)/cards/steam/steam.svg b/app/(pages)/(home)/cards/steam/steam.svg
diff --git a/app/(pages)/(home)/page.tsx b/app/(pages)/(home)/page.tsx
@@ -17,7 +17,7 @@ const Home: FC = () => (
   <>
     <Hero />
     <Newsletter />
-    <div className="grid grid-cols-3 gap-3 not-prose">
+    <div className="grid grid-cols-3 gap-3 prose-p:m-0 prose-img:m-0">
       <GitHubCard />
       <AnnouncementCard />
       <SpotifyCard />

diff --git a/components/card.tsx b/components/card.tsx
@@ -17,7 +17,7 @@ export const Card: FC<CardProperties> = ({ title, children, className }) => (
   >
     <p
       className={cn(
-        'shrink-0 block text-sm font-medium py-2 px-4',
+        'm-0 shrink-0 block text-sm font-medium py-2 px-4',
         'text-neutral-900',
         'dark:text-neutral-100'
       )}
@@ -26,7 +26,7 @@ export const Card: FC<CardProperties> = ({ title, children, className }) => (
     </p>
     <div
       className={cn(
-        'border flex-1 rounded-xl overflow-hidden shadow-sm',
+        'relative border flex-1 rounded-xl overflow-hidden shadow-sm',
         'bg-white border-neutral-200',
         'dark:bg-neutral-950 dark:border-neutral-800',
         className