Spaces:
Sleeping
Sleeping
File size: 2,077 Bytes
01d5a5d | 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 | 'use client';
import RightArrowIcon from '@/components/svgs/RightArrowIcon';
import classNames from 'classnames';
import { useState } from 'react';
interface Tool {
name: string;
description: string;
unreleased?: boolean;
}
interface IProps {
setChosenTool: (toolName: string) => void;
chosenTool: string;
}
const tools: Tool[] = [
{
name: 'Second Me Chat API',
description: 'Connect your application with external APIs and services.'
},
{
name: 'Bridge Mode API',
description: 'Transform data between different formats and structures.',
unreleased: true
}
];
const Tools = (props: IProps) => {
const { setChosenTool, chosenTool } = props;
const toggleTool = (toolName: string) => {
setChosenTool(toolName == chosenTool ? '' : toolName);
};
return (
<div className="p-4 flex flex-col gap-4 h-[200px]">
{tools.map((tool) => {
const isExpanded = chosenTool == tool.name;
return (
<div
key={tool.name}
className="border border-gray-200 rounded-lg shadow-sm bg-white overflow-hidden"
>
<div
className="flex justify-between items-center p-4 cursor-pointer"
onClick={() => (tool.unreleased ? null : toggleTool(tool.name))}
>
<div className="font-semibold text-gray-800 flex items-center">
{tool.name}
{tool.unreleased && (
<span className="ml-2 text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">
Coming Soon
</span>
)}
</div>
<div className={classNames('text-gray-500', isExpanded ? 'rotate-90' : 'rotate-0')}>
<RightArrowIcon />
</div>
</div>
{isExpanded && (
<div className="p-1 pl-4 border-t text-gray-600 border-gray-100">
{tool.description}
</div>
)}
</div>
);
})}
</div>
);
};
export default Tools;
|