-
Notifications
You must be signed in to change notification settings - Fork 122
/
FeatureDisplay.tsx
54 lines (51 loc) · 1.83 KB
/
FeatureDisplay.tsx
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
import React, { FC } from "react";
import { Button } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import { FeatureType } from "../../types/feature-type";
import createShortenedText from "../../helpers/createShortenedText";
import CopyText from "../base/CopytoClipboard";
import useMediaQuery from "../../hooks/useWindowQuery";
export const FeatureDisplay: FC<{
planFeatures: FeatureType[];
editFeatures: (any) => void;
removeFeature: (any) => void;
}> = ({ planFeatures, editFeatures, removeFeature }) => {
const windowWidth = useMediaQuery();
return (
<div className="grid gap-6 grid-cols-1 xl:grid-cols-4">
{planFeatures ? (
planFeatures.map((feature) => (
<div
key={feature.feature_id}
className="pt-2 pb-4 bg-primary-50 mt-2 mb-2 p-4 min-h-[152px]"
>
<div className="text-base text-card-text">
<div className="flex justify-between items-center">
{feature.feature_name}
<Button
size="small"
type="text"
icon={<DeleteOutlined />}
danger
onClick={() => removeFeature(feature.feature_id)}
/>
</div>
<div className="flex gap-1 text-card-grey font-menlo">
{" "}
<div>
{createShortenedText(feature.feature_id, windowWidth >= 2500)}
</div>
<CopyText showIcon onlyIcon textToCopy={feature.feature_id} />
</div>
</div>
<div />
<div className="text-card-grey">{feature.feature_description}</div>
</div>
))
) : (
<div className="text-card-grey">No features added</div>
)}
</div>
);
};
export default FeatureDisplay;