Add vendor overview

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/App.tsx

@@ -27,6 +27,7 @@ const PeoplesPage = lazy(() => import("./pages/PeoplesPage"));
 const VendorList = lazy(() => import("./pages/VendorList"));
 const FrameworksPage = lazy(() => import("./pages/FrameworksPage"));
 const FrameworkOverviewPage = lazy(() => import("./pages/FrameworkOverviewPage"));
+const VendorOverviewPage = lazy(() => import("./pages/VendorOverviewPage"));
 
 function App() {
   return (
@@ -95,6 +96,16 @@ function App() {
                         </Suspense>
                       }
                     />
+                    <Route
+                      path="/vendors/:vendorId"
+                      element={
+                        <Suspense>
+                          <ErrorBoundary>
+                            <VendorOverviewPage />
+                          </ErrorBoundary>
+                        </Suspense>
+                      }
+                    />
                     <Route
                       path="*"
                       element={

apps/console/src/pages/VendorOverviewPage.tsx

@@ -0,0 +1,258 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Checkbox } from "@/components/ui/checkbox"
+import { HelpCircle } from "lucide-react"
+import { graphql, PreloadedQuery, usePreloadedQuery, useQueryLoader } from "react-relay"
+import { Suspense, useEffect } from "react"
+import type { VendorOverviewPageQuery as VendorOverviewPageQueryType } from "./__generated__/VendorOverviewPageQuery.graphql"
+import { useParams } from "react-router";
+
+const VendorOverviewPageQuery = graphql`
+  query VendorOverviewPageQuery($vendorId: ID!) {
+    node(id: $vendorId) {
+      ... on Vendor {
+        id
+        name
+        createdAt
+        updatedAt
+      }
+    }
+  }
+`
+
+function VendorOverviewPageContent({
+  queryRef,
+}: {
+  queryRef: PreloadedQuery<VendorOverviewPageQueryType>;
+}) {
+  const data = usePreloadedQuery(VendorOverviewPageQuery, queryRef);
+  const [riskLevel, setRiskLevel] = useState("medium")
+
+  return (
+    <div className="space-y-6 p-4 md:p-6 lg:p-8">
+      <div className="mx-auto max-w-4xl space-y-6">
+        {/* Header */}
+        <div className="space-y-2">
+          <div className="flex items-center gap-2">
+            <img
+              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-G4dMt0eis6LFLrCaYPeMr7Nkt2iPoj.png"
+              alt="Google Cloud"
+              className="h-8 w-8"
+            />
+            <h1 className="text-xl font-semibold text-gray-900">{data.node?.name}</h1>
+          </div>
+          <p className="text-gray-600">Use this form to assess the risk of using Google Workspace as a vendor.</p>
+        </div>
+
+        {/* Asset Storage Type */}
+        <Card className="p-6">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <h2 className="text-lg font-medium">Asset Storage Type</h2>
+              <p className="text-sm text-gray-500">Questions related to the type of assets stored by the vendor.</p>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center gap-2">
+                <HelpCircle className="h-4 w-4 text-gray-400" />
+                <Label className="text-sm">Does this vendor store physical or digital assets?</Label>
+              </div>
+              <div className="flex gap-2">
+                <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">Digital</button>
+                <button className="rounded-full bg-green-100 px-4 py-1 text-sm text-green-900">Physical</button>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Data Storage and Handling */}
+        <Card className="p-6">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <h2 className="text-lg font-medium">Data Storage and Handling</h2>
+              <p className="text-sm text-gray-500">
+                Questions related to the vendor's data storage and handling practices.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Does this vendor store production data?</Label>
+                </div>
+                <div className="flex gap-2">
+                  <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">No</button>
+                  <button className="rounded-full bg-green-100 px-4 py-1 text-sm text-green-900">Yes</button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Is the production data encrypted at rest?</Label>
+                </div>
+                <div className="flex gap-2">
+                  <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">No</button>
+                  <button className="rounded-full bg-green-100 px-4 py-1 text-sm text-green-900">Yes</button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Who has access to the production data?</Label>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="vendor-staff" defaultChecked />
+                    <label
+                      htmlFor="vendor-staff"
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Vendor Staff
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="third-parties" />
+                    <label
+                      htmlFor="third-parties"
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Third Parties
+                    </label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="automated-systems" />
+                    <label
+                      htmlFor="automated-systems"
+                      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    >
+                      Automated Systems
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Vendor Reliability and Continuity */}
+        <Card className="p-6">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <h2 className="text-lg font-medium">Vendor Reliability and Continuity</h2>
+              <p className="text-sm text-gray-500">
+                Evaluating the vendor's reliability and plans for business continuity.
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Does the vendor have an uptime commitment?</Label>
+                </div>
+                <RadioGroup defaultValue="greater" className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="greater" id="greater" />
+                    <Label htmlFor="greater">Greater than 99.9% uptime</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="between" id="between" />
+                    <Label htmlFor="between">Between 99% and 99.9% uptime</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="less" id="less" />
+                    <Label htmlFor="less">Less than 99% uptime</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="na" id="na" />
+                    <Label htmlFor="na">Not applicable</Label>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Does the vendor have a disaster recovery plan?</Label>
+                </div>
+                <div className="flex gap-2">
+                  <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">No</button>
+                  <button className="rounded-full bg-green-100 px-4 py-1 text-sm text-green-900">Yes</button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                  <Label className="text-sm">Impact of a Data Breach or Outage</Label>
+                </div>
+                <div className="flex gap-2">
+                  <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">Low</button>
+                  <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">Medium</button>
+                  <button className="rounded-full bg-green-100 px-4 py-1 text-sm text-green-900">High</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Risk Level */}
+        <Card className="p-6">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <h2 className="text-lg font-medium">Risk level</h2>
+              <p className="text-sm text-gray-500">Based on the responses, the suggested risk level is medium.</p>
+            </div>
+            <div className="flex gap-2">
+              <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">Low</button>
+              <button className="rounded-full bg-gray-100 px-4 py-1 text-sm text-gray-900">Medium</button>
+              <button className="rounded-full bg-green-100 px-4 py-1 text-sm text-green-900">High</button>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+function VendorOverviewPageFallback() {
+  return (
+    <div className="p-6 space-y-6">
+      <div className="space-y-1">
+        <div className="h-8 w-48 bg-muted animate-pulse rounded" />
+        <div className="h-4 w-96 bg-muted animate-pulse rounded" />
+      </div>
+      <div className="space-y-2">
+        {[1, 2, 3].map((i) => (
+          <div key={i} className="h-20 bg-muted animate-pulse rounded-lg" />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default function VendorOverviewPage() {
+  const { vendorId } = useParams();
+  const [queryRef, loadQuery] = useQueryLoader<VendorOverviewPageQueryType>(VendorOverviewPageQuery);
+
+  useEffect(() => {
+    loadQuery({ vendorId: vendorId });
+  }, [loadQuery]);
+
+  if (!queryRef) {
+    return <VendorOverviewPageFallback />;
+  }
+
+  return (
+    <Suspense fallback={<VendorOverviewPageFallback />}>
+      <VendorOverviewPageContent queryRef={queryRef} />
+    </Suspense>
+  );
+}

apps/console/src/pages/__generated__/VendorListPageQuery.graphql.ts

@@ -1,5 +1,5 @@
 /**
- * @generated SignedSource<<825817de2398615779403c0817995f9f>>
+ * @generated SignedSource<<a55cac2889d9749005056d4fe1d88935>>
  * @lightSyntaxTransform
  * @nogrep
  */
@@ -9,8 +9,8 @@
 // @ts-nocheck
 
 import { ConcreteRequest } from 'relay-runtime';
-export type VendorListQuery$variables = Record<PropertyKey, never>;
+export type VendorListPageQuery$variables = Record<PropertyKey, never>;
-export type VendorListQuery$data = {
+export type VendorListPageQuery$data = {
   readonly node: {
     readonly id: string;
     readonly vendors?: {
@@ -25,9 +25,9 @@ export type VendorListQuery$data = {
     };
   };
 };
-export type VendorListQuery = {
+export type VendorListPageQuery = {
-  response: VendorListQuery$data;
+  response: VendorListPageQuery$data;
-  variables: VendorListQuery$variables;
+  variables: VendorListPageQuery$variables;
 };
 
 const node: ConcreteRequest = (function(){
@@ -112,7 +112,7 @@ return {
     "argumentDefinitions": [],
     "kind": "Fragment",
     "metadata": null,
-    "name": "VendorListQuery",
+    "name": "VendorListPageQuery",
     "selections": [
       {
         "alias": null,
@@ -135,7 +135,7 @@ return {
   "operation": {
     "argumentDefinitions": [],
     "kind": "Operation",
-    "name": "VendorListQuery",
+    "name": "VendorListPageQuery",
     "selections": [
       {
         "alias": null,
@@ -160,16 +160,16 @@ return {
     ]
   },
   "params": {
-    "cacheID": "ced04a7cfd00f4525d09d6bf5303167b",
+    "cacheID": "1661d7e75c833a569efafa55c204d894",
     "id": null,
     "metadata": {},
-    "name": "VendorListQuery",
+    "name": "VendorListPageQuery",
     "operationKind": "query",
-    "text": "query VendorListQuery {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      vendors {\n        edges {\n          node {\n            id\n            name\n            createdAt\n            updatedAt\n          }\n        }\n      }\n    }\n  }\n}\n"
+    "text": "query VendorListPageQuery {\n  node(id: \"AZSfP_xAcAC5IAAAAAAltA\") {\n    __typename\n    id\n    ... on Organization {\n      vendors {\n        edges {\n          node {\n            id\n            name\n            createdAt\n            updatedAt\n          }\n        }\n      }\n    }\n  }\n}\n"
   }
 };
 })();
 
-(node as any).hash = "4f125111c515f868693b33e5209d05fd";
+(node as any).hash = "e869cdf6203c1a7f42c4c697f574b0c0";
 
 export default node;

apps/console/src/pages/__generated__/VendorOverviewPageQuery.graphql.ts

@@ -0,0 +1,154 @@
+/**
+ * @generated SignedSource<<a9ec0002895dd62d2845ae4fd6df3a53>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type VendorOverviewPageQuery$variables = {
+  vendorId: string;
+};
+export type VendorOverviewPageQuery$data = {
+  readonly node: {
+    readonly createdAt?: any;
+    readonly id?: string;
+    readonly name?: string;
+    readonly updatedAt?: any;
+  };
+};
+export type VendorOverviewPageQuery = {
+  response: VendorOverviewPageQuery$data;
+  variables: VendorOverviewPageQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "vendorId"
+  }
+],
+v1 = [
+  {
+    "kind": "Variable",
+    "name": "id",
+    "variableName": "vendorId"
+  }
+],
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v3 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "name",
+  "storageKey": null
+},
+v4 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "createdAt",
+  "storageKey": null
+},
+v5 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "updatedAt",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "VendorOverviewPageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v2/*: any*/),
+              (v3/*: any*/),
+              (v4/*: any*/),
+              (v5/*: any*/)
+            ],
+            "type": "Vendor",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "VendorOverviewPageQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": (v1/*: any*/),
+        "concreteType": null,
+        "kind": "LinkedField",
+        "name": "node",
+        "plural": false,
+        "selections": [
+          {
+            "alias": null,
+            "args": null,
+            "kind": "ScalarField",
+            "name": "__typename",
+            "storageKey": null
+          },
+          (v2/*: any*/),
+          {
+            "kind": "InlineFragment",
+            "selections": [
+              (v3/*: any*/),
+              (v4/*: any*/),
+              (v5/*: any*/)
+            ],
+            "type": "Vendor",
+            "abstractKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "93086ca61d518fce9c6ed49fa9bd841e",
+    "id": null,
+    "metadata": {},
+    "name": "VendorOverviewPageQuery",
+    "operationKind": "query",
+    "text": "query VendorOverviewPageQuery(\n  $vendorId: ID!\n) {\n  node(id: $vendorId) {\n    __typename\n    ... on Vendor {\n      id\n      name\n      createdAt\n      updatedAt\n    }\n    id\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "7959720cf1a6376d406ac5f478f6d9c3";
+
+export default node;

package-lock.json

@@ -19,10 +19,13 @@
       "version": "0.0.1",
       "dependencies": {
         "@radix-ui/react-avatar": "^1.1.3",
+        "@radix-ui/react-checkbox": "^1.0.4",
         "@radix-ui/react-collapsible": "^1.1.3",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-dropdown-menu": "^2.1.6",
+        "@radix-ui/react-label": "^2.0.2",
         "@radix-ui/react-progress": "^1.1.2",
+        "@radix-ui/react-radio-group": "^1.1.3",
         "@radix-ui/react-separator": "^1.1.2",
         "@radix-ui/react-slot": "^1.1.2",
         "@radix-ui/react-tooltip": "^1.1.8",
@@ -2307,6 +2310,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.4.tgz",
+      "integrity": "sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collapsible": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.3.tgz",
@@ -2558,6 +2591,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
+      "integrity": "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
@@ -2725,6 +2781,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.3.tgz",
+      "integrity": "sha512-xtCsqt8Rp09FK50ItqEqTJ7Sxanz8EM8dnkVIhJrc/wkMMomSmXHvYbhv3E7Zx4oXh98aaLt9W679SUYXg4IDA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-roving-focus": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz",
@@ -2897,6 +2985,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-rect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",