chore: add user detail page

This commit is contained in:
Steven
2022-09-13 20:57:15 +08:00
parent 90639322b7
commit 156218b40f
14 changed files with 76 additions and 200 deletions

View File

@@ -22,14 +22,16 @@ const Home: React.FC = () => {
<Header />
{loadingState.isLoading ? null : (
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<p className="font-mono mb-2 text-gray-400">Workspace List</p>
<WorkspaceListView workspaceList={workspaceList} />
<div
className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg cursor-pointer"
onClick={() => showCreateWorkspaceDialog()}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
<div className="mb-4 w-full flex flex-row justify-between items-center">
<span className="font-mono text-gray-400">Workspace List</span>
<div
className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
onClick={() => showCreateWorkspaceDialog()}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
</div>
</div>
<WorkspaceListView workspaceList={workspaceList} />
</div>
)}
</div>

View File

@@ -0,0 +1,19 @@
import { useAppSelector } from "../store";
import Header from "../components/Header";
const UserDetail: React.FC = () => {
const { user } = useAppSelector((state) => state.user);
return (
<div className="w-full h-full flex flex-col justify-start items-start">
<Header />
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<p className="text-3xl mt-2 mb-4">{user?.name}</p>
<p className="leading-10">Email: {user?.email}</p>
<p className="leading-10">OpenID: {user?.openId}</p>
</div>
</div>
);
};
export default UserDetail;

View File

@@ -49,22 +49,22 @@ const WorkspaceDetail: React.FC = () => {
{loadingState.isLoading ? null : (
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-start items-center mb-4">
<span className="font-mono text-gray-600 cursor-pointer hover:underline" onClick={() => handleBackToHome()}>
Home
</span>
<span className="font-mono text-gray-200 mx-4">/</span>
<span className="font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
</div>
<div className="w-full flex flex-row justify-between items-center mb-4">
<span className="font-mono text-gray-400">Shortcut List</span>
<div
className="flex flex-row justify-start items-center text-gray-600 border rounded-md px-2 py-1 cursor-pointer"
onClick={() => handleBackToHome()}
className="text-sm flex flex-row justify-start items-center border px-3 py-2 rounded-lg cursor-pointer hover:shadow"
onClick={() => showCreateShortcutDialog(state.workspace.id)}
>
<Icon.ChevronLeft className="w-5 h-auto" /> Back to Home
<Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
</div>
<span className="ml-4 font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
</div>
<p className="font-mono mb-2 text-gray-400">Shortcut List</p>
<ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />
<div
className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg cursor-pointer"
onClick={() => showCreateShortcutDialog(state.workspace.id)}
>
<Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut
</div>
</div>
)}
</div>