@prosistemas/sca-web-kit 2.2.0 → 2.2.2

package/dist/components/layout/topnav/mobile-nav/mobile-nav.d.ts

@@ -0,0 +1 @@
+export default function MobileNav(): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/mobile-nav/mobile-nav.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './mobile-nav.module.scss';
+import * as Dialog from '@radix-ui/react-dialog';
+import Image from 'next/image';
+import NavAccordion from './nav-accordion/nav-accordion';
+import NavAccordionLink from './nav-accordion/nav-accordion-link/nav-accordion-link';
+import { CaretDownIcon, ListIcon, UserCircleIcon, XIcon } from '@phosphor-icons/react/dist/ssr';
+import Button from '../../../ui/button/button';
+export default function MobileNav() {
+    return (_jsx("div", { className: styles['mobile-nav'], children: _jsxs(Dialog.Root, { children: [_jsx(Dialog.Trigger, { className: styles['dialog-trigger'], asChild: true, children: _jsx(ListIcon, { size: 32, color: 'white', cursor: 'pointer' }) }), _jsx(Dialog.Portal, { children: _jsx(Dialog.Overlay, { className: styles['dialog-overlay'], children: _jsxs(Dialog.Content, { className: styles['dialog-content'], children: [_jsxs("div", { className: styles['dialog-header'], children: [_jsx(Dialog.Title, { children: _jsx(Image, { src: "/logos/sca/sca-blue.svg", width: 50, height: 25, alt: "Logo do Sistema SCA", className: styles['sca-logo'] }) }), _jsx(Dialog.Close, { className: styles['dialog-close'], asChild: true, children: _jsx(XIcon, { size: 32, color: 'var(--auxiliary-orange)' }) })] }), _jsxs("div", { className: styles['dialog-content-bottom'], children: [_jsxs("div", { className: styles['dialog-buttons'], children: [_jsxs(NavAccordion, { title: 'Recursos', children: [_jsx(NavAccordionLink, { title: 'Controle financeiro', href: '/recursos' }), _jsx(NavAccordionLink, { title: 'Controle de acesso', href: '/recursos' }), _jsx(NavAccordionLink, { title: 'Ficha de treino', href: '/recursos' }), _jsx(NavAccordionLink, { title: 'Avalia\u00E7\u00E3o f\u00EDsica', href: '/recursos' }), _jsx(NavAccordionLink, { title: 'Relacionamento com Alunos', href: '/recursos' }), _jsx(NavAccordionLink, { title: 'Ger\u00EAncia de turma', href: '/recursos' }), _jsx(NavAccordionLink, { title: 'Vitrine de produtos', href: '/recursos' })] }), _jsxs(NavAccordion, { title: 'Segmentos', children: [_jsx(NavAccordionLink, { title: 'Academia', href: 'TODO' }), _jsx(NavAccordionLink, { title: 'Box Cross', href: 'TODO' }), _jsx(NavAccordionLink, { title: 'Escola de Nata\u00E7\u00E3o', href: 'TODO' }), _jsx(NavAccordionLink, { title: 'Pilates', href: 'TODO' }), _jsx(NavAccordionLink, { title: 'Studio', href: 'TODO' })] }), _jsx("a", { href: 'TODO', className: styles['nav-link'], children: _jsx("p", { children: "Planos" }) }), _jsx("a", { href: 'TODO', className: styles['nav-link'], children: _jsx("p", { children: "Blog" }) }), _jsxs(NavAccordion, { title: 'Mais', children: [_jsx(NavAccordionLink, { title: 'Quem somos', href: '/quem-somos' }), _jsx(NavAccordionLink, { title: 'Cases de sucesso', href: '/cases-de-sucesso' }), _jsx(NavAccordionLink, { title: 'Equipamentos', href: '/equipamentos' }), _jsx(NavAccordionLink, { title: 'Vers\u00E3o Desktop', href: '/desktop' }), _jsx(NavAccordionLink, { title: 'Atendimento', href: '/contato' })] })] }), _jsxs("div", { className: styles['account-test-wrapper'], children: [_jsxs("a", { className: styles['account-wrapper'], children: [_jsx(UserCircleIcon, { size: 24, color: 'var(--primary)' }), _jsx("p", { children: "Acessar conta" }), _jsx(CaretDownIcon, { size: 12, color: 'var(--light500)' })] }), _jsx("a", { href: 'https://app.sistemasca.com/cadastro', target: '_blank', children: _jsx(Button, { label: 'Teste agora', className: styles['test-button'] }) })] })] })] }) }) })] }) }));
+}

package/dist/components/layout/topnav/mobile-nav/mobile-nav.module.scss

@@ -0,0 +1,128 @@
+.mobile-nav {
+  display: none;
+
+  @media (max-width: 900px) {
+    display: inline;
+  }
+}
+
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  background: rgba(0 0 0 / 0.5);
+  height: 100%;
+  width: 100%;
+
+  z-index: 1;
+  overflow-y: scroll;
+
+  .dialog-content {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    background: white;
+    z-index: 1;
+    border-radius: 0 0 16px 16px;
+    padding: 0 64px 64px 64px;
+
+    @media (max-width: 768px) {
+      padding: 0 24px 24px 24px;
+    }
+
+    .dialog-header {
+      height: 108px;
+      width: 100%;
+
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+
+      .dialog-close {
+        cursor: pointer;
+      }
+    }
+
+    .dialog-content-bottom {
+      display: flex;
+      flex-direction: column;
+      gap: 64px;
+
+
+      .dialog-buttons {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+
+        .nav-link {
+          background: var(--neutral100);
+          padding: 16px;
+          border-radius: 8px;
+
+          color: var(--neutral600);
+          font-size: 18px;
+          font-weight: 600;
+        }
+      }
+
+      .account-test-wrapper {
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+
+        .account-wrapper {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          padding: 16px;
+
+          color: var(--neutral700);
+          font-size: 16px;
+          font-weight: 600;
+        }
+
+        .test-button {
+          width: 100%;
+          padding: 16px 32px;
+        }
+      }
+    }
+  }
+}
+
+.dialog-overlay[data-state="open"] {
+  animation: overlayAppear .3s;
+}
+
+.dialog-overlay[data-state="closed"] {
+  animation: overlayHide .3s;
+}
+
+@keyframes overlayAppear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 0.5;
+  }
+}
+
+@keyframes overlayHide {
+  from {
+    opacity: 0.5;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

package/dist/components/layout/topnav/mobile-nav/nav-accordion/nav-accordion-link/nav-accordion-link.d.ts

@@ -0,0 +1,4 @@
+export default function ({ title, href, }: {
+    title: string;
+    href: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/mobile-nav/nav-accordion/nav-accordion-link/nav-accordion-link.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './nav-accordion-link.module.scss';
+export default function ({ title, href, }) {
+    return (_jsx("a", { href: href, children: _jsx("div", { className: styles['nav-accordion-link'], children: _jsx("p", { children: title }) }) }));
+}

package/dist/components/layout/topnav/mobile-nav/nav-accordion/nav-accordion-link/nav-accordion-link.module.scss

@@ -0,0 +1,5 @@
+.nav-accordion-link {
+  background: white;
+  padding: 16px;
+  border-radius: 8px;
+}

package/dist/components/layout/topnav/mobile-nav/nav-accordion/nav-accordion.d.ts

@@ -0,0 +1,4 @@
+export default function NavAccordion({ title, children }: {
+    title: string;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/mobile-nav/nav-accordion/nav-accordion.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './nav-accordion.module.scss';
+import * as Accordion from '@radix-ui/react-accordion';
+import { CaretDown } from '@phosphor-icons/react/dist/ssr';
+export default function NavAccordion({ title, children }) {
+    return (_jsx(Accordion.Root, { type: "single", collapsible: true, className: styles['nav-accordion'], children: _jsxs(Accordion.Item, { value: "item-1", children: [_jsxs(Accordion.Trigger, { className: styles['nav-accordion-trigger'], children: [_jsx(Accordion.Header, { className: styles['nav-accordion-header'], children: _jsx("p", { children: title }) }), _jsx(CaretDown, { size: 18, className: styles['caret-down'] })] }), _jsx(Accordion.Content, { className: styles['nav-accordion-content'], children: _jsx("div", { className: styles['nav-accordion-links-wrapper'], children: children }) })] }) }));
+}

package/dist/components/layout/topnav/mobile-nav/nav-accordion/nav-accordion.module.scss

@@ -0,0 +1,125 @@
+.nav-accordion {
+  width: 100%;
+  background: var(--neutral100);
+  border-radius: 8px;
+
+  .nav-accordion-trigger {
+    border: none;
+    width: 100%;
+
+    background: var(--neutral100);
+    border-radius: 8px;
+    padding: 16px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    cursor: pointer;
+    position: relative;
+
+    .caret-down {
+      color: var(--light500);
+    }
+
+    .caret-down:focus-visible {
+      outline: 1px solid var(--light500);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+
+    .nav-accordion-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 64px;
+
+      color: var(--neutral600);
+      font-size: 18px;
+      font-weight: 600;
+
+    }
+  }
+
+
+  .nav-accordion-content {
+    font-size: 14px;
+    color: var(--neutral400);
+    overflow: hidden;
+
+
+    .nav-accordion-links-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 0 16px 16px 16px;
+    }
+
+  }
+
+  .nav-accordion-content[data-state="open"] {
+    animation: slideDown .3s cubic-bezier(0.87, 0, 0.13, 1);
+  }
+
+  .nav-accordion-content[data-state="closed"] {
+    animation: slideUp .3s cubic-bezier(0.87, 0, 0.13, 1);
+  }
+}
+
+.nav-accordion-trigger[data-state="open"] {
+  .caret-down {
+    animation: turnDown .3s forwards;
+  }
+}
+
+.nav-accordion-trigger[data-state="closed"] {
+  .caret-down {
+    animation: turnUp .3s forwards;
+  }
+}
+
+
+@keyframes slideDown {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+
+  to {
+    height: var(--radix-accordion-content-height);
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 1;
+    height: var(--radix-accordion-content-height);
+  }
+
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes turnDown {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(180deg);
+  }
+}
+
+
+@keyframes turnUp {
+  from {
+    transform: rotate(180deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}

package/dist/components/layout/topnav/navlinks/card/card.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '@phosphor-icons/react';
+export default function Card({ label, iconSize, icon: Icon, }: {
+    label: string;
+    icon: React.ComponentType<IconProps> | string;
+    iconSize?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navlinks/card/card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './card.module.scss';
+import IconWithBackground from '../../../../ui/icon-with-background/icon-with-background';
+import { ArrowUpRightIcon } from '@phosphor-icons/react';
+export default function Card({ label, iconSize = 22, icon: Icon, }) {
+    return (_jsxs("div", { className: styles.card, children: [_jsx(IconWithBackground, { icon: Icon, iconClassName: styles['icon'], iconSize: iconSize }), _jsxs("div", { className: styles['label-icon-wrapper'], children: [_jsx("p", { children: label }), _jsx(ArrowUpRightIcon, { weight: 'bold', size: 14, className: styles['card-icon'] })] })] }));
+}

package/dist/components/layout/topnav/navlinks/card/card.module.scss

@@ -0,0 +1,34 @@
+.card {
+  padding: 16px 0 16px 16px;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 12px;
+  font-variation-settings: 'wght' 400;
+  cursor: pointer;
+  transition: font-variation-settings 0.3s;
+}
+
+.card:hover {
+  font-variation-settings: 'wght' 500;
+}
+
+.card-icon {
+  color: transparent;
+  transition: color 0.3s;
+}
+
+.icon {
+  color: var(--primary);
+}
+
+.card:hover .card-icon {
+  color: var(--primary);
+}
+
+.label-icon-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 6px;
+}

package/dist/components/layout/topnav/navlinks/dropdown-menu-trigger/dropdown-menu-trigger.d.ts

@@ -0,0 +1,6 @@
+export default function DropdownMenuTrigger({ label, open, setOpen, handleMouseEnter, }: {
+    label: string;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    handleMouseEnter?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navlinks/dropdown-menu-trigger/dropdown-menu-trigger.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import styles from './dropdown-menu-trigger.module.scss';
+import { inter } from '../../../../../fonts';
+import { CaretDownIcon } from '@phosphor-icons/react';
+export default function DropdownMenuTrigger({ label, open, setOpen, handleMouseEnter = () => {
+    setOpen(true);
+}, }) {
+    return (_jsxs(DropdownMenu.Trigger, { onMouseEnter: handleMouseEnter, className: `
+        ${styles['dropdown-trigger']}
+        ${open ? styles['dropdown-trigger-open'] : ''}
+      `, children: [_jsx("p", { className: inter.className, children: label }), _jsx(CaretDownIcon, { color: 'var(--light500)', size: 16, className: `${styles['dropdown-trigger-icon']} ${open ? styles['dropdown-trigger-icon-open'] : ''}` })] }));
+}

package/dist/components/layout/topnav/navlinks/dropdown-menu-trigger/dropdown-menu-trigger.module.scss

@@ -0,0 +1,33 @@
+.dropdown-trigger {
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 4px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  color: white;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: color 0.3s;
+
+  @media (max-width: 1024px) {
+    font-size: 12px;
+  }
+}
+
+.dropdown-trigger-open {
+  color: var(--auxiliary-orange);
+  cursor: pointer;
+}
+
+.dropdown-trigger-icon {
+  transition: color 0.3s, transform 0.3s;
+}
+
+.dropdown-trigger-icon-open {
+  color: var(--auxiliary-orange);
+  transform: rotate(180deg);
+}

package/dist/components/layout/topnav/navlinks/more/more.d.ts

@@ -0,0 +1,5 @@
+export default function More({ open, setOpen, handleOpen, }: {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    handleOpen: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navlinks/more/more.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './more.module.scss';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Link from 'next/link';
+import Card from '../card/card';
+import DropdownMenuTrigger from '../dropdown-menu-trigger/dropdown-menu-trigger';
+import { BarbellIcon, ChatCircleIcon, PhoneIncomingIcon, QuestionIcon, SmileyIcon, } from '@phosphor-icons/react';
+export default function More({ open, setOpen, handleOpen, }) {
+    const handleMouseExit = () => {
+        setOpen(false);
+    };
+    return (_jsxs(DropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(DropdownMenuTrigger, { label: "Mais", open: open, setOpen: setOpen, handleMouseEnter: handleOpen }), _jsxs(DropdownMenu.Content, { onMouseLeave: handleMouseExit, className: styles['dropdown-content'], sideOffset: 44, children: [_jsxs("div", { className: styles['left'], children: [_jsx(Link, { href: '/quem-somos', children: _jsx(Card, { label: "Quem somos", icon: "/logos/sca/sca-s-outlined.svg", iconSize: 24 }) }), _jsx(Link, { href: '/cases-de-sucesso', children: _jsx(Card, { label: "Cases de sucesso", icon: SmileyIcon }) }), _jsx(Link, { href: '/equipamentos', children: _jsx(Card, { label: "Equipamentos", icon: BarbellIcon }) })] }), _jsxs("div", { className: styles['right'], children: [_jsx(Link, { href: '/contato', children: _jsx(Card, { label: "Atendimento", icon: PhoneIncomingIcon }) }), _jsx("a", { href: 'https://app.sistemasca.com/ajuda/', target: '_blank', children: _jsx(Card, { label: "Central de ajuda", icon: QuestionIcon }) }), _jsx(Link, { href: '/desktop', children: _jsx(Card, { label: "Vers\u00E3o Desktop", icon: ChatCircleIcon }) })] })] })] }));
+}

package/dist/components/layout/topnav/navlinks/more/more.module.scss

@@ -0,0 +1,60 @@
+.dropdown-content {
+  /* Pra garantir que n vai ficar por baixo do carrossel ;) */
+  z-index: 2;
+  padding: 24px;
+  border-radius: 16px;
+  box-shadow: 0px 28px 58px 0px rgba(3, 0, 70, 0.3);
+  background: var(--neutral100);
+  color: var(--neutral600);
+
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 16px;
+}
+
+@keyframes fadeSlideIn {
+  0% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeSlideOut {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+}
+
+.dropdown-content[data-state='closed'] {
+  animation: fadeSlideOut 0.3s forwards;
+  transform: translateY(-15px);
+  opacity: 0;
+}
+
+.dropdown-content[data-state='open'] {
+  animation: fadeSlideIn 0.3s;
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.left .right {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.left {
+  width: 205px;
+}

package/dist/components/layout/topnav/navlinks/navlinks.d.ts

@@ -0,0 +1 @@
+export default function NavLinks(): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navlinks/navlinks.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from '../topnav.module.scss';
+import { useState } from 'react';
+import Link from 'next/link';
+import More from './more/more';
+import Segments from './segments/segments';
+import Resources from './resources/resources';
+export default function NavLinks() {
+    const [openResources, setOpenResources] = useState(false);
+    const [openSegments, setOpenSegments] = useState(false);
+    const [openMore, setOpenMore] = useState(false);
+    function handleOpenResources() {
+        setOpenResources(true);
+        setOpenSegments(false);
+        setOpenMore(false);
+    }
+    function handleOpenSegments() {
+        setOpenResources(false);
+        setOpenSegments(true);
+        setOpenMore(false);
+    }
+    function handleOpenMore() {
+        setOpenResources(false);
+        setOpenSegments(false);
+        setOpenMore(true);
+    }
+    return (_jsxs("div", { className: styles.navlinks, children: [_jsx(Resources, { open: openResources, setOpen: setOpenResources, handleOpen: handleOpenResources }), _jsx(Segments, { open: openSegments, setOpen: setOpenSegments, handleOpen: handleOpenSegments }), _jsx(Link, { href: "/", className: styles['plans-link'], children: _jsx("p", { children: "Planos" }) }), _jsx(Link, { href: "/", className: styles['blog-link'], children: _jsx("p", { children: "Blog" }) }), _jsx(More, { open: openMore, setOpen: setOpenMore, handleOpen: handleOpenMore })] }));
+}

package/dist/components/layout/topnav/navlinks/resources/resources-card/resources-card.d.ts

@@ -0,0 +1,6 @@
+import { IconProps } from '@phosphor-icons/react';
+export default function ResourcesCard({ title, subtitle, icon: Icon, }: {
+    title: string;
+    subtitle: string;
+    icon: React.ComponentType<IconProps>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navlinks/resources/resources-card/resources-card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './resources-card.module.scss';
+import IconWithBackground from '../../../../../ui/icon-with-background/icon-with-background';
+export default function ResourcesCard({ title, subtitle, icon: Icon, }) {
+    return (_jsxs("div", { className: styles.card, children: [_jsxs("div", { className: styles.top, children: [_jsx(IconWithBackground, { icon: Icon, iconClassName: styles['icon'], iconSize: 22 }), _jsx("p", { children: title })] }), _jsx("div", { className: styles.bottom, children: _jsx("p", { children: subtitle }) })] }));
+}

package/dist/components/layout/topnav/navlinks/resources/resources-card/resources-card.module.scss

@@ -0,0 +1,26 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 82px;
+}
+
+.top {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 16px;
+  min-height: 32px;
+  align-items: center;
+
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.bottom {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.icon {
+  color: var(--primary);
+}

package/dist/components/layout/topnav/navlinks/resources/resources.d.ts

@@ -0,0 +1,5 @@
+export default function Resources({ open, setOpen, handleOpen, }: {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    handleOpen: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/topnav/navlinks/resources/resources.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './resources.module.scss';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Button from '../../../../ui/button/button';
+import ResourcesCard from './resources-card/resources-card';
+import DropdownMenuTrigger from '../dropdown-menu-trigger/dropdown-menu-trigger';
+import { ArrowRightIcon, ClipboardTextIcon, CoinsIcon, CreditCardIcon, FileTextIcon, MoneyIcon, StackIcon } from '@phosphor-icons/react';
+import Link from 'next/link';
+const links = [
+    { title: 'Controle financeiro' },
+    { title: 'Ficha de treino' },
+    { title: 'Avaliação física' },
+    { title: 'Relacionamento com Alunos' },
+    { title: 'Gerência de turmas' },
+    { title: 'Vitrine de produtos' },
+];
+const leftCards = [
+    {
+        title: 'Pacote de aulas',
+        subtitle: 'Crie e controle pacotes de aulas por sessão ou período.',
+        icon: ClipboardTextIcon,
+    },
+    {
+        title: 'Contratos personalizados',
+        subtitle: 'Crie modelos de contratos e use como precisar.',
+        icon: FileTextIcon,
+    },
+    {
+        title: 'Caixas simultâneos',
+        subtitle: 'Controle dos caixas de todas unidades em um único lugar.',
+        icon: CoinsIcon,
+    },
+];
+const rightCards = [
+    {
+        title: 'Mensalidades',
+        subtitle: 'Deixe que o sistema crie as cobranças por você.',
+        icon: MoneyIcon,
+    },
+    {
+        title: 'Controle de estoque',
+        subtitle: 'Controle a entrada e saída dos seus produtos de diversas formas.',
+        icon: StackIcon,
+    },
+    {
+        title: 'Controle financeiro',
+        subtitle: 'O SCA cria e envia as mensalidades automaticamente.',
+        icon: CreditCardIcon,
+    },
+];
+export default function Resources({ open, setOpen, handleOpen, }) {
+    const handleMouseExit = () => {
+        setOpen(false);
+    };
+    return (_jsxs(DropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(DropdownMenuTrigger, { label: "Recursos", open: open, setOpen: setOpen, handleMouseEnter: handleOpen }), _jsxs(DropdownMenu.Content, { onMouseLeave: handleMouseExit, className: `${styles['dropdown-content']}`, sideOffset: 44, children: [_jsx("div", { className: styles['links'], children: links.map((link, index) => {
+                            return (_jsx(Link, { href: '/recursos', className: styles['dropdown-item-link'], children: _jsxs(DropdownMenu.Item, { className: styles['dropdown-item'], children: [link.title, _jsx(ArrowRightIcon, { weight: 'bold', size: 16, className: styles['dropdown-icon'] })] }, index) }, index));
+                        }) }), _jsxs("div", { className: styles['cards-wrapper'], children: [_jsxs("div", { className: styles['cards'], children: [_jsx("div", { className: styles['left-section'], children: leftCards.map((card, index) => {
+                                            return (_jsx(ResourcesCard, { title: card.title, subtitle: card.subtitle, icon: card.icon }, index));
+                                        }) }), _jsx("div", { className: styles['right-section'], children: rightCards.map((card, index) => {
+                                            return (_jsx(ResourcesCard, { title: card.title, subtitle: card.subtitle, icon: card.icon }, index));
+                                        }) })] }), _jsx(Link, { href: '/recursos', className: styles['button-wrapper'], children: _jsx(Button, { label: "Ver todos", className: styles['button'] }) })] })] })] }));
+}