Add Toolbar component

src/ui/app.css

@@ -106,3 +106,13 @@ ol {
 	width: 100%;
 	height: 100%;
 }
+
+/* Blog Post Flow */
+.flow-blog-post-toolbar {
+	display: flex;
+	margin-bottom: 1rem;
+}
+
+.flow-blog-post-toolbar button {
+	margin-left: auto;
+}

src/ui/flows/blog-post/EditBlogPost.tsx

@@ -5,6 +5,7 @@ import { Post, PostContent, PostDate, PostTitle } from '@/model/Post';
 import { SelectContent } from '@/ui/flows/blog-post/SelectContent';
 import { Screens } from '@/ui/App';
 import { ContentBus } from '@/bus/ContentBus';
+import { Toolbar } from '@/ui/flows/blog-post/Toolbar';
 
 export function EditBlogPost() {
 	const [ post, setPost ] = useState< Post >();
@@ -40,16 +41,17 @@ export function EditBlogPost() {
 				'Loading...'
 			) : (
 				<>
-					<div>Select the content of the post</div>
-					<button
-						disabled={ ! isValid }
-						onClick={ async () => {
-							await ContentBus.disableHighlighting();
-							console.log( 'TODO: import' );
-						} }
-					>
-						Import
-					</button>
+					<Toolbar>
+						<button
+							disabled={ ! isValid }
+							onClick={ async () => {
+								await ContentBus.disableHighlighting();
+								console.log( 'TODO: import' );
+							} }
+						>
+							Import
+						</button>
+					</Toolbar>
 					<SelectContent
 						post={ post }
 						onDateChanged={ async ( date: PostDate ) => {

src/ui/flows/blog-post/Toolbar.tsx

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+
+export function Toolbar( props: PropsWithChildren ) {
+	return <div className="flow-blog-post-toolbar">{ props.children }</div>;
+}