diff --git a/app/details/page.tsx b/app/details/page.tsx index d13e531..936a2a5 100644 --- a/app/details/page.tsx +++ b/app/details/page.tsx @@ -2,82 +2,17 @@ import * as React from "react" import { type Metadata } from "next" -import * as motion from "framer-motion/client" - -import DataChangeAlertIllustration from "components/illustration/DataChangeAlert" -import DataSourceConnectionIllustration from "components/illustration/DataSourceConnection" -import DataThresholdAlertIllustration from "components/illustration/DataThresholdAlert" -import GroupDashboardIllustration from "components/illustration/GroupDashboard" -import TimelyUpdatesIllustration from "components/illustration/TimelyUpdates" -import { gridContainerVariants, gridItemVariants } from "utils/animationConfig" +import DetailsGallery from "components/DetailsGallery" import { generateMetadata } from "utils/seo" export const metadata: Metadata = generateMetadata({ - path: "/", + path: "/details/", title: "Details | SVG Animations", description: "SVG Animations with Framer Motion", }) const Details: React.FC = () => { - return ( - - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - - ) + return } export default Details diff --git a/app/others/page.tsx b/app/others/page.tsx index 12a9fb7..6299611 100644 --- a/app/others/page.tsx +++ b/app/others/page.tsx @@ -2,11 +2,7 @@ import * as React from "react" import { type Metadata } from "next" -import * as motion from "framer-motion/client" - -import SetAlertsIllustration from "components/illustration/SetAlerts" -import SlackAlertIllustration from "components/illustration/SlackAlert" -import { gridContainerVariants, gridItemVariants } from "utils/animationConfig" +import OthersGallery from "components/OthersGallery" import { generateMetadata } from "utils/seo" export const metadata: Metadata = generateMetadata({ @@ -16,27 +12,7 @@ export const metadata: Metadata = generateMetadata({ }) const Others: React.FC = () => { - return ( - - - - - - - - - ) + return } export default Others diff --git a/app/page.tsx b/app/page.tsx index d3f18d3..c533a97 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,17 +2,7 @@ import * as React from "react" import { type Metadata } from "next" -import * as motion from "framer-motion/client" - -import AlertsIllustration from "components/illustration/Alerts" -import DashboardIllustration from "components/illustration/Dashboard" -import DataExportIllustration from "components/illustration/DataExport" -import PermissionsIllustration from "components/illustration/Permissions" -import QueryBuilderIllustration from "components/illustration/QueryBuilder" -import SavedQueryIllustration from "components/illustration/SavedQuery" -import SharingIllustration from "components/illustration/Sharing" -import VisualizeIllustration from "components/illustration/Visualize" -import { gridContainerVariants, gridItemVariants } from "utils/animationConfig" +import HomeGallery from "components/HomeGallery" import { generateMetadata } from "utils/seo" export const metadata: Metadata = generateMetadata({ @@ -22,69 +12,7 @@ export const metadata: Metadata = generateMetadata({ }) const Home: React.FC = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ) + return } export default Home diff --git a/components/DetailsGallery.tsx b/components/DetailsGallery.tsx new file mode 100644 index 0000000..77513c1 --- /dev/null +++ b/components/DetailsGallery.tsx @@ -0,0 +1,156 @@ +"use client" +import * as React from "react" + +import { AnimatePresence } from "framer-motion" +import * as motion from "framer-motion/client" + +import ExpandButton from "components/ExpandButton" +import DataChangeAlertIllustration from "components/illustration/DataChangeAlert" +import DataSourceConnectionIllustration from "components/illustration/DataSourceConnection" +import DataThresholdAlertIllustration from "components/illustration/DataThresholdAlert" +import GroupDashboardIllustration from "components/illustration/GroupDashboard" +import TimelyUpdatesIllustration from "components/illustration/TimelyUpdates" +import { gridContainerVariants, gridItemVariants } from "utils/animationConfig" + +const DetailsGallery: React.FC = () => { + const [isOpen, setIsOpen] = React.useState(false) + const [content, setContent] = React.useState(null) + + React.useEffect(() => { + const handleEsc = (event: KeyboardEvent): void => { + if (event.key === "Escape") { + setIsOpen(false) + setContent(null) + } + } + + if (isOpen) { + document.body.style.overflowY = "hidden" + document.addEventListener("keydown", handleEsc) + } + + return () => { + document.body.style.overflowY = "unset" + document.removeEventListener("keydown", handleEsc) + } + }, [isOpen, setIsOpen]) + + return ( + <> + + +
+
+ + { + setIsOpen(!isOpen) + setContent() + }} + /> +
+
+ + +
+
+ + { + setIsOpen(!isOpen) + setContent() + }} + /> +
+
+ + +
+
+ + { + setIsOpen(!isOpen) + setContent() + }} + /> +
+
+ + +
+
+ + { + setIsOpen(!isOpen) + setContent() + }} + /> +
+
+ + +
+
+ + { + setIsOpen(!isOpen) + setContent() + }} + /> +
+
+ + + + + {isOpen && ( + + {content} + { + setIsOpen(!isOpen) + setContent(null) + }} + /> + + )} + + + ) +} + +export default DetailsGallery diff --git a/components/HomeGallery.tsx b/components/HomeGallery.tsx new file mode 100644 index 0000000..b61f0c2 --- /dev/null +++ b/components/HomeGallery.tsx @@ -0,0 +1,191 @@ +"use client" +import * as React from "react" + +import { AnimatePresence } from "framer-motion" +import * as motion from "framer-motion/client" + +import ExpandButton from "components/ExpandButton" +import AlertsIllustration from "components/illustration/Alerts" +import DashboardIllustration from "components/illustration/Dashboard" +import DataExportIllustration from "components/illustration/DataExport" +import PermissionsIllustration from "components/illustration/Permissions" +import QueryBuilderIllustration from "components/illustration/QueryBuilder" +import SavedQueryIllustration from "components/illustration/SavedQuery" +import SharingIllustration from "components/illustration/Sharing" +import VisualizeIllustration from "components/illustration/Visualize" +import { gridContainerVariants, gridItemVariants } from "utils/animationConfig" + +const HomeGallery: React.FC = () => { + const [isOpen, setIsOpen] = React.useState(false) + const [content, setContent] = React.useState(null) + + React.useEffect(() => { + const handleEsc = (event: KeyboardEvent): void => { + if (event.key === "Escape") { + setIsOpen(false) + setContent(null) + } + } + + if (isOpen) { + document.body.style.overflowY = "hidden" + document.addEventListener("keydown", handleEsc) + } + + return () => { + document.body.style.overflowY = "unset" + document.removeEventListener("keydown", handleEsc) + } + }, [isOpen, setIsOpen]) + + return ( + <> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + + {isOpen && ( + + {content} + { + setIsOpen(!isOpen) + setContent(null) + }} + /> + + )} + + + ) +} + +export default HomeGallery diff --git a/components/OthersGallery.tsx b/components/OthersGallery.tsx new file mode 100644 index 0000000..11609a1 --- /dev/null +++ b/components/OthersGallery.tsx @@ -0,0 +1,94 @@ +"use client" +import * as React from "react" + +import { AnimatePresence } from "framer-motion" +import * as motion from "framer-motion/client" + +import ExpandButton from "components/ExpandButton" +import SetAlertsIllustration from "components/illustration/SetAlerts" +import SlackAlertIllustration from "components/illustration/SlackAlert" +import { gridContainerVariants, gridItemVariants } from "utils/animationConfig" + +const OthersGallery: React.FC = () => { + const [isOpen, setIsOpen] = React.useState(false) + const [content, setContent] = React.useState(null) + + React.useEffect(() => { + const handleEsc = (event: KeyboardEvent): void => { + if (event.key === "Escape") { + setIsOpen(false) + setContent(null) + } + } + + if (isOpen) { + document.body.style.overflowY = "hidden" + document.addEventListener("keydown", handleEsc) + } + + return () => { + document.body.style.overflowY = "unset" + document.removeEventListener("keydown", handleEsc) + } + }, [isOpen, setIsOpen]) + + return ( + <> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + { + setIsOpen(!isOpen) + setContent() + }} + /> + + + + + {isOpen && ( + + {content} + { + setIsOpen(!isOpen) + setContent(null) + }} + /> + + )} + + + ) +} + +export default OthersGallery diff --git a/components/illustration/Alerts.tsx b/components/illustration/Alerts.tsx index 126e2f8..534ea52 100644 --- a/components/illustration/Alerts.tsx +++ b/components/illustration/Alerts.tsx @@ -3,14 +3,10 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const Alerts: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const Alerts: React.FC<{ isExpanded?: boolean }> = ({ isExpanded = false }) => { const controls = useAnimation() const backgroundVariants = { @@ -41,627 +37,612 @@ const Alerts: React.FC = () => { } return ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/Dashboard.tsx b/components/illustration/Dashboard.tsx index 51767a7..a58a5de 100644 --- a/components/illustration/Dashboard.tsx +++ b/components/illustration/Dashboard.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const Dashboard: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const Dashboard: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const backgroundVariants = { @@ -36,479 +34,464 @@ const Dashboard: React.FC = () => { } return ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/DataChangeAlert.tsx b/components/illustration/DataChangeAlert.tsx index 3647053..470994e 100644 --- a/components/illustration/DataChangeAlert.tsx +++ b/components/illustration/DataChangeAlert.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const DataChangeAlert: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const DataChangeAlert: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const rectangleVariants = { @@ -36,310 +34,295 @@ const DataChangeAlert: React.FC = () => { } return ( -
-
- + + - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ rx="15" + fill="#F1F1F1" + initial={"visible"} + animate={controls} + variants={rectangleVariants} + transition={{ duration: 0.7, ease: "easeOut" }} + /> + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/DataExport.tsx b/components/illustration/DataExport.tsx index b28f82b..088100f 100644 --- a/components/illustration/DataExport.tsx +++ b/components/illustration/DataExport.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const DataExport: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const DataExport: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const backgroundVariants = { @@ -41,580 +39,565 @@ const DataExport: React.FC = () => { } return ( -
-
- - - - - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + - - - - - - - - - - - - - - - + + + + + - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/DataSourceConnection.tsx b/components/illustration/DataSourceConnection.tsx index 0a18fb8..13aef15 100644 --- a/components/illustration/DataSourceConnection.tsx +++ b/components/illustration/DataSourceConnection.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const DataSourceConnection: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const DataSourceConnection: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const contentVariants = { @@ -41,103 +39,88 @@ const DataSourceConnection: React.FC = () => { } return ( -
-
- - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+
+ + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/DataThresholdAlert.tsx b/components/illustration/DataThresholdAlert.tsx index f21015b..bfbffb0 100644 --- a/components/illustration/DataThresholdAlert.tsx +++ b/components/illustration/DataThresholdAlert.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const DataThresholdAlert: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const DataThresholdAlert: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const rectangleVariants = { @@ -31,114 +29,99 @@ const DataThresholdAlert: React.FC = () => { } return ( -
-
- + + - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ rx="15" + fill="#F1F1F1" + initial={"visible"} + animate={controls} + variants={rectangleVariants} + transition={{ duration: 0.7, ease: "easeOut" }} + /> + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/GroupDashboard.tsx b/components/illustration/GroupDashboard.tsx index 2b0eb6b..2fe73b5 100644 --- a/components/illustration/GroupDashboard.tsx +++ b/components/illustration/GroupDashboard.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const GroupDashboard: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const GroupDashboard: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const circleVariants = { @@ -36,366 +34,351 @@ const GroupDashboard: React.FC = () => { } return ( -
-
- + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ rx="15" + fill="#F1F1F1" + initial={"visible"} + animate={controls} + variants={rectangleVariants} + transition={{ duration: 0.7, ease: "easeOut" }} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/Permissions.tsx b/components/illustration/Permissions.tsx index e783bd7..b4175d6 100644 --- a/components/illustration/Permissions.tsx +++ b/components/illustration/Permissions.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const Permissions: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const Permissions: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const backgroundVariants = { @@ -36,590 +34,575 @@ const Permissions: React.FC = () => { } return ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ + + - - - - + + + + + + - + + - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} + + + + + + + - { - playAnimation() - }} + -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/QueryBuilder.tsx b/components/illustration/QueryBuilder.tsx index 28c75ef..a59189b 100644 --- a/components/illustration/QueryBuilder.tsx +++ b/components/illustration/QueryBuilder.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const QueryBuilder: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const QueryBuilder: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const backgroundVariants = { @@ -36,172 +34,23 @@ const QueryBuilder: React.FC = () => { } return ( -
-
- - - - - - - - - - - - - - - - - - - - - +
+ + + @@ -209,345 +58,111 @@ const QueryBuilder: React.FC = () => { initial={"visible"} animate={controls} variants={contentVariants} - transition={{ duration: 0.3, ease: "easeOut", delay: 2.8 }} - d="M162.148 203V193.228H168.434V194.866H163.996V197.232H167.86V198.87H163.996V203H162.148ZM170.732 194.628C170.359 194.628 170.088 194.544 169.92 194.376C169.761 194.208 169.682 193.993 169.682 193.732V193.452C169.682 193.191 169.761 192.976 169.92 192.808C170.088 192.64 170.359 192.556 170.732 192.556C171.096 192.556 171.362 192.64 171.53 192.808C171.698 192.976 171.782 193.191 171.782 193.452V193.732C171.782 193.993 171.698 194.208 171.53 194.376C171.362 194.544 171.096 194.628 170.732 194.628ZM169.836 195.692H171.628V203H169.836V195.692ZM175.217 203C174.601 203 174.149 202.846 173.859 202.538C173.57 202.23 173.425 201.796 173.425 201.236V192.64H175.217V201.572H176.183V203H175.217ZM179.474 203C178.858 203 178.387 202.841 178.06 202.524C177.743 202.197 177.584 201.735 177.584 201.138V197.12H176.506V195.692H177.066C177.337 195.692 177.519 195.631 177.612 195.51C177.715 195.379 177.766 195.188 177.766 194.936V193.69H179.376V195.692H180.874V197.12H179.376V201.572H180.762V203H179.474ZM185.048 203.168C184.506 203.168 184.021 203.079 183.592 202.902C183.172 202.715 182.812 202.459 182.514 202.132C182.224 201.796 182 201.395 181.842 200.928C181.683 200.452 181.604 199.92 181.604 199.332C181.604 198.753 181.678 198.231 181.828 197.764C181.986 197.297 182.21 196.901 182.5 196.574C182.789 196.238 183.144 195.981 183.564 195.804C183.984 195.617 184.46 195.524 184.992 195.524C185.561 195.524 186.056 195.622 186.476 195.818C186.896 196.014 187.241 196.28 187.512 196.616C187.782 196.952 187.983 197.344 188.114 197.792C188.254 198.231 188.324 198.702 188.324 199.206V199.794H183.466V199.976C183.466 200.508 183.615 200.937 183.914 201.264C184.212 201.581 184.656 201.74 185.244 201.74C185.692 201.74 186.056 201.647 186.336 201.46C186.625 201.273 186.882 201.035 187.106 200.746L188.072 201.824C187.773 202.244 187.362 202.575 186.84 202.818C186.326 203.051 185.729 203.168 185.048 203.168ZM185.02 196.868C184.544 196.868 184.166 197.027 183.886 197.344C183.606 197.661 183.466 198.072 183.466 198.576V198.688H186.462V198.562C186.462 198.058 186.336 197.652 186.084 197.344C185.841 197.027 185.486 196.868 185.02 196.868ZM189.62 203V195.692H191.412V197.204H191.482C191.529 197.008 191.599 196.821 191.692 196.644C191.795 196.457 191.926 196.294 192.084 196.154C192.243 196.014 192.43 195.902 192.644 195.818C192.868 195.734 193.125 195.692 193.414 195.692H193.806V197.386H193.246C192.64 197.386 192.182 197.475 191.874 197.652C191.566 197.829 191.412 198.119 191.412 198.52V203H189.62ZM197.23 203.168C196.53 203.168 195.942 203.051 195.466 202.818C194.99 202.575 194.57 202.244 194.206 201.824L195.298 200.76C195.569 201.068 195.863 201.311 196.18 201.488C196.507 201.665 196.88 201.754 197.3 201.754C197.73 201.754 198.038 201.679 198.224 201.53C198.42 201.381 198.518 201.175 198.518 200.914C198.518 200.699 198.448 200.531 198.308 200.41C198.178 200.279 197.949 200.191 197.622 200.144L196.894 200.046C196.101 199.943 195.494 199.719 195.074 199.374C194.664 199.019 194.458 198.506 194.458 197.834C194.458 197.479 194.524 197.162 194.654 196.882C194.785 196.593 194.972 196.35 195.214 196.154C195.457 195.949 195.746 195.795 196.082 195.692C196.428 195.58 196.81 195.524 197.23 195.524C197.585 195.524 197.898 195.552 198.168 195.608C198.448 195.655 198.7 195.729 198.924 195.832C199.148 195.925 199.354 196.047 199.54 196.196C199.727 196.336 199.909 196.495 200.086 196.672L199.036 197.722C198.822 197.498 198.565 197.311 198.266 197.162C197.968 197.013 197.641 196.938 197.286 196.938C196.894 196.938 196.61 197.008 196.432 197.148C196.264 197.288 196.18 197.47 196.18 197.694C196.18 197.937 196.25 198.123 196.39 198.254C196.54 198.375 196.787 198.464 197.132 198.52L197.874 198.618C199.452 198.842 200.24 199.561 200.24 200.774C200.24 201.129 200.166 201.455 200.016 201.754C199.876 202.043 199.676 202.295 199.414 202.51C199.153 202.715 198.836 202.879 198.462 203C198.098 203.112 197.688 203.168 197.23 203.168Z" + transition={{ duration: 0.3, ease: "easeOut", delay: 1.3 }} + d="M52.4 47.888H52.89V48.994H52.932C53.0907 48.6487 53.3567 48.35 53.73 48.098C54.1033 47.846 54.5887 47.72 55.186 47.72C56.1193 47.72 56.8427 48.0373 57.356 48.672C57.8787 49.2973 58.14 50.2213 58.14 51.444C58.14 52.6667 57.8787 53.5953 57.356 54.23C56.8427 54.8553 56.1193 55.168 55.186 55.168C54.5887 55.168 54.1033 55.042 53.73 54.79C53.3567 54.5287 53.0907 54.23 52.932 53.894H52.89V57.8H52.4V47.888ZM55.116 54.72C55.9093 54.72 56.5207 54.4633 56.95 53.95C57.3887 53.4367 57.608 52.7367 57.608 51.85V51.038C57.608 50.1513 57.3887 49.4513 56.95 48.938C56.5207 48.4153 55.9093 48.154 55.116 48.154C54.8173 48.154 54.5327 48.2007 54.262 48.294C53.9913 48.378 53.7533 48.4993 53.548 48.658C53.352 48.8073 53.1933 48.994 53.072 49.218C52.9507 49.4327 52.89 49.6707 52.89 49.932V52.928C52.89 53.1987 52.9507 53.446 53.072 53.67C53.1933 53.8847 53.352 54.0713 53.548 54.23C53.7533 54.3887 53.9913 54.51 54.262 54.594C54.5327 54.678 54.8173 54.72 55.116 54.72ZM60.0634 55V47.888H60.5534V49.134H60.6094C60.7587 48.798 61.0014 48.5087 61.3374 48.266C61.6734 48.014 62.1587 47.888 62.7934 47.888H63.3254V48.35H62.7094C62.42 48.35 62.1447 48.3873 61.8834 48.462C61.622 48.5367 61.3934 48.6487 61.1974 48.798C61.0014 48.9473 60.8427 49.134 60.7214 49.358C60.6094 49.5727 60.5534 49.8247 60.5534 50.114V55H60.0634ZM67.0312 55.168C66.0979 55.168 65.3605 54.8507 64.8192 54.216C64.2872 53.5813 64.0212 52.6573 64.0212 51.444C64.0212 50.2213 64.2872 49.2973 64.8192 48.672C65.3605 48.0373 66.0979 47.72 67.0312 47.72C67.9645 47.72 68.6972 48.0373 69.2292 48.672C69.7705 49.2973 70.0412 50.2213 70.0412 51.444C70.0412 52.6573 69.7705 53.5813 69.2292 54.216C68.6972 54.8507 67.9645 55.168 67.0312 55.168ZM67.0312 54.734C67.8245 54.734 68.4359 54.4773 68.8652 53.964C69.2945 53.4413 69.5092 52.7273 69.5092 51.822V51.066C69.5092 50.1513 69.2945 49.4373 68.8652 48.924C68.4359 48.4107 67.8245 48.154 67.0312 48.154C66.2379 48.154 65.6265 48.4107 65.1972 48.924C64.7679 49.4373 64.5532 50.1513 64.5532 51.066V51.822C64.5532 52.7273 64.7679 53.4413 65.1972 53.964C65.6265 54.4773 66.2379 54.734 67.0312 54.734ZM76.6064 53.894H76.5644C76.4058 54.23 76.1398 54.5287 75.7664 54.79C75.3931 55.042 74.9078 55.168 74.3104 55.168C73.3771 55.168 72.6491 54.8553 72.1264 54.23C71.6131 53.5953 71.3564 52.6667 71.3564 51.444C71.3564 50.2213 71.6131 49.2973 72.1264 48.672C72.6491 48.0373 73.3771 47.72 74.3104 47.72C74.9078 47.72 75.3931 47.846 75.7664 48.098C76.1398 48.35 76.4058 48.6487 76.5644 48.994H76.6064V44.64H77.0964V55H76.6064V53.894ZM74.3804 54.72C74.6791 54.72 74.9638 54.678 75.2344 54.594C75.5051 54.51 75.7384 54.3887 75.9344 54.23C76.1398 54.0713 76.3031 53.8847 76.4244 53.67C76.5458 53.446 76.6064 53.1987 76.6064 52.928V49.932C76.6064 49.6707 76.5458 49.4327 76.4244 49.218C76.3031 48.994 76.1398 48.8073 75.9344 48.658C75.7384 48.4993 75.5051 48.378 75.2344 48.294C74.9638 48.2007 74.6791 48.154 74.3804 48.154C73.5871 48.154 72.9711 48.4153 72.5324 48.938C72.1031 49.4513 71.8884 50.1513 71.8884 51.038V51.85C71.8884 52.7367 72.1031 53.4367 72.5324 53.95C72.9711 54.4633 73.5871 54.72 74.3804 54.72ZM84.1578 53.908H84.1018C84.0365 54.0667 83.9431 54.2253 83.8218 54.384C83.7098 54.5333 83.5651 54.6687 83.3878 54.79C83.2198 54.902 83.0145 54.9907 82.7718 55.056C82.5291 55.1307 82.2491 55.168 81.9318 55.168C81.1478 55.168 80.5458 54.9393 80.1258 54.482C79.7058 54.0153 79.4958 53.3387 79.4958 52.452V47.888H79.9858V52.368C79.9858 53.1893 80.1631 53.7913 80.5178 54.174C80.8725 54.5473 81.3811 54.734 82.0438 54.734C82.3145 54.734 82.5758 54.6967 82.8278 54.622C83.0891 54.5473 83.3178 54.44 83.5138 54.3C83.7098 54.1507 83.8638 53.964 83.9758 53.74C84.0971 53.5067 84.1578 53.236 84.1578 52.928V47.888H84.6478V55H84.1578V53.908ZM89.5701 55.168C88.6181 55.168 87.8761 54.8507 87.3441 54.216C86.8214 53.5813 86.5601 52.6573 86.5601 51.444C86.5601 50.2213 86.8214 49.2973 87.3441 48.672C87.8761 48.0373 88.6181 47.72 89.5701 47.72C90.1674 47.72 90.6621 47.8553 91.0541 48.126C91.4461 48.3873 91.7494 48.742 91.9641 49.19L91.5581 49.4C91.3528 48.9987 91.0914 48.6907 90.7741 48.476C90.4661 48.2613 90.0648 48.154 89.5701 48.154C88.7674 48.154 88.1514 48.4153 87.7221 48.938C87.3021 49.4607 87.0921 50.1607 87.0921 51.038V51.85C87.0921 52.7273 87.3021 53.4273 87.7221 53.95C88.1514 54.4727 88.7674 54.734 89.5701 54.734C90.1021 54.734 90.5361 54.6267 90.8721 54.412C91.2174 54.188 91.4974 53.88 91.7121 53.488L92.0761 53.74C91.8428 54.1693 91.5254 54.5147 91.1241 54.776C90.7228 55.0373 90.2048 55.168 89.5701 55.168ZM94.6691 55C94.2677 55 94.0671 54.804 94.0671 54.412V48.322H92.7791V47.888H93.7031C93.8617 47.888 93.9644 47.8553 94.0111 47.79C94.0671 47.7247 94.0951 47.6127 94.0951 47.454V45.872H94.5571V47.888H96.2231V48.322H94.5571V54.566H96.1111V55H94.6691Z" fill="black" /> - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -555,263 +170,624 @@ const QueryBuilder: React.FC = () => { initial={"visible"} animate={controls} variants={contentVariants} - transition={{ duration: 0.3, ease: "easeOut", delay: 2.8 }} - d="M168.378 420.488H168.322C168.238 420.964 167.972 421.365 167.524 421.692C167.085 422.009 166.497 422.168 165.76 422.168C165.181 422.168 164.645 422.061 164.15 421.846C163.665 421.631 163.24 421.314 162.876 420.894C162.521 420.465 162.241 419.937 162.036 419.312C161.831 418.687 161.728 417.963 161.728 417.142C161.728 416.321 161.831 415.597 162.036 414.972C162.251 414.337 162.549 413.805 162.932 413.376C163.315 412.947 163.772 412.62 164.304 412.396C164.836 412.172 165.429 412.06 166.082 412.06C166.959 412.06 167.706 412.251 168.322 412.634C168.938 413.017 169.423 413.567 169.778 414.286L168.28 415.168C168.103 414.748 167.837 414.398 167.482 414.118C167.137 413.838 166.67 413.698 166.082 413.698C165.354 413.698 164.771 413.922 164.332 414.37C163.903 414.809 163.688 415.462 163.688 416.33V417.898C163.688 418.757 163.907 419.41 164.346 419.858C164.785 420.306 165.373 420.53 166.11 420.53C166.399 420.53 166.67 420.497 166.922 420.432C167.174 420.357 167.393 420.25 167.58 420.11C167.767 419.97 167.916 419.797 168.028 419.592C168.14 419.387 168.196 419.144 168.196 418.864V418.234H166.278V416.68H169.974V422H168.378V420.488ZM171.723 422V414.692H173.515V416.204H173.585C173.631 416.008 173.701 415.821 173.795 415.644C173.897 415.457 174.028 415.294 174.187 415.154C174.345 415.014 174.532 414.902 174.747 414.818C174.971 414.734 175.227 414.692 175.517 414.692H175.909V416.386H175.349C174.742 416.386 174.285 416.475 173.977 416.652C173.669 416.829 173.515 417.119 173.515 417.52V422H171.723ZM179.769 422.168C179.246 422.168 178.775 422.079 178.355 421.902C177.944 421.725 177.589 421.468 177.291 421.132C177.001 420.796 176.777 420.395 176.619 419.928C176.46 419.452 176.381 418.92 176.381 418.332C176.381 417.744 176.46 417.217 176.619 416.75C176.777 416.283 177.001 415.887 177.291 415.56C177.589 415.224 177.944 414.967 178.355 414.79C178.775 414.613 179.246 414.524 179.769 414.524C180.291 414.524 180.763 414.613 181.183 414.79C181.603 414.967 181.957 415.224 182.247 415.56C182.545 415.887 182.774 416.283 182.933 416.75C183.091 417.217 183.171 417.744 183.171 418.332C183.171 418.92 183.091 419.452 182.933 419.928C182.774 420.395 182.545 420.796 182.247 421.132C181.957 421.468 181.603 421.725 181.183 421.902C180.763 422.079 180.291 422.168 179.769 422.168ZM179.769 420.726C180.245 420.726 180.618 420.581 180.889 420.292C181.159 420.003 181.295 419.578 181.295 419.018V417.66C181.295 417.109 181.159 416.689 180.889 416.4C180.618 416.111 180.245 415.966 179.769 415.966C179.302 415.966 178.933 416.111 178.663 416.4C178.392 416.689 178.257 417.109 178.257 417.66V419.018C178.257 419.578 178.392 420.003 178.663 420.292C178.933 420.581 179.302 420.726 179.769 420.726ZM188.847 420.782H188.777C188.712 420.969 188.623 421.146 188.511 421.314C188.409 421.473 188.273 421.617 188.105 421.748C187.947 421.879 187.751 421.981 187.517 422.056C187.293 422.131 187.032 422.168 186.733 422.168C185.977 422.168 185.399 421.921 184.997 421.426C184.596 420.931 184.395 420.227 184.395 419.312V414.692H186.187V419.13C186.187 419.634 186.285 420.021 186.481 420.292C186.677 420.553 186.99 420.684 187.419 420.684C187.597 420.684 187.769 420.661 187.937 420.614C188.115 420.567 188.269 420.497 188.399 420.404C188.53 420.301 188.637 420.18 188.721 420.04C188.805 419.891 188.847 419.718 188.847 419.522V414.692H190.639V422H188.847V420.782ZM192.43 414.692H194.222V415.896H194.278C194.408 415.476 194.656 415.145 195.02 414.902C195.384 414.65 195.808 414.524 196.294 414.524C197.227 414.524 197.936 414.855 198.422 415.518C198.916 416.171 199.164 417.109 199.164 418.332C199.164 419.564 198.916 420.511 198.422 421.174C197.936 421.837 197.227 422.168 196.294 422.168C195.808 422.168 195.384 422.042 195.02 421.79C194.665 421.538 194.418 421.202 194.278 420.782H194.222V424.8H192.43V414.692ZM195.72 420.684C196.186 420.684 196.564 420.53 196.854 420.222C197.143 419.914 197.288 419.499 197.288 418.976V417.716C197.288 417.193 197.143 416.778 196.854 416.47C196.564 416.153 196.186 415.994 195.72 415.994C195.29 415.994 194.931 416.101 194.642 416.316C194.362 416.531 194.222 416.815 194.222 417.17V419.494C194.222 419.877 194.362 420.171 194.642 420.376C194.931 420.581 195.29 420.684 195.72 420.684ZM203.685 412.228H208.207C208.608 412.228 208.967 412.289 209.285 412.41C209.611 412.531 209.887 412.699 210.111 412.914C210.335 413.129 210.503 413.395 210.615 413.712C210.736 414.02 210.797 414.361 210.797 414.734C210.797 415.107 210.745 415.425 210.643 415.686C210.549 415.938 210.419 416.148 210.251 416.316C210.092 416.484 209.905 416.61 209.691 416.694C209.485 416.778 209.271 416.825 209.047 416.834V416.918C209.261 416.918 209.49 416.96 209.733 417.044C209.985 417.128 210.213 417.263 210.419 417.45C210.633 417.627 210.811 417.861 210.951 418.15C211.091 418.43 211.161 418.78 211.161 419.2C211.161 419.592 211.095 419.961 210.965 420.306C210.843 420.642 210.671 420.936 210.447 421.188C210.223 421.44 209.957 421.641 209.649 421.79C209.341 421.93 209.005 422 208.641 422H203.685V412.228ZM205.533 420.432H208.109C208.463 420.432 208.739 420.343 208.935 420.166C209.131 419.979 209.229 419.713 209.229 419.368V418.892C209.229 418.547 209.131 418.281 208.935 418.094C208.739 417.907 208.463 417.814 208.109 417.814H205.533V420.432ZM205.533 416.302H207.815C208.151 416.302 208.412 416.213 208.599 416.036C208.785 415.849 208.879 415.593 208.879 415.266V414.832C208.879 414.505 208.785 414.253 208.599 414.076C208.412 413.889 208.151 413.796 207.815 413.796H205.533V416.302ZM216.933 414.692H218.613L215.673 423.302C215.58 423.563 215.472 423.787 215.351 423.974C215.239 424.17 215.104 424.329 214.945 424.45C214.786 424.571 214.595 424.66 214.371 424.716C214.147 424.772 213.886 424.8 213.587 424.8H212.509V423.372H213.825L214.161 422.35L211.543 414.692H213.321L214.595 418.556L215.071 420.404H215.155L215.659 418.556L216.933 414.692Z" + transition={{ duration: 0.3, ease: "easeOut", delay: 1.3 }} + d="M56.488 217.192C55.0907 217.192 54.0027 216.712 53.224 215.752C52.456 214.781 52.072 213.336 52.072 211.416C52.072 209.496 52.456 208.056 53.224 207.096C54.0027 206.125 55.0907 205.64 56.488 205.64C57.8853 205.64 58.968 206.125 59.736 207.096C60.5147 208.056 60.904 209.496 60.904 211.416C60.904 213.336 60.5147 214.781 59.736 215.752C58.968 216.712 57.8853 217.192 56.488 217.192ZM56.488 216.664C57.6507 216.664 58.568 216.259 59.24 215.448C59.9227 214.637 60.264 213.453 60.264 211.896V210.936C60.264 209.379 59.9227 208.195 59.24 207.384C58.568 206.573 57.6507 206.168 56.488 206.168C55.3253 206.168 54.4027 206.573 53.72 207.384C53.048 208.195 52.712 209.379 52.712 210.936V211.896C52.712 213.453 53.048 214.637 53.72 215.448C54.4027 216.259 55.3253 216.664 56.488 216.664ZM63.2488 217V208.872H63.8088V210.296H63.8728C64.0434 209.912 64.3208 209.581 64.7048 209.304C65.0888 209.016 65.6434 208.872 66.3688 208.872H66.9768V209.4H66.2728C65.9421 209.4 65.6274 209.443 65.3288 209.528C65.0301 209.613 64.7688 209.741 64.5448 209.912C64.3208 210.083 64.1394 210.296 64.0008 210.552C63.8728 210.797 63.8088 211.085 63.8088 211.416V217H63.2488ZM73.756 217C73.3187 217 73.0893 216.776 73.068 216.328V215.736H73.004C72.812 216.152 72.508 216.499 72.092 216.776C71.676 217.053 71.116 217.192 70.412 217.192C69.5693 217.192 68.9187 216.989 68.46 216.584C68.0013 216.179 67.772 215.608 67.772 214.872C67.772 214.52 67.8253 214.2 67.932 213.912C68.0387 213.624 68.2147 213.379 68.46 213.176C68.716 212.963 69.0413 212.803 69.436 212.696C69.8413 212.579 70.3373 212.52 70.924 212.52H73.052V211.432C73.052 210.664 72.8653 210.099 72.492 209.736C72.1187 209.363 71.564 209.176 70.828 209.176C69.6867 209.176 68.8973 209.656 68.46 210.616L68.06 210.344C68.284 209.843 68.6147 209.443 69.052 209.144C69.4893 208.835 70.0867 208.68 70.844 208.68C71.7507 208.68 72.4387 208.915 72.908 209.384C73.3773 209.843 73.612 210.504 73.612 211.368V216.504H74.86V217H73.756ZM70.46 216.696C70.812 216.696 71.1427 216.653 71.452 216.568C71.772 216.472 72.0493 216.339 72.284 216.168C72.5187 215.997 72.7053 215.784 72.844 215.528C72.9827 215.272 73.052 214.973 73.052 214.632V212.968H70.924C70.028 212.968 69.3773 213.123 68.972 213.432C68.5667 213.731 68.364 214.131 68.364 214.632V215.08C68.364 215.613 68.556 216.019 68.94 216.296C69.3347 216.563 69.8413 216.696 70.46 216.696ZM76.4994 217V208.872H77.0594V210.12H77.1074C77.2674 209.725 77.5447 209.389 77.9394 209.112C78.3447 208.824 78.8994 208.68 79.6034 208.68C80.4994 208.68 81.182 208.947 81.6514 209.48C82.1314 210.003 82.3714 210.771 82.3714 211.784V217H81.8114V211.88C81.8114 210.941 81.6087 210.259 81.2034 209.832C80.8087 209.395 80.2327 209.176 79.4754 209.176C79.166 209.176 78.862 209.219 78.5634 209.304C78.2754 209.389 78.0194 209.517 77.7954 209.688C77.5714 209.859 77.39 210.072 77.2514 210.328C77.1234 210.584 77.0594 210.883 77.0594 211.224V217H76.4994ZM91.6129 218.008C91.6129 218.829 91.2769 219.432 90.6049 219.816C89.9435 220.2 88.9889 220.392 87.7409 220.392C86.5249 220.392 85.6449 220.205 85.1009 219.832C84.5569 219.459 84.2849 218.957 84.2849 218.328C84.2849 217.848 84.4182 217.453 84.6849 217.144C84.9515 216.845 85.3249 216.621 85.8049 216.472V216.408C85.2609 216.227 84.9889 215.859 84.9889 215.304C84.9889 214.931 85.1222 214.632 85.3889 214.408C85.6662 214.184 85.9915 214.019 86.3649 213.912V213.864C85.8955 213.651 85.5275 213.341 85.2609 212.936C85.0049 212.531 84.8769 212.024 84.8769 211.416C84.8769 211 84.9409 210.627 85.0689 210.296C85.2075 209.955 85.3995 209.667 85.6449 209.432C85.8902 209.187 86.1889 209 86.5409 208.872C86.8929 208.744 87.2875 208.68 87.7249 208.68C88.4289 208.68 89.0049 208.84 89.4529 209.16V208.52C89.4529 208.125 89.6395 207.928 90.0129 207.928H91.5649V208.424H89.8369V209.448C90.0822 209.693 90.2689 209.981 90.3969 210.312C90.5355 210.643 90.6049 211.011 90.6049 211.416C90.6049 211.821 90.5355 212.195 90.3969 212.536C90.2582 212.867 90.0609 213.155 89.8049 213.4C89.5595 213.635 89.2609 213.821 88.9089 213.96C88.5569 214.088 88.1675 214.152 87.7409 214.152C87.5809 214.152 87.4315 214.141 87.2929 214.12C87.1542 214.099 87.0102 214.072 86.8609 214.04C86.4235 214.157 86.0875 214.312 85.8529 214.504C85.6182 214.696 85.5009 214.936 85.5009 215.224C85.5009 215.448 85.5969 215.645 85.7889 215.816C85.9809 215.976 86.3382 216.056 86.8609 216.056H88.9249C89.8742 216.056 90.5569 216.232 90.9729 216.584C91.3995 216.925 91.6129 217.4 91.6129 218.008ZM91.0529 218.04C91.0529 217.581 90.8929 217.224 90.5729 216.968C90.2635 216.712 89.7035 216.584 88.8929 216.584H86.3489C85.9009 216.701 85.5382 216.893 85.2609 217.16C84.9835 217.437 84.8449 217.805 84.8449 218.264C84.8449 218.744 85.0582 219.133 85.4849 219.432C85.9115 219.741 86.5142 219.896 87.2929 219.896H88.1729C88.5995 219.896 88.9889 219.859 89.3409 219.784C89.6929 219.709 89.9969 219.597 90.2529 219.448C90.5089 219.299 90.7062 219.107 90.8449 218.872C90.9835 218.637 91.0529 218.36 91.0529 218.04ZM87.7409 213.656C88.4449 213.656 88.9942 213.475 89.3889 213.112C89.7835 212.749 89.9809 212.28 89.9809 211.704V211.128C89.9809 210.552 89.7835 210.083 89.3889 209.72C88.9942 209.357 88.4449 209.176 87.7409 209.176C87.0262 209.176 86.4715 209.357 86.0769 209.72C85.6929 210.083 85.5009 210.552 85.5009 211.128V211.704C85.5009 212.28 85.6982 212.749 86.0929 213.112C86.4875 213.475 87.0369 213.656 87.7409 213.656ZM95.9719 217.192C94.8945 217.192 94.0412 216.829 93.4119 216.104C92.7932 215.379 92.4839 214.323 92.4839 212.936C92.4839 211.56 92.7879 210.509 93.3959 209.784C94.0039 209.048 94.8412 208.68 95.9079 208.68C96.4092 208.68 96.8625 208.776 97.2679 208.968C97.6839 209.16 98.0359 209.432 98.3239 209.784C98.6225 210.136 98.8519 210.563 99.0119 211.064C99.1719 211.555 99.2519 212.104 99.2519 212.712V212.968H93.0759V213.4C93.0759 213.901 93.1399 214.355 93.2679 214.76C93.3959 215.165 93.5825 215.512 93.8279 215.8C94.0839 216.088 94.3879 216.312 94.7399 216.472C95.1025 216.621 95.5132 216.696 95.9719 216.696C97.2625 216.696 98.1532 216.077 98.6439 214.84L99.0759 215.08C98.8305 215.72 98.4465 216.232 97.9239 216.616C97.4012 217 96.7505 217.192 95.9719 217.192ZM95.9079 209.176C95.4599 209.176 95.0599 209.256 94.7079 209.416C94.3665 209.565 94.0732 209.784 93.8279 210.072C93.5825 210.36 93.3959 210.707 93.2679 211.112C93.1399 211.517 93.0759 211.965 93.0759 212.456V212.52H98.6439V212.424C98.6439 211.933 98.5745 211.491 98.4359 211.096C98.3079 210.691 98.1212 210.349 97.8759 210.072C97.6412 209.784 97.3532 209.565 97.0119 209.416C96.6812 209.256 96.3132 209.176 95.9079 209.176Z" fill="black" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/SavedQuery.tsx b/components/illustration/SavedQuery.tsx index d4470f5..e6c7ac8 100644 --- a/components/illustration/SavedQuery.tsx +++ b/components/illustration/SavedQuery.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const SavedQuery: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const SavedQuery: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const backgroundVariants = { @@ -36,384 +34,369 @@ const SavedQuery: React.FC = () => { } return ( -
-
- - +
+ + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + - - - - - - + + + - - - + + + - + + + - - - - - + + + - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/SetAlerts.tsx b/components/illustration/SetAlerts.tsx index 524dbef..e236d38 100644 --- a/components/illustration/SetAlerts.tsx +++ b/components/illustration/SetAlerts.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const SetAlerts: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const SetAlerts: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const contentVariants = { @@ -36,266 +34,251 @@ const SetAlerts: React.FC = () => { } return ( -
-
- - - - - - - - - - +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/Sharing.tsx b/components/illustration/Sharing.tsx index e63e68d..f052337 100644 --- a/components/illustration/Sharing.tsx +++ b/components/illustration/Sharing.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const Sharing: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const Sharing: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const backgroundVariants = { @@ -46,443 +44,428 @@ const Sharing: React.FC = () => { } return ( -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + - - - + + + - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/SlackAlert.tsx b/components/illustration/SlackAlert.tsx index 9a80a73..6a218cb 100644 --- a/components/illustration/SlackAlert.tsx +++ b/components/illustration/SlackAlert.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const SlackAlert: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const SlackAlert: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const contentVariants = { @@ -46,420 +44,405 @@ const SlackAlert: React.FC = () => { } return ( -
-
- - - - - - +
+ + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ variants={rectangleVariants} + transition={{ duration: 0.5, ease: "easeOut", delay: 0 }} + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/TimelyUpdates.tsx b/components/illustration/TimelyUpdates.tsx index 5a51085..2cbd2fc 100644 --- a/components/illustration/TimelyUpdates.tsx +++ b/components/illustration/TimelyUpdates.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const TimelyUpdates: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const TimelyUpdates: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const contentVariants = { @@ -36,275 +34,260 @@ const TimelyUpdates: React.FC = () => { } return ( -
-
- + + - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ rx="15" + fill="#F1F1F1" + initial={"visible"} + animate={controls} + variants={rectangleVariants} + transition={{ duration: 0.7, ease: "easeOut" }} + /> + + + + + + + + + + + + + + + + + + + + + + + + + { + playAnimation() + }} + />
) } diff --git a/components/illustration/Visualize.tsx b/components/illustration/Visualize.tsx index 7dccbf0..c32e554 100644 --- a/components/illustration/Visualize.tsx +++ b/components/illustration/Visualize.tsx @@ -3,14 +3,12 @@ import * as React from "react" import { motion, useAnimation } from "framer-motion" -import ExpandButton from "components/ExpandButton" import PlayButton from "components/PlayButton" -import useModal from "hooks/useModal" import classNames from "utils/classNames" -const Visualize: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useModal() - +const Visualize: React.FC<{ isExpanded?: boolean }> = ({ + isExpanded = false, +}) => { const controls = useAnimation() const contentVariants = { @@ -61,124 +59,64 @@ const Visualize: React.FC = () => { } return ( -
-
- - - - - - - - - - - - +
+ + + - - + - { /> - - + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - + + + - + + + - - - + + + - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- { - setIsModalOpen(!isModalOpen) - }} - /> - { - playAnimation() - }} - /> -
-
+ + + + + + + + + + + + + + { + playAnimation() + }} + />
) }