Převod stylů do Tailwindu

app/[...path]/page.tsx

@@ -1,5 +1,5 @@
-import PostCard from "shared/post-card";
-import PressReleaseListing from "shared/press-releases";
+import PostCard from "components/PostCard";
+import PressReleaseListing from "components/PressReleaseListing";
 import { Author } from "shared/author";
 import { BlogPost, PostMetadata, stripBlogPostBody } from "shared/post";
 import {
@@ -10,6 +10,9 @@ import {
 import { markdownToHTML } from "shared/utils";
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+import { Fragment } from "react";
 
 type Params = {
   path: string[];
@@ -31,19 +34,13 @@ const Post = ({ params }: Props) => {
     authors.find((a) => a.id === post.authorId)!;
 
   return (
-    <div className="post-listing-row">
-      <div className="main-post">
+    <div className="grid lg:grid-cols-3 gap-7">
+      <div className="lg:col-span-2">
         <PostBody post={post} author={author} />
       </div>
-
-      <div className="press-release-box">
-        <PressReleaseListing />
-      </div>
-
+      <PressReleaseListing />
       {otherPosts.map((post) => (
-        <div className="post-listing-post" key={post.path}>
-          <PostCard post={post} author={authorOf(post)} />
-        </div>
+        <PostCard key={post.path} post={post} author={authorOf(post)} />
       ))}
     </div>
   );
@@ -52,38 +49,46 @@ const Post = ({ params }: Props) => {
 const PostBody = ({ post, author }: { post: BlogPost; author: Author }) => {
   const formatDate = (stamp: string) =>
     new Date(stamp).toLocaleDateString("cs-CZ", { dateStyle: "medium" });
-  return (
-    <div className="post-container" lang={post.lang}>
-      <img
-        alt=""
-        loading="lazy"
-        width="100%"
-        style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }}
-        src={post.coverImageUrl}
-      />
 
-      <div className="post-wrapper">
-        <div className="post-metadata">
-          {formatDate(post.date)}
-          {" • "}
-          <a className="post-author" href={`mailto:${author.email}`}>
-            {author.name}
-          </a>
-          {/* TODO: Language versions */}
-        </div>
+  const BackButton = () => (
+    <Link
+      className="inline-block rounded-md bg-it px-4 py-3 text-white"
+      href="/"
+    >
+      <div className="flex flex-row gap-2">
+        <Image src="/arrow-light.svg" width={24} height={24} alt="" />
+        Zpět na všechny články
+      </div>
+    </Link>
+  );
 
-        <h1 className="post-title">{post.title}</h1>
-        <p className="post-perex">{post.description}</p>
+  const PostMetadata = () => (
+    <Fragment>
+      <div className="flex flex-row gap-2 -mb-2">
+        {formatDate(post.date)}
+        <a href={`mailto:${author.email}`}>{author.name}</a>
+      </div>
+      <h1 className="typo-title">{post.title}</h1>
+      <p className="text-xl">{post.description}</p>
+    </Fragment>
+  );
 
+  return (
+    <div
+      className="border-2 border-gray rounded-xl overflow-clip"
+      lang={post.lang}
+    >
+      {/* TBD: Replace with next/image */}
+      <img src={post.coverImageUrl} alt="" loading="lazy" width="100%" />
+      <div className="flex flex-col gap-4 p-5">
+        <PostMetadata />
         <div
           className="post-content"
           dangerouslySetInnerHTML={{ __html: markdownToHTML(post.body) }}
         />
-
-        <a className="post-button" href={"/"}>
-          <img src="/arrow-light.svg" alt="" />
-          Zpět na všechny články
-        </a>
+        <div className="p-4 pl-0 pt-6 text-center">
+          <BackButton />
+        </div>
       </div>
     </div>
   );