feat: metadata

app/[server]/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { serverList } from "@/constants/servers";
+
+type Props = {
+  params: { server: string };
+};
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const {
+    params: { server },
+  } = props;
+  const serverName = serverList.find((s) => s.id === server)?.name;
+
+  if (!serverName) return {};
+
+  return {
+    title: `${serverName} Earning`,
+    openGraph: {
+      title: `${serverName} Earning`,
+    },
+  };
+}
+
+export default function Layout({
+  children,
+  ...props
+}: { children: React.ReactNode } & Props) {
+  const {
+    params: { server },
+  } = props;
+  const serverInfo = serverList.find((s) => s.id === server);
+
+  if (!serverInfo) return notFound();
+
+  return <>{children}</>;
+}

components/stake/stake-input.tsx

@@ -74,7 +74,7 @@ export const StakeInput = (props: Props) => {
 
   return (
     <div className="rounded-xl bg-background-level2 p-3 space-y-3">
-      <div className="flex items-center justify-between min-h-[34px] flex-col space-y-1 sm:flex-row sm:space-y-0">
+      <div className="flex items-center justify-between min-h-[34px]">
         <Typography level="h9" color="textSecondary">
           You’re staking
         </Typography>
@@ -174,7 +174,7 @@ export const StakeInput = (props: Props) => {
             </Button>
           </div>
         </div>
-        <div className="flex items-center justify-between flex-col sm:flex-row">
+        <div className="flex items-center justify-between">
           <Typography className="!text-[13px] text-text-tertiary">
             ≈ $0.00 USD
           </Typography>

constants/servers.ts

@@ -0,0 +1,6 @@
+export const serverList = [
+  {
+    id: "dwarves",
+    name: "Dwarves Foundation",
+  },
+];