feat: learn poc

packages/app/src/components/workspace-modal/index.tsx

@@ -27,7 +27,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
       <Modal open={open} onClose={onClose}>
         <ModalWrapper width={620} height={334} style={{ padding: '10px' }}>
           <Header>
-            <ContentTitle>My workspace</ContentTitle>
+            <ContentTitle>My Workspace List</ContentTitle>
             <ModalCloseButton
               top={6}
               right={6}
@@ -42,16 +42,17 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
                 return (
                   <WorkspaceItem key={item.id}>
                     <span></span>
-                    <span>{item.name}</span>
-                    {item.type === 'local' && <span>local</span>}
-                    {item.type === 'share' && <span>share</span>}
-                    {item.isPublish ? 'public' : 'private'}
-                    {item.isLocal ? 'local' : 'local'}
+                    <span>{item.name}</span>/
+                    {item.type === 'local' && <b>local</b>}
+                    {item.type === 'share' && <b>share</b>}/
+                    {item.isPublish ? 'isPublish' : 'isPrivate'}/
+                    {item.isLocal ? 'isLocal' : ''}/
                   </WorkspaceItem>
                 );
               })}
               <li>
                 <Button
+                  type="primary"
                   onClick={() => {
                     setCreateWorkspaceOpen(true);
                   }}
@@ -114,4 +115,9 @@ const WorkspaceList = styled('div')({
 
 const WorkspaceItem = styled('div')({
   border: '1px solid #e5e5e5',
+  padding: '10px',
+  cursor: 'pointer',
+  ':hover': {
+    background: '#eee',
+  },
 });

packages/app/src/pages/new-workspace/index.tsx

@@ -5,7 +5,7 @@ import { styled } from '@/styles';
 import Button from '@/ui/button/Button';
 
 const Page = () => {
-  const [open, setOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(true);
 
   useEffect(() => {
     const data = getWorkspaceList();
@@ -15,14 +15,14 @@ const Page = () => {
   }, []);
   return (
     <Workspace>
-      <div>workspace</div>
+      <h1>workspace</h1>
       <div>
         <Button
           onClick={() => {
             setOpen(true);
           }}
         >
-          workspaceList
+          View Workspace List
         </Button>
       </div>
       <WorkspaceModal