File size: 5,447 Bytes
9470652 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | import ConnectionImage from "./DatabaseDialectImage";
import { useState } from "react";
import { IConnection, IConversation } from "../Library/types";
import { Cog6ToothIcon } from "@heroicons/react/24/outline";
import { useCreateConversation, useGetConnections } from "@/hooks";
import { Link, useNavigate } from "@tanstack/react-router";
export const ConnectionSelector = () => {
const navigate = useNavigate();
const [, setConversation] = useState<IConversation | null>();
const { data } = useGetConnections();
const createConnection = () => {
navigate({ to: "/connection/new" });
};
const { mutate } = useCreateConversation({
onSuccess(resp) {
setConversation({
id: resp.data.id,
name: "Untitled chat",
});
navigate({
to: "/chat/$conversationId",
params: { conversationId: resp.data.id },
});
},
});
function selectConnection(connection: IConnection) {
mutate({ id: connection.id, name: "Untitled chat" });
}
return (
<div className="bg-gray-900 w-full h-screen relative flex flex-col lg:mt-16">
<div className="flex flex-col justify-center items-center lg:mt-0">
<div className="w-full sm:w-3/4 md:w-3/4 rounded-xl p-6">
<div className="text-gray-50 text-md md:text-2xl font-semibold">
Select a connection
</div>
<div className="w-full grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-2 mt-4">
{data?.connections?.map((connection) => (
<div
key={connection.id}
className="hover:cursor-pointer md:hover:ring-2 ring-gray-600 border px-2 py-2 border-gray-700 aspect-square overflow-hidden rounded-lg flex flex-col justify-between hover:bg-gray-700 transition-all duration-75 w-auto max-w-xs"
onClick={() => selectConnection(connection)}
>
<div className="flex overflow-hidden w-full h-full justify-center items-center sm:mt-4">
<ConnectionImage
databaseDialect={connection.dialect}
name={connection.name}
/>
</div>
<div className="w-full flex justify-center items-center gap-2 text-gray-50 sm:-mt-2">
<div className="h-full lg:h-fit flex flex-col justify-center md:items-start w-full ">
<div className="text-xs md:text-sm xxl:text-md font-normal text-gray-400">
{connection.dialect.charAt(0).toUpperCase() +
connection.dialect.slice(1)}
</div>
<div className="text-base leading-tight xxl:text-xl font-normal">
{connection.name}
</div>
</div>
{/** ------ Connection Settings ------ */}
<div className="flex flex-col justify-end items-end h-full">
<Link
to={`/connection/$connectionId`}
params={{ connectionId: connection.id }}
onClick={(e) => {
e.stopPropagation(); // Prevent the click event from propagating to the parent container
}}
className="flex-none group w-10 h-10 p-1 flex justify-end items-end hover:bg-gray-600 rounded-md duration-100 transition-colors "
>
<Cog6ToothIcon className="text-gray-50 group-hover:-rotate-45 transition-transform duration-100" />
</Link>
</div>
</div>
</div>
))}
<div
className="hover:cursor-pointer md:hover:ring-2 ring-gray-600 border px-2 py-2 border-gray-700 aspect-square overflow-hidden rounded-lg flex flex-col justify-between hover:bg-gray-700 transition-all duration-75 w-full sm:w-auto sm:max-w-xs"
onClick={createConnection}
>
{/* Item to add new connection */}
<div className="flex overflow-hidden w-full justify-center items-center sm:mt-4">
<svg
className="h-full w-full text-gray-200"
stroke="currentColor"
fill="none"
viewBox="0 0 48 48"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 14v20c0 4.418 7.163 8 16 8 1.381 0 2.721-.087 4-.252M8 14c0 4.418 7.163 8 16 8s16-3.582 16-8M8 14c0-4.418 7.163-8 16-8s16 3.582 16 8m0 0v14m0-4c0 4.418-7.163 8-16 8S8 28.418 8 24m32 10v6m0 0v6m0-6h6m-6 0h-6"
/>
</svg>
</div>
<div className="w-full flex justify-center items-center gap-2 text-gray-50 sm:-mt-2 ">
<div className="h-full lg:h-fit flex flex-col justify-center md:items-start w-full">
<div className="text-xs md:text-sm xxl:text-md font-normal text-gray-400">
Add
</div>
<div className="text-base leading-tight xxl:text-xl font-normal">
New Connection
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
|