Merge pull request #531 from jpbnetley/feature/reddit-title

fix: updated heading styling

src/app/components/Board.tsx

@@ -11,8 +11,6 @@ import { RedditJoke, RedditJokeResponse } from 'types/models/reddit'
 import useGetData from 'utils/promises/useGetData'
 import useIsMounted from 'utils/hooks/useIsMounted'
 
-const JOKE_FALLBACK: RedditJoke = { title: '', selftext: '', url: '' }
-
 export interface BoardProps {
   fallbackData?: RedditJokeResponse[]
 }
@@ -22,7 +20,11 @@ const Board = ({ fallbackData }: BoardProps) => {
   const [shouldRefresh, setRefresh] = useState<boolean>(false)
   const [redditJoke, setRedditJoke] = useState<RedditJoke>()
 
-  const { data: jokes, isLoading, mutate } = useGetData('jokes', getJokes, { /*suspense: true,*/ fallbackData } satisfies SWRConfiguration)
+  const { 
+    data: jokes, 
+    isLoading, 
+    mutate 
+  } = useGetData('jokes', getJokes, { /*suspense: true,*/ fallbackData } satisfies SWRConfiguration<RedditJokeResponse[]>)
 
   const handleHardRefresh = () => mutate()
 
@@ -42,7 +44,10 @@ const Board = ({ fallbackData }: BoardProps) => {
     if (jokes?.length && (!redditJoke || shouldRefresh)) setRandomJoke()
   }, [isLoading, isMounted, jokes, redditJoke, shouldRefresh])
 
-  const { title, selftext, url } = redditJoke ?? JOKE_FALLBACK
+  if (!redditJoke) return null
+
+  const { title, selftext, url } = redditJoke
+
   return (
 		<Card>
 			<Joke title={title} joke={selftext} link={url} />

src/app/components/header/styles.module.css

@@ -1,7 +1,7 @@
 .AppHeader {
   background-color: #282c34;
-  min-height: 10svh;
-  font-size: calc(10px + 2vmin);
+  min-height: 5vh;
+  font-size: clamp(2em, 400px, 3vmin);
   color: white;
   text-align: center;
 }

src/app/components/top-bar/styles.module.css

@@ -1,4 +1,14 @@
 .link {
   font-size: 2em;
   color: red;
+  transition-property: font-size, font-weight;  
+  transition-duration: 0.7s;
+  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.4);
+  transition-delay: 0s;
+}
+
+.link:hover {
+  font-size: 2.3em;
+  font-weight: bold;
+  position: absolute;
 }

src/app/globals.css

@@ -117,5 +117,5 @@ button {
 
 button:hover {
   background-color: #3b9f16;
-  box-shadow: 0.2em 0.7em rgb(59, 60, 59);
+  box-shadow: 0.2em 0.3em rgb(59, 60, 59);
 }

src/app/layout.tsx

@@ -1,9 +1,10 @@
 import { ReactNode} from 'react'
+import { Metadata } from 'next'
 
 import TopBar from 'app/components/top-bar'
 import './globals.css'
 
-export const metadata = {
+export const metadata: Metadata = {
   title: 'Joke of the day',
   description: 'Finds random jokes form reddit'
 }

src/utils/get-data/jokes.ts

@@ -1,6 +1,6 @@
 import * as jokeApi from 'utils/get-data/reddit/joke'
 
-type Props = {
+export type Props = {
 	signal?: AbortSignal
 }
 const getJokes = async (props?: Props) => {