plurality-esm-wrapper/dist/esm/components/ConnectedProfile/figma-copy.js

A React component for social connect popup.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Button, Menu, Dropdown } from 'antd';
import styled from 'styled-components';
import ProfileIcon from '../../assets/profileIcon';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import ProfileIconSmall from '../../assets/profileIconSmall';
import ProfileStars from '../../assets/profileStar';
const ProfileWrapper = styled(Button) `
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-color:  ${props => (props.$theme === 'dark' ? '#000000' : '#ffffff')};;
  padding: 20px 20px;
  width: 354px;
  gap: 0.5rem;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;

  height: ${props => (props.$isOpen ? '430px' : '183px')};
  transition: height 0.8s ease;

  &:hover {
    background-color:  ${props => (props.$theme === 'dark' ? '#000000 !important' : '#ffffff !important')};
    color: #fff !important;
  }

  .content-wrapper{
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: -5px;
  }

  .vertical-line {
    width: 0;
    height: 150px;
    border: 1px solid #acacac

  }
`;
const ConnectedButtonWrapper = styled(Button) `
  width: 100%;
  max-width: 180px;
  height: 143px;
  border-radius: 70px;
  border: none;
  background-color:transparent !important;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  align-items: center;
  box-shadow: none;
  transition: background-color 0.8s ease;

  .anticon-caret-down{
    color: lightgray !important;
  }

  &:hover {
    background-color:  #acacac !important;
    color: #fff !important;
  }
`;
const StyledMenu = styled(Menu) `
 background-color: #F9F9F9 !important;
  margin-top: 30px !important;
  margin-left: -50px !important;
  width: 260px;
  border-radius: 25px !important;
  padding: 0;
   

  .ant-dropdown-menu-item{
    padding: 0 15px !important;
    font-family: 'Lexend';
    font-size: 16px;
    font-weight: 400;

    .basic-info{
      display: flex;
      align-items: center;
      justify-content: space-between;

      span{
        font-family: 'Lexend';
        font-size: 16px;
        font-weight: 400;
      }

      .basic-info-details{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.4rem
      }
    }
  }
  
  @media (max-width: 768px) {
    width: 100%;
    max-width: 260px;
  }
`;
const ProfileConnectedButton1 = ({ theme }) => {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const toggleDropdown = () => {
        setIsDropdownOpen(!isDropdownOpen);
    };
    const menu = (_jsxs(StyledMenu, { "$theme": theme, children: [_jsx(Menu.Item, { children: _jsxs("div", { className: 'basic-info', children: [_jsxs("div", { className: 'basic-info-details', children: [_jsx(ProfileIconSmall, {}), _jsx("span", { children: "John Doe" })] }), _jsxs("div", { className: 'stars', children: [_jsx(ProfileStars, {}), _jsx(ProfileStars, {}), _jsx(ProfileStars, {}), _jsx(ProfileStars, {})] })] }) }, "1"), _jsx("hr", {}), _jsx(Menu.Item, { style: { marginTop: '10px' }, children: _jsx("span", { children: "Profile" }) }, "2"), _jsx(Menu.Item, { style: { marginTop: '10px' }, children: _jsx("span", { children: "Wallet" }) }, "3"), _jsx(Menu.Item, { style: { marginTop: '10px', marginBottom: '10px' }, children: _jsx("span", { children: "Settings" }) }, "4"), _jsx("hr", {}), _jsx(Menu.Item, { style: { marginTop: '10px', marginBottom: '10px' }, children: _jsx("span", { children: "Logout" }) }, "5")] }));
    return (_jsx(ProfileWrapper, { "$isOpen": isDropdownOpen, "$theme": theme, children: _jsxs("div", { className: 'content-wrapper', children: [_jsx("div", { className: "vertical-line" }), _jsx(Dropdown, { overlay: menu, trigger: ['hover'], onVisibleChange: toggleDropdown, visible: isDropdownOpen, children: _jsxs(ConnectedButtonWrapper, { "$isOpen": isDropdownOpen, "$theme": theme, children: [_jsx(ProfileIcon, {}), isDropdownOpen ? _jsx(CaretUpOutlined, {}) : _jsx(CaretDownOutlined, {})] }) })] }) }));
};
export default ProfileConnectedButton1;