Add Logo Next to Headings on Desktop

src/App.tsx

@@ -7,6 +7,8 @@ import SentenceCard from "./SentenceCard";
 
 import type { Genre, Language, Sentence } from "./types";
 
+const logo = String(new URL("url:../public/assets/android-chrome-512x512.png", import.meta.url));
+
 export default function App() {
 	const [language, setLanguage] = useState<Language>("waitau");
 	const [genre, setGenre] = useState<Genre>("lit");
@@ -20,14 +22,15 @@ export default function App() {
 		setText("");
 	}
 	return <div className="m-auto p-8 max-w-7xl">
-		<div className="grid items-center justify-center grid-cols-1 max-sm:max-w-fit">
+		<div className="grid items-center justify-center grid-cols-1 sm:grid-cols-[auto_1fr_auto] max-sm:max-w-fit">
+			<img className="row-span-2 h-16 mr-4 mb-2 max-sm:hidden" src={logo} alt="應用程式標誌" />
 			<h1 className="max-sm:col-span-2">香港本土語言文字轉語音朗讀器</h1>
 			<h2 className="my-2">香港本土語言保育協會</h2>
 			<button
 				type="button"
 				className="btn btn-ghost hover:bg-opacity-10
 						   max-sm:text-xl max-sm:font-normal max-sm:relative max-sm:left-4
-						   sm:btn-lg sm:text-[1.375rem] sm:leading-[1.875rem] sm:text-slate-500 sm:col-start-2 sm:row-start-1 sm:row-end-3"
+						   sm:btn-lg sm:text-[1.375rem] sm:leading-[1.875rem] sm:text-slate-500 sm:col-start-3 sm:row-start-1 sm:row-end-3"
 				onClick={() => (document.getElementById("about-dialog") as HTMLDialogElement).showModal()}>
 				<span className="font-symbol font-normal">🛈</span>關於
 			</button>