diff --git a/client/src/Post.scss b/client/src/Post.scss
index 4c17338..8d7c7a6 100644
--- a/client/src/Post.scss
+++ b/client/src/Post.scss
@@ -6,6 +6,17 @@
padding: 7px;
resize: none;
margin: 1rem 0;
+ transition: height 0.5s;
+
+ &.postEditing {
+ padding: 0;
+ &:focus-within {
+ border-color: mediumpurple;
+ outline: solid mediumpurple 2px;
+ }
+ height: 6rem;
+ transition: height 0.5s;
+ }
.text {
word-wrap: anywhere;
@@ -39,8 +50,18 @@
}
.actions {
+ display: flex;
align-self: end;
+ > * {
+ margin-left: 0.5rem;
+ }
+
+ > *:first-child {
+ margin-left: 0;
+ }
+
+
button {
background: none;
border: none;
diff --git a/client/src/Post.tsx b/client/src/Post.tsx
index 6a01eef..6fd555e 100644
--- a/client/src/Post.tsx
+++ b/client/src/Post.tsx
@@ -1,5 +1,8 @@
import "./Post.scss";
-import { Form, Link } from "react-router-dom";
+import { Form, Link, useSubmit } from "react-router-dom";
+import { useState } from "react";
+
+import "./PostForm.scss";
export function Post({
text,
@@ -14,6 +17,35 @@ export function Post({
actions: boolean;
id: number;
}) {
+ const [editing, setEditing] = useState(false);
+ const submit = useSubmit();
+
+ if (editing) {
+ return (
+
+
+
+ );
+ }
+
return (
{text}
@@ -29,6 +61,7 @@ export function Post({
{actions && (
+ {
}