refactor: UI for the widget dependencies table (#411)

* refactor: widget dependencies

* fix import name

src/manager/components/Widgets/Config.tsx

@@ -2,7 +2,7 @@ import { Box, Code, ScrollArea, Table } from "@radix-ui/themes";
 import { WidgetConfigType } from "../../../types";
 import { useWidgetsStore } from "../../hooks";
 import { memo } from "react";
-import WidgetDependencies from "./WidgetDependencies";
+import Dependencies from "./Dependencies";
 
 interface ConfigProps {
   id: string;
@@ -38,9 +38,7 @@ const Config = memo(({ id }: ConfigProps) => {
               <Table.Row>
                 <Table.RowHeaderCell>Dependencies</Table.RowHeaderCell>
                 <Table.Cell>
-                  <WidgetDependencies
-                    dependencies={config.content.dependencies}
-                  />
+                  <Dependencies dependencies={config.content.dependencies} />
                 </Table.Cell>
               </Table.Row>
             </Table.Body>

src/manager/components/Widgets/Dependencies.tsx

@@ -0,0 +1,56 @@
+import { Code, Inset, Link, Popover, Table, Text } from "@radix-ui/themes";
+import { memo } from "react";
+
+interface DependenciesProps {
+  dependencies: Record<string, string>;
+}
+
+const Dependencies = memo(({ dependencies }: DependenciesProps) => {
+  const dependenciesArray = Object.entries(dependencies);
+
+  return dependenciesArray.length > 0 ? (
+    <Popover.Root>
+      <Popover.Trigger>
+        <Link title="View the dependencies" asChild>
+          <button>View ({dependenciesArray.length})</button>
+        </Link>
+      </Popover.Trigger>
+      <Popover.Content size="1">
+        <Inset side="all">
+          <Table.Root
+            size="1"
+            css={{
+              "--table-cell-padding": "var(--space-1) var(--space-2)",
+              "--table-cell-min-height": 0,
+              "[data-radix-scroll-area-viewport]": { maxHeight: "150px" },
+              "& tr:last-child": { "--table-row-box-shadow": "none" },
+            }}
+          >
+            <Table.Body>
+              {dependenciesArray.map(([name, version]) => (
+                <Table.Row key={name}>
+                  <Table.RowHeaderCell>
+                    <Link
+                      href={`https://www.npmjs.com/package/${name}`}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      {name}
+                    </Link>
+                  </Table.RowHeaderCell>
+                  <Table.Cell>
+                    <Code variant="ghost">{version}</Code>
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table.Root>
+        </Inset>
+      </Popover.Content>
+    </Popover.Root>
+  ) : (
+    <Text color="gray">None</Text>
+  );
+});
+
+export default Dependencies;