datastake-daf 0.6.243 → 0.6.245

package/src/@daf/core/components/EditForm/components/Smart/index.js

@@ -0,0 +1,93 @@
+import CustomIcon from "../../../Icon/CustomIcon.jsx";
+import { theme } from "antd";
+import { useState } from "react";
+import Widget from "../../../Dashboard/Widget/index.jsx";
+const { useToken } = theme;
+export default function Smart() {
+	const { token } = useToken();
+	const [isOpen, setIsOpen] = useState(false);
+	return (
+		<div
+			style={{
+				border: "1px solid #E5E7EB",
+				width: "100%",
+				borderRadius: "4px",
+				boxShadow:
+					"0px 1px 2px 0px #00000008, 0px 1px 6px -1px #00000005, 0px 2px 4px 0px #00000005",
+			}}
+		>
+			<div
+				style={{
+					display: "flex",
+					alignItems: "center",
+					gap: "8px",
+					padding: "8px",
+				}}
+				onClick={() => setIsOpen(!isOpen)}
+			>
+				<CustomIcon name="Lightning" size={16} color={token.colorPrimary7} />
+				<span style={{ marginRight: "auto" }}>Smart Help</span>
+				<div>
+					<CustomIcon
+						name="ChevronRight"
+						size={12}
+						color={token.colorPrimary7}
+						style={{
+							transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
+							transition: "transform 0.3s ease-in-out",
+						}}
+					/>
+				</div>
+			</div>
+			{isOpen && (
+				<div
+					style={{
+						padding: "8px",
+						display: "flex",
+						flexDirection: "column",
+						gap: "12px",
+					}}
+				>
+					<span
+						style={{
+							paddingLeft: "4px",
+							color: "#6C737F",
+							fontFamily: "SF UI Display",
+							fontWeight: "500",
+							fontStyle: "Medium",
+							fontSize: "14px",
+							leadingTrim: "NONE",
+							lineHeight: "20px",
+							letterSpacing: "0%",
+						}}
+					>
+						The information available here has been identified as matching the
+						requirements of this question.
+					</span>
+					<SmartWidget label="Operational Activities" icon="AimOutlined" link="Link" />
+					<SmartWidget label="Monitoring Activities" icon="Eye" link="Link" />
+					<SmartWidget label="Project Locations" icon="DashboardLocations" link="Link" />
+					<SmartWidget label="Documents & Media" icon="DashboardDocuments" link="Link" />
+				</div>
+			)}
+		</div>
+	);
+}
+
+function SmartWidget({ label, icon, link }) {
+	const { token } = useToken();
+	return (
+		<Widget noTitle className={"no-p-body p-xs"}>
+			<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+				<CustomIcon name={icon} size={16} color={"#384250"} />
+				<span style={{ marginRight: "auto" }}>{label}</span>
+				<CustomIcon
+					name={link}
+					size={16}
+					color={token.baseGray50}
+					style={{ cursor: "not-allowed" }}
+				/>
+			</div>
+		</Widget>
+	);
+}