:sparkles: create <StudioCard>

dashboard/src/components/auth/StudioCard.tsx

@@ -0,0 +1,49 @@
+import { useIntl } from "react-intl";
+import { Popover, Avatar } from "antd";
+import { IStudio } from "./StudioName";
+import { Link } from "react-router-dom";
+
+interface IWidget {
+  studio: IStudio;
+  children?: JSX.Element;
+}
+const Widget = ({ studio, children }: IWidget) => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <Popover
+        content={
+          <>
+            <div style={{ display: "flex" }}>
+              <div style={{ paddingRight: 8 }}>
+                <Avatar style={{ backgroundColor: "#87d068" }} size="small">
+                  {studio.nickName.slice(0, 1)}
+                </Avatar>
+              </div>
+              <div>
+                <div>{studio.nickName}</div>
+                <div>译文(2) | 课程(3)</div>
+                <div>
+                  <Link
+                    to={`/blog/${studio.studioName}/overview`}
+                    target="_blank"
+                  >
+                    {intl.formatMessage({
+                      id: "columns.library.blog.label",
+                    })}
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </>
+        }
+        placement="bottomRight"
+      >
+        {children}
+      </Popover>
+    </>
+  );
+};
+
+export default Widget;

dashboard/src/components/auth/StudioName.tsx

@@ -1,5 +1,7 @@
 import { Avatar, Space } from "antd";
 
+import StudioCard from "./StudioCard";
+
 export interface IStudio {
   id: string;
   nickName: string;
@@ -21,16 +23,18 @@ const Widget = ({
   // TODO
   const avatar = <Avatar size="small">{data.nickName.slice(0, 1)}</Avatar>;
   return (
-    <Space
-      onClick={() => {
-        if (typeof onClick !== "undefined") {
-          onClick(data.studioName);
-        }
-      }}
-    >
-      {showAvatar ? avatar : ""}
-      {showName ? data.nickName : ""}
-    </Space>
+    <StudioCard studio={data}>
+      <Space
+        onClick={() => {
+          if (typeof onClick !== "undefined") {
+            onClick(data.studioName);
+          }
+        }}
+      >
+        {showAvatar ? avatar : ""}
+        {showName ? data.nickName : ""}
+      </Space>
+    </StudioCard>
   );
 };