fixed build issues and some alignement issues

components/scoreplaylog/moreAction.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { MoreHorizontal } from "lucide-react";
+import { generateShareToken } from "@/app/(sharing)/[token]/token";
+
+interface ActionsCellProps {
+  row: any; //unsure what to use here
+}
+
+const ActionsCell: React.FC<ActionsCellProps> = ({ row }) => {
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  const handleGenerateShareToken = async () => {
+    const { token, error } = await generateShareToken(row.original.id);
+    if (error) {
+      setError(error);
+    } else {
+      const newTab = window.open(`/${token}/${row.original.id}`);
+      if (newTab) {
+        newTab.focus();
+      } else {
+        router.push(`/${token}/${row.original.id}`);
+      }
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">Open menu</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleGenerateShareToken}>
+          Share Song
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ActionsCell;