Clean up tabs

src/components/EditorSidePanel/AreasTab/AreasTab.jsx

@@ -0,0 +1,37 @@
+import { Row, Col, Button } from "@douyinfe/semi-ui";
+import { IconPlus } from "@douyinfe/semi-icons";
+import Empty from "../Empty";
+import { useAreas } from "../../../hooks";
+import SearchBar from "./SearchBar";
+import AreaInfo from "./AreaDetails";
+
+export default function AreasTab() {
+  const { areas, addArea } = useAreas();
+
+  return (
+    <div>
+      <Row gutter={6}>
+        <Col span={16}>
+          <SearchBar />
+        </Col>
+        <Col span={8}>
+          <Button icon={<IconPlus />} block onClick={addArea}>
+            Add area
+          </Button>
+        </Col>
+      </Row>
+      {areas.length <= 0 ? (
+        <Empty
+          title="No subject areas"
+          text="Add subject areas to organize tables!"
+        />
+      ) : (
+        <div className="p-2">
+          {areas.map((a, i) => (
+            <AreaInfo data={a} key={"area_" + i} i={i} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}