Spaces:
Runtime error
Runtime error
File size: 2,636 Bytes
56b6519 |
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 |
import { ReactElement, useState } from 'react';
import { useTranslation } from 'react-i18next';
import Card from '../../components/card/Card';
import { AuditTypes } from './CustomData/AuditTypes';
import { CustomFields } from './CustomData/CustomFields';
import { CustomSections } from './CustomData/CustomSections';
import { Languages } from './CustomData/Languages';
import { VulnerabilityCategories } from './CustomData/VulnerabilityCategories';
import { VulnerabilityTypes } from './CustomData/VulnerabilityTypes';
export const CustomData: React.FC = () => {
const { t } = useTranslation();
const cardOptions = [
{
id: 1,
title: t('languages'),
cardTitle: t('languageUsedInAuditsAndVuls'),
cardChildren: <Languages />,
},
{
id: 2,
title: t('auditTypes'),
cardTitle: t('auditTypesUsedInAudits'),
cardChildren: <AuditTypes />,
},
{
id: 4,
title: t('vulnerabilityTypes'),
cardTitle: t('createVulnerabilityTypes'),
cardChildren: <VulnerabilityTypes />,
},
{
id: 5,
title: t('vulnerabilityCategories'),
cardTitle: t('createVulnerabilityCategories'),
cardChildren: <VulnerabilityCategories />,
},
{
id: 6,
title: t('customFields'),
cardTitle: t('createAndManageCustomFields'),
cardChildren: <CustomFields />,
},
{
id: 7,
title: t('customSections'),
cardTitle: t('createCustomSections'),
cardChildren: <CustomSections />,
},
];
const [selected, setSelected] = useState(cardOptions[0].id);
const [cardContent, setCardContent] = useState(cardOptions[0]);
const handleOptionClick = (option: {
id: number;
title: string;
cardTitle: string;
cardChildren: ReactElement;
}) => {
setSelected(option.id);
setCardContent(option);
};
return (
<div>
<div className="resize bg-gray-900 rounded-lg ">
<div className="flex justify-left overflow-x-auto py-3 mx-4">
{cardOptions.map(option => (
<button
className={`${selected === option.id ? 'bg-gray-700' : 'bg-gray-800'} p-2 ml-4 rounded-lg hover:bg-gray-700`}
key={option.id}
onClick={() => handleOptionClick(option)}
type="button"
>
{option.title}
</button>
))}
</div>
</div>
<div className="mt-4">
{cardContent.id === 6 ? (
<CustomFields />
) : (
<Card title={cardContent.cardTitle}>{cardContent.cardChildren}</Card>
)}
</div>
</div>
);
};
|