File size: 4,307 Bytes
f8b5d42 | 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 | import ConnectorImages from "@/components/DataConnectorOption/media";
import { MagnifyingGlass } from "@phosphor-icons/react";
import { useTranslation } from "react-i18next";
import GithubOptions from "./Connectors/Github";
import GitlabOptions from "./Connectors/Gitlab";
import YoutubeOptions from "./Connectors/Youtube";
import ConfluenceOptions from "./Connectors/Confluence";
import DrupalWikiOptions from "./Connectors/DrupalWiki";
import { useState } from "react";
import ConnectorOption from "./ConnectorOption";
import WebsiteDepthOptions from "./Connectors/WebsiteDepth";
import ObsidianOptions from "./Connectors/Obsidian";
export const getDataConnectors = (t) => ({
github: {
name: t("connectors.github.name"),
image: ConnectorImages.github,
description: t("connectors.github.description"),
options: <GithubOptions />,
},
gitlab: {
name: t("connectors.gitlab.name"),
image: ConnectorImages.gitlab,
description: t("connectors.gitlab.description"),
options: <GitlabOptions />,
},
"youtube-transcript": {
name: t("connectors.youtube.name"),
image: ConnectorImages.youtube,
description: t("connectors.youtube.description"),
options: <YoutubeOptions />,
},
"website-depth": {
name: t("connectors.website-depth.name"),
image: ConnectorImages.websiteDepth,
description: t("connectors.website-depth.description"),
options: <WebsiteDepthOptions />,
},
confluence: {
name: t("connectors.confluence.name"),
image: ConnectorImages.confluence,
description: t("connectors.confluence.description"),
options: <ConfluenceOptions />,
},
drupalwiki: {
name: "Drupal Wiki",
image: ConnectorImages.drupalwiki,
description: "Import Drupal Wiki spaces in a single click.",
options: <DrupalWikiOptions />,
},
obsidian: {
name: "Obsidian",
image: ConnectorImages.obsidian,
description: "Import Obsidian vault in a single click.",
options: <ObsidianOptions />,
},
});
export default function DataConnectors() {
const { t } = useTranslation();
const [selectedConnector, setSelectedConnector] = useState("github");
const [searchQuery, setSearchQuery] = useState("");
const DATA_CONNECTORS = getDataConnectors(t);
const filteredConnectors = Object.keys(DATA_CONNECTORS).filter((slug) =>
DATA_CONNECTORS[slug].name.toLowerCase().includes(searchQuery.toLowerCase())
);
return (
<div className="flex upload-modal -mt-10 relative min-h-[80vh] w-[70vw]">
<div className="w-full p-4 top-0 z-20">
<div className="w-full flex items-center sticky top-0 z-50">
<MagnifyingGlass
size={16}
weight="bold"
className="absolute left-4 z-30 text-white"
/>
<input
type="text"
placeholder={t("connectors.search-placeholder")}
className="border-none z-20 pl-10 h-[38px] rounded-full w-full px-4 py-1 text-sm border-2 border-slate-300/40 outline-none focus:outline-primary-button active:outline-primary-button outline-none placeholder:text-theme-settings-input-placeholder text-white bg-theme-settings-input-bg"
autoComplete="off"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
</div>
<div className="mt-2 flex flex-col gap-y-2">
{filteredConnectors.length > 0 ? (
filteredConnectors.map((slug, index) => (
<ConnectorOption
key={index}
slug={slug}
selectedConnector={selectedConnector}
setSelectedConnector={setSelectedConnector}
image={DATA_CONNECTORS[slug].image}
name={DATA_CONNECTORS[slug].name}
description={DATA_CONNECTORS[slug].description}
/>
))
) : (
<div className="text-white text-center mt-4">
{t("connectors.no-connectors")}
</div>
)}
</div>
</div>
<div className="xl:block hidden absolute left-1/2 top-0 bottom-0 w-[0.5px] bg-white/20 -translate-x-1/2"></div>
<div className="w-full p-4 top-0 text-white min-w-[500px]">
{DATA_CONNECTORS[selectedConnector].options}
</div>
</div>
);
}
|