feat(project): base smatec's frontend

src/components/Avatar/AvatarDropdown.tsx

@@ -0,0 +1,61 @@
+import { ROUTE_LOGIN, ROUTE_PROFILE } from '@/constants/routes';
+import { clearAllData, clearSessionData, removeToken } from '@/utils/storage';
+import { LogoutOutlined, ProfileOutlined } from '@ant-design/icons';
+import { history, useIntl } from '@umijs/max';
+
+import { Dropdown } from 'antd';
+
+// Avatar component with i18n support
+export const AvatarDropdown = ({
+  currentUserProfile,
+}: {
+  currentUserProfile?: MasterModel.ProfileResponse;
+}) => {
+  const intl = useIntl();
+  return (
+    <Dropdown
+      menu={{
+        items: [
+          {
+            key: ROUTE_PROFILE,
+            icon: <ProfileOutlined />,
+            label: intl.formatMessage({ id: 'menu.profile' }),
+            onClick: () => {
+              history.push(ROUTE_PROFILE);
+            },
+          },
+          {
+            type: 'divider',
+          },
+          {
+            key: 'logout',
+            icon: <LogoutOutlined />,
+            label: intl.formatMessage({ id: 'common.logout' }),
+            onClick: () => {
+              removeToken();
+              clearAllData();
+              clearSessionData();
+              window.location.href = ROUTE_LOGIN;
+            },
+          },
+        ],
+      }}
+    >
+      <div className="flex gap-2">
+        <img
+          src="/avatar.svg"
+          alt="avatar"
+          style={{
+            width: 32,
+            height: 32,
+            borderRadius: '50%',
+            cursor: 'pointer',
+          }}
+        />
+        <span className="font-bold">
+          {currentUserProfile?.metadata?.full_name || ''}
+        </span>
+      </div>
+    </Dropdown>
+  );
+};