Begin service token v3

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectServiceTokensTab/ProjectServiceTokensTab.tsx

@@ -1,7 +1,11 @@
 import { ServiceTokenSection } from "../ServiceTokenSection";
+import { ServiceTokenV3Section } from "../ServiceTokenV3Section";
 
 export const ProjectServiceTokensTab = () => {
     return (
-        <ServiceTokenSection />
+        <>
+            <ServiceTokenV3Section />
+            <ServiceTokenSection />
+        </>
     );
 }

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenV3Section/AddServiceTokenV3Modal.tsx

@@ -0,0 +1,7 @@
+export const AddServiceTokenV3Modal = () => {
+    return (
+        <div>
+            AddServiceTokenV3Modal
+        </div>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenV3Section/ServiceTokenV3Section.tsx

@@ -0,0 +1,14 @@
+import { AddServiceTokenV3Modal } from "./AddServiceTokenV3Modal";
+import { ServiceTokenV3Table } from "./ServiceTokenV3Table";
+
+export const ServiceTokenV3Section = () => {
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+          <p className="text-xl font-semibold text-mineshaft-100">
+            Service Tokens 2.0
+          </p>
+          <ServiceTokenV3Table />
+          <AddServiceTokenV3Modal />
+        </div>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenV3Section/ServiceTokenV3Table.tsx

@@ -0,0 +1,7 @@
+export const ServiceTokenV3Table = () => {
+    return (
+        <div>
+            ServiceTokenV3Table
+        </div>
+    );
+}

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenV3Section/index.tsx

@@ -0,0 +1 @@
+export { ServiceTokenV3Section } from "./ServiceTokenV3Section";