frst-components 0.37.0 → 0.38.0

package/dist/esm/src/components/DS/impedimentosTab/index.js

@@ -0,0 +1,180 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ContainerImpedimentos, TabWrapper, WrapperImpedimentoSelect, WrapperSelectIcon, WrapperAddButton, TabInfoWrapper, WrapperMenuMore, Tab } from './styles.js';
+import { ThemeProvider } from 'styled-components';
+import { FRSTTheme } from '../../../theme/index.js';
+import { Box, TextField } from '@mui/material';
+import { useState, useEffect } from 'react';
+import Avatar from '../../avatar/index.js';
+import { ArrrowExpandDropdown, AddIcon, StarPrioritize, EditHipoteses, TrashHipoteses } from '../../../shared/icons.js';
+import Tooltip from '../tooltip/index.js';
+import AddImpedimentoModal from './addImpedimentoModal/index.js';
+import Dropdown from './dropDown/index.js';
+import MenuMore from '../../menu-more/index.js';
+import { LimitCharsContainer, LimitCharsExceededMessage } from '../hypotesisAndImpediment/hypothesisAndImpediment.style.js';
+import { TagAlert } from '../../../../public/customIcons/TagAlert.js';
+
+function ImpedimentosTab({ maxTabs, tabsList, showAddButton, onSaveNewImpedimento, onSelectedTab, idSelectedTab, currentTab, addButtonText, emptyComponent, style }) {
+    const [selectedTab, setSelectedTab] = useState(null);
+    const [allTabs, setAllTabs] = useState([]);
+    const [onShowTabs, setOnShowTabs] = useState([]);
+    const [onHideTabs, setOnHideTabs] = useState([]);
+    const [addImpedimentoAnchor, setAddImpedimentoAnchor] = useState(null);
+    const [impedimentoSelectAnchor, setImpedimentoSelectAnchor] = useState(null);
+    const [isEdit, setIsEdit] = useState(false);
+    const [editDescription, setEditDescription] = useState('');
+    const [displayDescription, setDisplayDescription] = useState('');
+    const limitCaraterersImpediments = 365;
+    const openAddImpedimento = Boolean(addImpedimentoAnchor);
+    const openImpedimentoSelect = Boolean(impedimentoSelectAnchor);
+    useEffect(() => {
+        setAllTabs(tabsList);
+    }, [tabsList]);
+    useEffect(() => {
+        if (idSelectedTab) {
+            if (allTabs?.length > 0) {
+                let tab = allTabs?.find((value) => value.id == idSelectedTab);
+                handleClickTab(tab);
+            }
+        }
+    }, [idSelectedTab]);
+    useEffect(() => {
+        if (allTabs?.length > 0) {
+            const tabToSelect = allTabs.find((tab) => tab.id === currentTab);
+            setSelectedTab(tabToSelect ? tabToSelect : allTabs[0]);
+            setOnShowTabs(allTabs.slice(0, maxTabs));
+            setOnHideTabs(allTabs.slice(maxTabs, allTabs.length));
+            onSelectedTab(tabToSelect ? tabToSelect : allTabs[0]);
+        }
+    }, [allTabs, currentTab, maxTabs, onSelectedTab]);
+    const handleClickTab = (tab) => {
+        setIsEdit(false);
+        setEditDescription('');
+        setDisplayDescription(tab.description);
+        setSelectedTab(tab);
+        onSelectedTab(tab);
+    };
+    const handleClickAddImpedimento = (event) => {
+        setAddImpedimentoAnchor(event.currentTarget);
+    };
+    const handleSaveNewImpedimento = (impedimento) => {
+        onSaveNewImpedimento(impedimento);
+    };
+    const handleClickSelectImpedimento = (impedimento) => {
+        //novo Array sem o impedimento selecionado
+        let newArray = allTabs.filter((value) => value.id !== impedimento.id);
+        //coloca o impedimento selecionado na primeira posição
+        newArray.unshift(impedimento);
+        //atualiza o array de impedimentos
+        setAllTabs(newArray);
+        handleClickTab(impedimento);
+    };
+    const renderTabs = (tabInfo, index) => {
+        return (jsx(Tab, { style: style, "$selected": tabInfo.id === selectedTab?.id, onClick: () => handleClickTab(tabInfo), children: jsx("p", { children: tabInfo.title }) }, index));
+    };
+    const handleUpdate = () => {
+        if (editDescription == '')
+            return;
+        setDisplayDescription(editDescription);
+        let editTab = { ...selectedTab, description: editDescription };
+        selectedTab?.handleEdit(editTab);
+        setIsEdit(false);
+    };
+    const handleCancelUpdate = () => {
+        setEditDescription(displayDescription);
+        setIsEdit(false);
+    };
+    const startEditing = () => {
+        setEditDescription(displayDescription);
+    };
+    const handleChange = (event) => {
+        if (limitCaraterersImpediments > editDescription?.length ||
+            event.target.value?.length < editDescription?.length) {
+            let newValue = event.target.value;
+            if (newValue.length > limitCaraterersImpediments) {
+                newValue = newValue.substring(0, limitCaraterersImpediments);
+            }
+            setEditDescription(newValue);
+        }
+    };
+    useEffect(() => {
+        if (isEdit) {
+            startEditing();
+        }
+    }, [isEdit]);
+    useEffect(() => {
+        if (selectedTab) {
+            setDisplayDescription(selectedTab.description || '');
+            setEditDescription(selectedTab.description || '');
+        }
+    }, [selectedTab]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: allTabs?.length > 0 ? (jsxs(ContainerImpedimentos, { children: [jsxs(TabWrapper, { children: [jsxs(Box, { display: 'flex', alignItems: 'center', children: [onShowTabs.map((item, index) => renderTabs(item, index)), onHideTabs.length > 0 ? (jsx(Tooltip, { content: "Ver todas as causas", direction: "bottom", delay: 200, style: {
+                                        fontFamily: 'PT Sans',
+                                        fontWeight: 400,
+                                        fontSize: '14px',
+                                        color: 'rgba(117, 117, 117, 1)',
+                                        textAlign: 'center',
+                                        boxShadow: ' 0px 0px 18px 0px rgba(34, 34, 34, 0.2)'
+                                    }, children: jsxs(WrapperImpedimentoSelect, { "$activeSelect": openImpedimentoSelect, onClick: (e) => setImpedimentoSelectAnchor(e.currentTarget), style: style, children: [jsxs("p", { children: ["Mais ", onHideTabs.length] }), jsx(WrapperSelectIcon, { "$isOpenSelect": openImpedimentoSelect, children: jsx(ArrrowExpandDropdown, {}) })] }) })) : (jsx(Fragment, {}))] }), jsx(Box, { display: 'flex', alignItems: 'center', children: showAddButton ? (jsxs(WrapperAddButton, { "$activeButton": openAddImpedimento, onClick: handleClickAddImpedimento, children: [jsx(AddIcon, {}), jsx("p", { children: addButtonText })] })) : (jsx(Fragment, {})) })] }), selectedTab?.id ? (jsxs(TabInfoWrapper, { onDoubleClick: () => selectedTab?.showOptions && setIsEdit(true), children: [jsx(Tooltip, { content: selectedTab?.user_name, direction: "bottom", delay: 200, style: {
+                                fontFamily: 'PT Sans',
+                                fontWeight: 400,
+                                fontSize: '14px',
+                                color: 'rgba(117, 117, 117, 1)',
+                                width: 'fit-content',
+                                height: '31px',
+                                top: '8px',
+                                left: '4px',
+                                whiteSpace: 'nowrap',
+                                boxShadow: ' 0px 0px 18px 0px rgba(34, 34, 34, 0.2)'
+                            }, children: selectedTab.isGoalOwner ? (jsx(Avatar, { src: selectedTab.avatar, size: "24px", isActiveClick: true, border: '2px solid #AD46FF', onClick: selectedTab?.handleClickAvatar })) : (jsx(Avatar, { src: selectedTab.avatar, size: "24px", isActiveClick: true, onClick: selectedTab?.handleClickAvatar })) }), isEdit ? (jsxs("div", { style: { width: '100%' }, children: [jsx(TextField, { placeholder: editDescription, value: editDescription, onChange: handleChange, fullWidth: true, multiline: true, variant: "standard", InputProps: {
+                                        disableUnderline: true,
+                                        style: {
+                                            fontFamily: 'PT Sans',
+                                            fontSize: '14px',
+                                            lineHeight: 1.3
+                                        }
+                                    }, inputRef: (input) => input && input.focus(), onKeyDown: (event) => {
+                                        if (event.key === 'Enter') {
+                                            handleUpdate();
+                                        }
+                                        if (event.key === 'Escape') {
+                                            handleCancelUpdate();
+                                        }
+                                    }, onBlur: handleUpdate, onFocus: (e) => e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length) }), editDescription?.length >= limitCaraterersImpediments && (jsxs(LimitCharsContainer, { children: [jsx(TagAlert, { color: "#A50000" }), jsx(LimitCharsExceededMessage, { children: 'Você atingiu a quantidade máxima de caracteres' })] }))] })) : (jsxs(Fragment, { children: [jsx("p", { children: displayDescription }), selectedTab?.showOptions ? (jsx(WrapperMenuMore, { children: jsx(MenuMore, { options: [
+                                            ...(selectedTab?.handlePriorize
+                                                ? [
+                                                    {
+                                                        description: 'Priorizar',
+                                                        onClick: () => selectedTab?.handlePriorize(selectedTab),
+                                                        disabled: !!selectedTab?.disabledPriorize,
+                                                        color: !!selectedTab?.disabledPriorize
+                                                            ? '#b7b7b7'
+                                                            : '#222222',
+                                                        startIcon: (jsx(StarPrioritize, { stroke: !!selectedTab?.disabledPriorize
+                                                                ? '#b7b7b7'
+                                                                : '#222222' }))
+                                                    }
+                                                ]
+                                                : []),
+                                            ...(selectedTab?.handleEdit
+                                                ? [
+                                                    {
+                                                        description: 'Editar',
+                                                        onClick: () => setIsEdit(true),
+                                                        startIcon: jsx(EditHipoteses, {})
+                                                    }
+                                                ]
+                                                : []),
+                                            ...(selectedTab?.handleDelete && !selectedTab?.disabledPriorize // if it's a prioritized impediment, it can't be deleted, but it can be updated
+                                                ? [
+                                                    {
+                                                        description: 'Excluir',
+                                                        onClick: () => selectedTab?.handleDelete(selectedTab),
+                                                        startIcon: jsx(TrashHipoteses, {}),
+                                                        color: '#C00F00'
+                                                    }
+                                                ]
+                                                : [])
+                                        ], closeAfterClick: true, isContainerOptions: true }) })) : (jsx(Fragment, {}))] }))] })) : (jsx(Fragment, {})), jsx(AddImpedimentoModal, { isOpen: openAddImpedimento, anchor: addImpedimentoAnchor, onClose: () => setAddImpedimentoAnchor(null), onSaveBtn: handleSaveNewImpedimento }), jsx(Dropdown, { isOpen: openImpedimentoSelect, anchor: impedimentoSelectAnchor, onClose: () => setImpedimentoSelectAnchor(null), impedimentoList: onHideTabs, maxTabs: maxTabs, onClickImpedimento: handleClickSelectImpedimento })] })) : (emptyComponent !== undefined ? jsx(Fragment, { children: emptyComponent }) : jsx(Fragment, {})) }));
+}
+
+export { ImpedimentosTab as default };

package/dist/esm/src/components/DS/impedimentosTab/styles.js

@@ -0,0 +1,178 @@
+import styled, { css } from 'styled-components';
+
+const ContainerImpedimentos = styled('div') `
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+`;
+const TabWrapper = styled('div') `
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
+const Tab = styled('div') `
+    width: 137px;
+    padding: 12px 16px;
+    background-color: ${({ theme, style, $selected }) => style?.backgroundColor || ($selected ? '#D2ACE4' : theme.colors.shadeWhite)};
+    border-radius: 8px 8px 0px 0px;
+    cursor: pointer;
+
+    ${(props) => props.$selected &&
+    css `
+            background-color: #D2ACE4;
+        `}
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 16px;
+        line-height: 1.1;
+        color: ${({ theme }) => theme.colors.neutralsGrey1};
+        font-weight: ${props => props.$selected ? 700 : 400};
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: center;
+    }
+
+    :hover {
+        background-color: ${({ theme }) => theme.colors.neutralsGrey8};
+
+        ${(props) => props.$selected &&
+    css `
+                background-color: #D2ACE4;
+            `}
+
+    }
+
+`;
+const TabInfoWrapper = styled('div') `
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 12px 16px;
+    border-radius: 0px 0px 8px 8px;
+    background-color: #E5CBF1;
+    min-height: 56px;
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 14px;
+        line-height: 1.3;
+        color: ${({ theme }) => theme.colors.neutralsGrey1};
+        font-weight: 400;
+    }
+
+`;
+const WrapperAddButton = styled('div') `
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    cursor: pointer;
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 16px;
+        line-height: 1.1;
+        font-weight: 700;
+        color: #8E0EC8;
+    }
+
+    ${(props) => props.$activeButton &&
+    css `
+            color: #7C0EAF;
+        `}
+
+    :hover {
+        background-color: ${({ theme }) => theme.colors.neutralsGrey8};
+        color: #7C0EAF;
+
+        svg path {
+            stroke: #7C0EAF;
+        }
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+
+        path {
+            ${(props) => props.$activeButton ?
+    css `
+                    stroke: #7C0EAF;
+                `
+    :
+        css `
+                    stroke: #8E0EC8;
+                `}
+        }
+    }
+
+`;
+const WrapperImpedimentoSelect = styled('div') `
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    border-radius: 6px;
+    background-color: ${({ theme, style }) => style?.backgroundColor || theme.colors.shadeWhite};
+    cursor: pointer;
+
+    p {
+        font-family: 'PT Sans';
+        font-size: 16px;
+        line-height: 1.1;
+        font-weight: 400;
+        color: ${({ theme }) => theme.colors.neutralsGrey1};
+
+        ${(props) => props.$activeSelect &&
+    css `
+                font-weight: 700;
+                color: ${({ theme }) => theme.colors.neutralsGrey2};
+            `}
+    }
+
+    :hover {
+        background-color: ${({ theme }) => theme.colors.neutralsGrey8};
+    }
+
+`;
+const WrapperSelectIcon = styled('div') `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.3s ease-in-out;
+    transform: ${({ $isOpenSelect }) => ($isOpenSelect ? 'rotate(180deg)' : 'rotate(0deg)')} ;
+
+    svg {
+        width: 16px;
+        height: 16px;
+
+        path {
+            stroke: ${({ theme }) => theme.colors.neutralsGrey2};
+        }
+    }
+`;
+const WrapperMenuMore = styled('div') `
+    margin-left: auto;
+    margin-right: 0;
+`;
+styled('div') `
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+`;
+styled('div') `
+    width: 32px;
+    height: 32px;
+    border-radius: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.$buttonColor};
+`;
+
+export { ContainerImpedimentos, Tab, TabInfoWrapper, TabWrapper, WrapperAddButton, WrapperImpedimentoSelect, WrapperMenuMore, WrapperSelectIcon };

package/dist/esm/src/components/DS/loading/index.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { FRSTTheme } from '../../../theme/index.js';
+import { ThemeProvider } from 'styled-components';
+import { container, loader, loadText } from './loadingStyle.js';
+import { useState, useEffect } from 'react';
+import { Load } from '../../../shared/icons.js';
+
+function Loading(props) {
+    const [Size, setSize] = useState('24');
+    const [Color, setColor] = useState(props.loadColor ? props.loadColor : '');
+    const [PositionTextLoad, setPositionTextLoad] = useState(props.positionLoadingText ? props.positionLoadingText : 'bottom');
+    const [LoadText, setLoadText] = useState(props.loadText ? props.loadText : '');
+    useEffect(() => {
+        setLoadText(props.loadText);
+    }, [props.loadText]);
+    useEffect(() => {
+        setColor(props.loadColor);
+    }, [props.loadColor]);
+    useEffect(() => {
+        setPositionTextLoad(props.positionLoadingText);
+    }, [props.positionLoadingText]);
+    useEffect(() => {
+        if (props.sizeLoading === 'extra-small') {
+            setSize('16');
+        }
+        else if (props.sizeLoading === 'small') {
+            setSize('20');
+        }
+        else if (props.sizeLoading === 'medium') {
+            setSize('24');
+        }
+        else if (props.sizeLoading === 'large') {
+            setSize('32');
+        }
+        else if (props.sizeLoading === 'extra-large') {
+            setSize('40');
+        }
+        else {
+            setSize('24');
+        }
+    }, [props.sizeLoading]);
+    return (jsx(ThemeProvider, { theme: FRSTTheme, children: jsxs(container, { textPosition: PositionTextLoad, style: { ...props.style }, children: [jsx(loader, { children: jsx(Load, { width: Size, height: Size, fill: Color !== '' && Color }) }), jsx(loadText, { style: { color: props.loadTextColor ? props.loadTextColor : 'white' }, children: LoadText })] }) }));
+}
+
+export { Loading as default };

package/dist/esm/src/components/DS/loading/loadingStyle.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+const container = styled.div `
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: ${({ textPosition }) => textPosition === 'left' ? 'row-reverse'
+    : textPosition === 'right' ? 'row'
+        : textPosition === 'top' ? 'column-reverse'
+            : textPosition === 'bottom' ? 'column'
+                : null};
+    position: relative;
+    width: auto;
+    gap: 8px;
+    padding: 16px;
+`;
+const loader = styled.div `
+    
+    svg {
+        animation: load 1.5s infinite linear;
+        
+        @keyframes load {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    }
+`;
+const loadText = styled.p `
+    font-family: 'Inter';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+`;
+
+export { container, loadText, loader };

package/dist/esm/src/components/DS/modal/index.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { ModalWrapper, ModalContent, ModalHeader, ModalCloseButton } from './styles.js';
+import { CloseIcon } from '../../../shared/icons.js';
+
+function Modal({ children, width, headerContent, style, onClose, onOpen, handleCloseOnIcon, animation = 'BlowUp', open = false, showHeader = false, mobileFullPage = false, showCloseButton = false, closeOnClickOutside = true, propagationOnClose = true, }) {
+    const ModalWrapperRef = useRef(null);
+    const ModalContentRef = useRef(null);
+    const originalOverflowRef = useRef('');
+    const AnimationType = animation.toLowerCase();
+    const [active, setActive] = useState(false);
+    useEffect(() => {
+        function handleClickOutside(event) {
+            const ModalWreapperEl = ModalWrapperRef?.current;
+            if (ModalWreapperEl === event.target && active) {
+                document.body.style.overflow = originalOverflowRef.current;
+                if (onClose)
+                    onClose(event);
+                if (closeOnClickOutside === true)
+                    setActive(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [ModalWrapperRef, active, closeOnClickOutside, onClose]);
+    useEffect(() => {
+        if (open === true) {
+            originalOverflowRef.current = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+            if (onOpen)
+                onOpen();
+        }
+        else {
+            document.body.style.overflow = originalOverflowRef.current || '';
+        }
+        setActive(open);
+        return () => {
+            document.body.style.overflow = originalOverflowRef.current || '';
+        };
+    }, [onOpen, open]);
+    const handleClose = (e) => {
+        if (propagationOnClose)
+            e.stopPropagation();
+        document.body.style.overflow = originalOverflowRef.current || '';
+        setActive(false);
+        if (onClose)
+            onClose(e);
+    };
+    return (jsx(ModalWrapper, { open: active, ref: ModalWrapperRef, children: jsxs(ModalContent, { style: style, width: width, mobileFullPage: mobileFullPage, ref: ModalContentRef, animation: AnimationType, children: [showHeader === true ||
+                    (showCloseButton === true && (jsx(ModalHeader, { children: showCloseButton === true && (jsxs(ModalCloseButton, { onClick: (e) => handleClose(e), children: [headerContent && headerContent, jsx("span", { onClick: (e) => (handleCloseOnIcon ? handleCloseOnIcon() : handleClose(e)), children: jsx(CloseIcon, {}) })] })) }))), children && children] }) }));
+}
+
+export { Modal as default };

package/dist/esm/src/components/DS/modal/styles.js

@@ -0,0 +1,86 @@
+import styled, { keyframes } from 'styled-components';
+
+const ModalWrapper = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.3);
+  overflow-y: auto;
+  display: none;
+
+  ${({ open }) => open && `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `}
+`;
+const ModalContent = styled.div `
+  width: 80%;
+  max-width: 528px;
+  padding: 24px;
+  margin: 1rem auto;
+  box-sizing: border-box;
+  margin-bottom: 100px;
+  background: #FFFFFF;
+  border: 1px solid #BDBDBD;
+  border-radius: 16px;
+  margin-top: 10%;
+  animation: ${({ animation }) => {
+    switch (animation) {
+        case 'blowup':
+            return BlowUpAnimation;
+        case 'fade':
+            return FadeAnimation;
+        case 'slideup':
+            return SlideUpAnimation;
+        case 'slidedown':
+            return SlideDownAnimation;
+        default:
+            return 'none';
+    }
+}} 0.3s ease-in-out;
+
+  ${({ width }) => width && `
+    max-width: ${width};
+  `}
+
+  ${({ mobileFullPage }) => mobileFullPage === true && `
+    @media (max-width: 768px) {
+      margin: 0 !important;
+      width: 100%;
+      border-radius: 0 !important;
+      min-height: 100vh !important;
+    }
+  `}
+`;
+const BlowUpAnimation = keyframes `
+  0% { transform: scale(0) }
+  100% { transform: scale(1) }
+`;
+const FadeAnimation = keyframes `
+  0% { opacity: 0 }
+  100% { opacity: 1 }
+`;
+const SlideUpAnimation = keyframes `
+  0% { transform: translateY(100%) }
+  100% { transform: translateY(0) }
+`;
+const SlideDownAnimation = keyframes `
+  0% { transform: translateY(-100%) }
+  100% { transform: translateY(0) }
+`;
+const ModalHeader = styled.div `
+  position: relative;
+  height: 20px;
+`;
+const ModalCloseButton = styled.span `
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+`;
+
+export { ModalCloseButton, ModalContent, ModalHeader, ModalWrapper };

package/dist/esm/src/components/DS/newCards/articles/index.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ArticleContainer, ArticleContent, ArticleFooter } from './styles.js';
+
+function ExitIcon() {
+    return (jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M8.61144 16.6668H5.64847C5.25556 16.6668 4.87874 16.5107 4.60091 16.2329C4.32308 15.9551 4.16699 15.5783 4.16699 15.1853V4.81498C4.16699 4.42206 4.32308 4.04524 4.60091 3.76741C4.87874 3.48958 5.25556 3.3335 5.64847 3.3335H8.61144", stroke: "#444444", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M12.9629 13.7038L16.6666 10.0001L12.9629 6.29639", stroke: "#444444", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M16.6673 10L8.33398 10", stroke: "#444444", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+function ArticleCard({ title, description, company, handleClick }) {
+    return (jsxs(ArticleContainer, { children: [jsxs(ArticleContent, { children: [jsx("p", { className: 'cardType', children: " Artigo " }), jsxs("p", { className: 'title', children: [" ", title, " "] }), jsxs("p", { className: 'description', children: [" ", description, " "] })] }), jsxs(ArticleFooter, { children: [jsxs("p", { className: "cta", onClick: handleClick, children: ["Acessar", jsx(ExitIcon, {})] }), company &&
+                        jsxs("p", { className: 'company', children: [jsx("img", { src: company.icon }), company.name] })] })] }));
+}
+
+export { ArticleCard as default };