@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
36 lines (35 loc) • 2.12 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Dropdown } from "./Dropdown";
import { useRef, useState } from "react";
import { Typography } from "../Typography/Typography";
import { SocialIcon } from "../SocialIcon/SocialIcon";
import { SocialIconVariant } from "../SocialIcon/types";
import { Icon } from "../Icon/Icon";
const socialNetworkDropdownOptions = {
["All Networks"]: { socialIcon: null, name: "All Networks" },
Discord: { socialIcon: SocialIconVariant.DISCORD, name: "Discord" },
X: { socialIcon: SocialIconVariant.X, name: "X" },
Telegram: { socialIcon: SocialIconVariant.TELEGRAM, name: "Telegram" },
};
const meta = {
component: Dropdown,
};
export default meta;
const SocialMediaDropdown = () => {
const [selectedOption, setSelectedOption] = useState("All Networks");
const [isOpen, setIsOpen] = useState(false);
const ulRef = useRef(null);
const getOption = (name, isSelected) => {
return (_jsxs("div", { className: "flex items-center w-full", children: [_jsx(SocialIcon, { variant: socialNetworkDropdownOptions[name].socialIcon, className: "mr-4 w-8 h-8" }), _jsx(Typography, { variant: "p", className: "font-medium", children: name }), isSelected && (_jsx(Icon, { name: "check", color: "primary-600", className: "sm:hidden ml-auto" }))] }));
};
return (_jsx(Dropdown, { isOpen: isOpen, setIsOpen: setIsOpen, mobilHeaderTitle: "Filter", selectedOption: getOption(selectedOption, false), className: "h-[62px] w-[198px]", children: _jsx("ul", { ref: ulRef, children: Object.keys(socialNetworkDropdownOptions).map((value) => {
const option = value;
return (_jsx("li", { className: "h-10 mb-4 last:mb-0 px-[6px] flex items-center cursor-pointer hover:bg-neutral-50 text-neutral-950", onClick: () => {
setSelectedOption(option);
setIsOpen(false);
}, children: getOption(option, selectedOption === value) }, value));
}) }) }));
};
export const SocialMediaExample = {
render: () => _jsx(SocialMediaDropdown, {}),
};