#1 Extract elements to own components

src/components/Discussion.tsx

@@ -1,5 +1,5 @@
 import { IEntry, UserRole } from "../types";
-import { Entry } from "./Entry";
+import { Entry } from "./entry/Entry";
 
 const mockEntries: IEntry[] = [
   {
@@ -30,10 +30,11 @@ export const Discussion = () => {
             <span>1.</span> Gliederungspunkt
           </div>
           <div className="space-y-8">
-            {mockEntries.map((entry) => (
+            {mockEntries.map((entry, index) => (
               <Entry
                 key={entry.id}
                 entry={entry}
+                isBookmarked={index % 2 === 0}
                 viewedBy={UserRole.Plaintiff}
               />
             ))}

src/components/entry/Action.tsx

@@ -0,0 +1,32 @@
+import cx from "classnames";
+
+interface ActionProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClick?: (e: React.MouseEvent) => void;
+  isPlaintiff: boolean;
+  children: React.ReactNode;
+}
+
+export const Action: React.FC<ActionProps> = ({
+  onClick,
+  isPlaintiff,
+  children,
+  className,
+  ...restProps
+}) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cx(
+        "rounded-md p-1 cursor-pointer",
+        {
+          "hover:bg-darkPurple hover:text-lightPurple": isPlaintiff,
+          "hover:bg-darkPetrol hover:text-lightPetrol": !isPlaintiff,
+        },
+        className
+      )}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};

src/components/entry/Entry.tsx

@@ -0,0 +1,61 @@
+import cx from "classnames";
+import { ArrowBendLeftUp } from "phosphor-react";
+import React, { useState } from "react";
+import { IEntry, UserRole } from "../../types";
+import { Button } from "../Button";
+import { EntryBody } from "./EntryBody";
+import { EntryHeader } from "./EntryHeader";
+
+interface EntryProps {
+  entry: IEntry;
+  isBookmarked?: boolean;
+  viewedBy: UserRole;
+}
+
+export const Entry: React.FC<EntryProps> = ({
+  entry,
+  isBookmarked = false,
+  viewedBy,
+}) => {
+  const [isExpanded, setIsExpanded] = useState<boolean>(true);
+
+  const isJudge = viewedBy === UserRole.Judge;
+  const isPlaintiff = entry.role === UserRole.Plaintiff;
+  const isOwnEntry =
+    (viewedBy === UserRole.Plaintiff && entry.role === "Kläger") ||
+    (viewedBy === UserRole.Defendant && entry.role === "Beklagter");
+
+  const toggleBody = (e: React.MouseEvent) => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <div className={`flex flex-col ${isPlaintiff ? "" : "items-end"}`}>
+      <div className="w-1/2">
+        <div>
+          <EntryHeader
+            entry={entry}
+            isExpanded={isExpanded}
+            toggleBody={toggleBody}
+            isBookmarked={isBookmarked}
+          />
+          {isExpanded && (
+            <EntryBody isPlaintiff={isPlaintiff}>{entry.text}</EntryBody>
+          )}
+        </div>
+        {isJudge || !isOwnEntry ? (
+          <Button
+            icon={<ArrowBendLeftUp weight="bold" size={18} />}
+            size="sm"
+            bgColor="transparent"
+            textColor={`font-bold ${
+              isPlaintiff ? "text-darkPurple" : "text-darkPetrol"
+            }`}
+          >
+            Text verfassen
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+};

src/components/entry/EntryBody.tsx

@@ -0,0 +1,22 @@
+import cx from "classnames";
+
+interface EntryBodyProps {
+  isPlaintiff: boolean;
+  children: React.ReactNode;
+}
+
+export const EntryBody: React.FC<EntryBodyProps> = ({
+  isPlaintiff,
+  children,
+}) => {
+  return (
+    <div
+      className={cx("p-6 bg-white rounded-b-lg border border-t-0", {
+        "border-lightPurple": isPlaintiff,
+        "border-lightPetrol": !isPlaintiff,
+      })}
+    >
+      <p dangerouslySetInnerHTML={{ __html: children as string }}></p>
+    </div>
+  );
+};