Explore Endpoints: Basic tabs view setup

package.json

@@ -24,6 +24,7 @@
     "next": "14.1.0",
     "react": "^18",
     "react-dom": "^18",
+    "stellar-sdk": "^11.2.2",
     "zustand": "^4.5.1",
     "zustand-querystring": "^0.0.19"
   },

src/app/(sidebar)/explore-endpoints/[[...pages]]/page.tsx

@@ -1,61 +1,155 @@
 "use client";
 
+import { useState } from "react";
 import { usePathname } from "next/navigation";
-import { Card, Icon, Text } from "@stellar/design-system";
+import {
+  Alert,
+  Button,
+  Card,
+  Checkbox,
+  CopyText,
+  Icon,
+  Input,
+  Text,
+} from "@stellar/design-system";
 
 import { InfoCards } from "@/components/InfoCards";
+import { TabView } from "@/components/TabView";
+import { SdsLink } from "@/components/SdsLink";
 import { Routes } from "@/constants/routes";
-
-const infoCards = [
-  {
-    id: "soroban-rpc",
-    title: "RPC Endpoints",
-    description: "TODO: add text",
-    buttonLabel: "See docs",
-    buttonIcon: <Icon.LinkExternal01 />,
-    buttonAction: () =>
-      window.open("https://soroban.stellar.org/api/methods", "_blank"),
-  },
-  {
-    id: "horizon",
-    title: "Horizon Endpoints",
-    description: "TODO: add text",
-    buttonLabel: "See docs",
-    buttonIcon: <Icon.LinkExternal01 />,
-    buttonAction: () =>
-      window.open(
-        "https://developers.stellar.org/api/horizon/resources/",
-        "_blank",
-      ),
-  },
-];
+import { WithInfoText } from "@/components/WithInfoText";
 
 export default function ExploreEndpoints() {
   const pathname = usePathname();
 
+  const [activeTab, setActiveTab] = useState("endpoints-tab-params");
+
   if (pathname === Routes.EXPLORE_ENDPOINTS) {
+    return <ExploreEndpointsLandingPage />;
+  }
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // TODO: handle submit
+  };
+
+  const renderEndpointUrl = () => {
     return (
-      <>
-        <Card>
-          <div className="CardText">
-            <Text size="lg" as="h1" weight="medium">
-              Endpoints
-            </Text>
-
-            <Text size="sm" as="p">
-              TODO: add text
-            </Text>
-          </div>
-        </Card>
-        <InfoCards infoCards={infoCards} />
-      </>
+      <div className="Endpoints__urlBar">
+        <Input
+          id="endpoint-url"
+          fieldSize="md"
+          // TODO: update URL
+          value="https://"
+          readOnly
+          disabled
+          // TODO: set request type
+          leftElement={<div className="Endpoints__input__requestType">GET</div>}
+        />
+        {/* TODO: disable if can't submit */}
+        <Button size="md" variant="secondary" type="submit">
+          Submit
+        </Button>
+        {/* TODO: add text to copy */}
+        <CopyText textToCopy="">
+          <Button size="md" variant="tertiary" icon={<Icon.Copy01 />}></Button>
+        </CopyText>
+      </div>
     );
-  }
+  };
 
-  return renderPage(pathname);
+  const renderFields = () => {
+    return (
+      <div className="Endpoints__content">
+        <div className="Endpoints__content__inputs">
+          {/* TODO: render fields for path */}
+          {`Explore Endpoints: ${pathname}`}
+        </div>
+
+        <WithInfoText href="https://developers.stellar.org/network/horizon/structure/streaming">
+          <Checkbox
+            id="streaming-mode"
+            label="Server-Sent Events (streaming mode)"
+            fieldSize="md"
+          />
+        </WithInfoText>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <TabView
+          heading={{ title: "Heading title", href: "http://stellar.org" }}
+          staticTop={renderEndpointUrl()}
+          tab1={{
+            id: "endpoints-tab-params",
+            label: "Params",
+            content: renderFields(),
+          }}
+          tab2={{
+            id: "endpoints-tab-json",
+            label: "JSON Response",
+            content: <div>TODO: render JSON</div>,
+          }}
+          onTabChange={(id) => {
+            setActiveTab(id);
+          }}
+          activeTabId={activeTab}
+        />
+      </form>
+      <Alert variant="primary" placement="inline">
+        This tool can be used to run queries against the{" "}
+        <SdsLink href="https://developers.stellar.org/network/horizon">
+          REST API endpoints
+        </SdsLink>{" "}
+        on the Horizon server. Horizon is the client facing library for the
+        Stellar ecosystem.
+      </Alert>
+    </>
+  );
 }
 
-const renderPage = (pathname: string) => {
-  // TODO: add switch to render path component
-  return <div>{`Explore Endpoints: ${pathname}`}</div>;
+const ExploreEndpointsLandingPage = () => {
+  const infoCards = [
+    {
+      id: "soroban-rpc",
+      title: "RPC Endpoints",
+      description: "TODO: add text",
+      buttonLabel: "See docs",
+      buttonIcon: <Icon.LinkExternal01 />,
+      buttonAction: () =>
+        window.open("https://soroban.stellar.org/api/methods", "_blank"),
+    },
+    {
+      id: "horizon",
+      title: "Horizon Endpoints",
+      description: "TODO: add text",
+      buttonLabel: "See docs",
+      buttonIcon: <Icon.LinkExternal01 />,
+      buttonAction: () =>
+        window.open(
+          "https://developers.stellar.org/api/horizon/resources/",
+          "_blank",
+        ),
+    },
+  ];
+
+  return (
+    <>
+      <Card>
+        <div className="CardText">
+          <Text size="lg" as="h1" weight="medium">
+            Endpoints
+          </Text>
+
+          <Text size="sm" as="p">
+            TODO: add text
+          </Text>
+        </div>
+      </Card>
+      <InfoCards infoCards={infoCards} />
+    </>
+  );
 };

src/components/ExpandBox/index.tsx

@@ -0,0 +1,34 @@
+import { useLayoutEffect, useState } from "react";
+import "./styles.scss";
+
+export const ExpandBox = ({
+  children,
+  isExpanded,
+}: {
+  children: React.ReactNode;
+  isExpanded: boolean;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  // We need a bit of delay to enable overflow visible when the section is expanded
+  useLayoutEffect(() => {
+    if (isExpanded) {
+      const t = setTimeout(() => {
+        setIsOpen(true);
+        clearTimeout(t);
+      }, 200);
+    } else {
+      setIsOpen(false);
+    }
+  }, [isExpanded]);
+
+  return (
+    <div
+      className="ExpandBox"
+      data-is-expanded={isExpanded}
+      data-is-open={isOpen}
+    >
+      <div className="ExpandBox__inset">{children}</div>
+    </div>
+  );
+};

src/components/ExpandBox/styles.scss

@@ -0,0 +1,19 @@
+.ExpandBox {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease-out;
+
+  &[data-is-expanded="true"] {
+    grid-template-rows: 1fr;
+  }
+
+  &[data-is-open="true"] {
+    .ExpandBox__inset {
+      overflow: visible;
+    }
+  }
+
+  &__inset {
+    overflow: hidden;
+  }
+}