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 ( +
+
+ +