File size: 1,761 Bytes
e3278e4 |
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 |
import React, { useState } from 'react';
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { TextInput, Grid, Col } from "@tremor/react";
import { TrashIcon } from "@heroicons/react/outline";
interface KeyValueInputProps {
value?: Record<string, string>;
onChange?: (value: Record<string, string>) => void;
}
const KeyValueInput: React.FC<KeyValueInputProps> = ({ value = {}, onChange }) => {
const [pairs, setPairs] = useState<[string, string][]>(Object.entries(value));
const handleAdd = () => {
setPairs([...pairs, ['', '']]);
};
const handleRemove = (index: number) => {
const newPairs = pairs.filter((_, i) => i !== index);
setPairs(newPairs);
onChange?.(Object.fromEntries(newPairs));
};
const handleChange = (index: number, key: string, val: string) => {
const newPairs = [...pairs];
newPairs[index] = [key, val];
setPairs(newPairs);
onChange?.(Object.fromEntries(newPairs));
};
return (
<div>
{pairs.map(([key, val], index) => (
<Space key={index} style={{ display: 'flex', marginBottom: 8 }} align="start">
<TextInput
placeholder="Header Name"
value={key}
onChange={(e) => handleChange(index, e.target.value, val)}
/>
<TextInput
placeholder="Header Value"
value={val}
onChange={(e) => handleChange(index, key, e.target.value)}
/>
<MinusCircleOutlined onClick={() => handleRemove(index)} />
</Space>
))}
<Button type="dashed" onClick={handleAdd} icon={<PlusOutlined />}>
Add Header
</Button>
</div>
);
};
export default KeyValueInput;
|