Skip to content

Commit

Permalink
Refactor IntegrationGrid component
Browse files Browse the repository at this point in the history
  • Loading branch information
@n4ze3m
n4ze3m committed Jan 26, 2024
1 parent 4f9822f commit 24680b3
Show file tree
Hide file tree
Showing 2 changed files with 127 additions and 105 deletions.
96 changes: 96 additions & 0 deletions app/ui/src/components/Bot/Integration/IntegrationCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React from "react";
import { useDarkMode } from "../../../hooks/useDarkmode";
import { Link } from "react-router-dom";

type Prosp = {
href?: string;
onClick?: () => void;
logo: string;
name: string;
color: string;
textColor: string;
status?: string;
description: string;
};

export const IntegrationCard: React.FC<Prosp> = ({
href,
onClick,
logo,
name,
color,
textColor,
status,
description,
}) => {
const { mode } = useDarkMode();

return !href ? (
<div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222] dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50">
<button
// onClick={() => {
// setSelectedIntegration(integration);
// setOpen(true);
// }}
onClick={onClick}
>
<div className="mb-4">
<div className="flex items-center justify-between">
<img className="h-12 w-auto" src={logo} alt={name} />
<div className="ml-2 flex flex-shrink-0">
<p
className={`inline-flex rounded-md px-2 text-sm leading-5 border border-transparent uppercase tracking-widest dark:bg-[#232222] dark:text-[#fff] dark:border-[#232222] dark:hover:bg-[#232222] dark:hover:text-[#fff] dark:hover:border-[#232222]
`}
style={{
backgroundColor: mode !== "dark" ? color : undefined,
color: mode !== "dark" ? textColor : undefined,
borderColor:
mode !== "dark"
? color !== "#fff"
? color
: "#000"
: undefined,
}}
>
{status}
</p>
</div>
</div>
</div>
<div className="sm:flex sm:items-center">
<div className="text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
{name}
</h3>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
{description}
</p>
</div>
</div>
</button>
</div>
) : (
<Link
to={href}
className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222] dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50"
>
<div>
<div className="mb-4">
<div className="flex items-center justify-between">
<img className="h-12 w-auto" src={logo} alt={name} />
</div>
</div>
<div className="sm:flex sm:items-center">
<div className="text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
{name}
</h3>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
{description}
</p>
</div>
</div>
</div>
</Link>
);
};
136 changes: 31 additions & 105 deletions app/ui/src/components/Bot/Integration/IntegrationGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Modal } from "antd";
import React from "react";
import { IntegrationForm } from "./IntegrationForm";
import { Link, useParams } from "react-router-dom";
import { useDarkMode } from "../../../hooks/useDarkmode";
import { useParams } from "react-router-dom";
import { IntegrationCard } from "./IntegrationCard";

type Props = {
data: {
Expand Down Expand Up @@ -56,7 +56,6 @@ export const IntegrationGrid: React.FC<Props> = ({ data }) => {
textColor: string;
} | null>();
const param = useParams<{ id: string }>();
const { mode } = useDarkMode();
return (
<div className="px-4 sm:px-6 lg:px-8">
<div className="sm:flex sm:items-center">
Expand All @@ -72,110 +71,37 @@ export const IntegrationGrid: React.FC<Props> = ({ data }) => {
{/* GRID */}
<div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{data.map((integration) => (
<div className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222] dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50">
<div
onClick={() => {
setSelectedIntegration(integration);
setOpen(true);
}}
>
<div className="mb-4">
<div className="flex items-center justify-between">
<img
className="h-12 w-auto"
src={integration.logo}
alt={integration.name}
/>
<div className="ml-2 flex flex-shrink-0">
<p
className={`inline-flex rounded-md px-2 text-sm leading-5 border border-transparent uppercase tracking-widest dark:bg-[#232222] dark:text-[#fff] dark:border-[#232222] dark:hover:bg-[#232222] dark:hover:text-[#fff] dark:hover:border-[#232222]
`}
style={{
backgroundColor:
mode !== "dark" ? integration.color : undefined,
color:
mode !== "dark" ? integration.textColor : undefined,
borderColor:
mode !== "dark"
? integration.color !== "#fff"
? integration.color
: "#000"
: undefined,
}}
>
{integration.status}
</p>
</div>
</div>
</div>
<div className="sm:flex sm:items-center">
<div className="text-center sm:text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
{integration.name}
</h3>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
{integration.description}
</p>
</div>
</div>
</div>
</div>
<IntegrationCard
onClick={() => {
setSelectedIntegration(integration);
setOpen(true);
}}
logo={integration.logo}
name={integration.name}
color={integration.color}
textColor={integration.textColor}
status={integration.status}
description={integration.description}
/>
))}

<Link
to={`/bot/${param.id}/embed`}
className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222] dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50"
>
<div>
<div className="mb-4">
<div className="flex items-center justify-between">
<img
className="h-12 w-auto"
src="/providers/html.svg"
alt="HTML"
/>
</div>
</div>
<div className="sm:flex sm:items-center">
<div className="text-center sm:text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
HTML Embed
</h3>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
Embed your chatbot on your website or blog using HTML snippet.
</p>
</div>
</div>
</div>
</Link>

<Link
to={`/bot/${param.id}/integrations/api`}
className="relative group bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500 rounded-lg overflow-hidden border hover:shadow-lg transition-shadow duration-300 ease-in-out cursor-pointer dark:bg-[#0a0a0a] dark:border-[#232222] dark:hover:bg-[#1a1a1a] dark:hover:border-[#232222] hover:bg-gray-50"
>
<div>
<div className="mb-4">
<div className="flex items-center justify-between">
<img
className="h-12 w-auto"
src="/providers/api.svg"
alt="API"
/>
</div>
</div>
<div className="sm:flex sm:items-center">
<div className="text-center sm:text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-white">
API
</h3>
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
Customize your integration using our robust API. Connect and
expand the capabilities of your chatbot across platforms.
</p>
</div>
</div>
</div>
</Link>
<IntegrationCard
href={`/bot/${param.id}/embed`}
logo="/providers/html.svg"
name="HTML Embed"
color="#fff"
textColor="#000"
description="Embed your chatbot on your website or blog using HTML snippet."
/>

<IntegrationCard
href={`/bot/${param.id}/integrations/api`}
logo="/providers/api.svg"
name="API"
color="#fff"
textColor="#000"
description="Customize your integration using our robust API. Connect and expand the capabilities of your chatbot across platforms."
/>
</div>

{/* MODAL */}
Expand Down

0 comments on commit 24680b3

Please sign in to comment.