diff --git a/components/reusable-components/add-skill/AddSkill.module.scss b/components/reusable-components/add-skill/AddSkill.module.scss new file mode 100644 index 00000000..6c34ac48 --- /dev/null +++ b/components/reusable-components/add-skill/AddSkill.module.scss @@ -0,0 +1,39 @@ +.addSkillWrapper { + position: relative; +} + +.addButton { + padding: 8px 16px; + background: #212f42; + color: #aad6ff; + border: 3px solid #aad6ff; + border-radius: 20px; + cursor: pointer; + font-weight: 700; + font-size: 18px; + margin-top: 20px; +} + +.selectedTags { + display: flex; + flex-wrap: wrap; + margin-top: 16px; + + .selectedTag { + background: white; + color: #212f42; + border: 1px solid #212f42; + padding: 4px 8px; + border-radius: 10px; + margin: 4px; + display: flex; + align-items: center; + gap: 3px; + + .removeTag { + cursor: pointer; + background-color: transparent; + border: none; + } + } +} diff --git a/components/reusable-components/add-skill/AddSkills.tsx b/components/reusable-components/add-skill/AddSkills.tsx new file mode 100644 index 00000000..b25554f5 --- /dev/null +++ b/components/reusable-components/add-skill/AddSkills.tsx @@ -0,0 +1,58 @@ +'use client'; + +import { useState } from 'react'; +import styles from './AddSkill.module.scss'; +import TagsModal from '../tags-modal/TagsModal'; + +const existingTags = [ + 'JavaScript', + 'React', + 'Next.js', + 'CSS', + 'HTML', + 'Node.js', + 'Java', + 'C#', + 'PHP', +]; + +const AddSkill = () => { + const [showModal, setShowModal] = useState(false); + const [selectedTags, setSelectedTags] = useState([]); + const openModal = () => setShowModal(true); + const closeModal = () => setShowModal(false); + + return ( +
+ + {showModal && ( + + )} +
+ {selectedTags.map((tag) => ( +
+ {' '} + {tag} +
+ ))} +
+
+ ); +}; + +export default AddSkill; diff --git a/components/reusable-components/reusable-modal/ReusableModal.tsx b/components/reusable-components/reusable-modal/ReusableModal.tsx index 352686b9..fd3cbfb5 100644 --- a/components/reusable-components/reusable-modal/ReusableModal.tsx +++ b/components/reusable-components/reusable-modal/ReusableModal.tsx @@ -5,6 +5,8 @@ import Button from '../button/Button'; interface ReusableModalProps { title: string; description?: string; + // eslint-disable-next-line no-undef + children?: JSX.Element; isOpen: boolean; onClose?: () => void; secondaryButtonLabel?: string; @@ -18,6 +20,7 @@ interface ReusableModalProps { const ReusableModal = ({ title, description, + children, isOpen, secondaryButtonLabel = 'Cancel', secondaryButtonClass = 'secondaryButton', @@ -80,6 +83,7 @@ const ReusableModal = ({

{title}

{description &&

{description}

} + {children}