Connections.tsx raw

   1  import { CirclePlusIcon, LayoutGridIcon, Plug2Icon } from "lucide-react";
   2  import React from "react";
   3  import { useSearchParams } from "react-router";
   4  import AppHeader from "src/components/AppHeader";
   5  import AppStore from "src/components/connections/AppStore";
   6  import ConnectedApps from "src/components/connections/ConnectedApps";
   7  import ResponsiveLinkButton from "src/components/ResponsiveLinkButton";
   8  import {
   9    Tabs,
  10    TabsContent,
  11    TabsList,
  12    TabsTrigger,
  13  } from "src/components/ui/tabs";
  14  
  15  export function Connections() {
  16    const [searchParams, setSearchParams] = useSearchParams();
  17    const [tab, setTab] = React.useState(searchParams.get("tab") || "app-store");
  18  
  19    React.useEffect(() => {
  20      const newTabValue = searchParams.get("tab");
  21      if (newTabValue) {
  22        setTab(newTabValue);
  23        const newParams = new URLSearchParams(searchParams);
  24        newParams.delete("tab");
  25        setSearchParams(Object.fromEntries(newParams.entries()), {
  26          replace: true,
  27        });
  28      }
  29    }, [searchParams, setSearchParams]);
  30  
  31    return (
  32      <>
  33        <AppHeader
  34          title="Connections"
  35          pageTitle="Connections"
  36          contentRight={
  37            <ResponsiveLinkButton
  38              to="/apps/new"
  39              icon={CirclePlusIcon}
  40              text="Add Connection"
  41            />
  42          }
  43        />
  44        <Tabs value={tab} onValueChange={setTab} className="px-2 lg:px-0">
  45          <TabsList className="mb-2 lg:mb-6">
  46            <TabsTrigger value="app-store" className="flex gap-2 items-center">
  47              <LayoutGridIcon className="w-5 h-5" /> App Store
  48            </TabsTrigger>
  49            <TabsTrigger
  50              value="connected-apps"
  51              className="flex gap-2 items-center"
  52            >
  53              <Plug2Icon className="w-5 h-5" /> Connected Apps
  54            </TabsTrigger>
  55          </TabsList>
  56          <TabsContent value="app-store" tabIndex={-1}>
  57            <AppStore />
  58          </TabsContent>
  59          <TabsContent value="connected-apps" tabIndex={-1}>
  60            <ConnectedApps />
  61          </TabsContent>
  62        </Tabs>
  63      </>
  64    );
  65  }
  66