hydration errors?
All checks were successful
Vercel Production Deployment / Deploy-Production (push) Successful in 1m17s

This commit is contained in:
hook-lord 2024-12-09 10:05:17 +01:00
parent 0fef6de78a
commit 043c944b1c
4 changed files with 23 additions and 9 deletions

View File

@ -36,7 +36,7 @@ export default async function ITJobbank() {
const jobs = await fetchJobs(); const jobs = await fetchJobs();
return ( return (
<> <>
<h1 className="text-4xl my-4">IT Jobbank</h1> <h2 className="text-4xl my-4">IT Jobbank</h2>
<p className="text-xl"> <p className="text-xl">
It jobbank do not optimize their images for the web, and like to use It jobbank do not optimize their images for the web, and like to use
images and videos in their job postings. This is heavily impacting the images and videos in their job postings. This is heavily impacting the

View File

@ -73,7 +73,7 @@ export default async function JobCard(props: { job: JobPosting }) {
</div> </div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent> <AccordionContent>
<div className="flex flex-col gap-2"> <div suppressHydrationWarning className="flex flex-col gap-2">
{title.length > 50 && title} {title.length > 50 && title}
<div className={`py-4 ${styles.parsedDescription}`}> <div className={`py-4 ${styles.parsedDescription}`}>
{parsedDescription} {parsedDescription}

View File

@ -0,0 +1,18 @@
'use client';
import parse from 'html-react-parser';
interface ParsedDescriptionProps {
description: string;
className?: string;
}
export default function ParsedDescription({ description, className }: ParsedDescriptionProps) {
const parsedDescription = parse(description);
return (
<div className={`py-4 ${className}`}>
{parsedDescription}
</div>
);
}

View File

@ -5,6 +5,7 @@ import { cn } from "@/lib/utils";
import { Analytics } from "@vercel/analytics/react"; import { Analytics } from "@vercel/analytics/react";
import giteaIcon from "/public/icons/gitea.svg"; import giteaIcon from "/public/icons/gitea.svg";
import Image from "next/image"; import Image from "next/image";
import { Suspense } from "react";
const fontSans = FontSans({ const fontSans = FontSans({
subsets: ["latin"], subsets: ["latin"],
@ -23,13 +24,8 @@ export default function RootLayout({
}>) { }>) {
return ( return (
<html lang="en"> <html lang="en">
<body <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
className={cn( <Suspense fallback={<p>Loading...</p>}>{children}</Suspense>
"min-h-screen bg-background font-sans antialiased",
fontSans.variable
)}
>
{children}
<Analytics /> <Analytics />
<footer className="flex justify-center text-sm text-stone-500 py-4"> <footer className="flex justify-center text-sm text-stone-500 py-4">
<a href="https://gitea.rannes.dev/christian"> <a href="https://gitea.rannes.dev/christian">