import React from 'react';

export const Example1 = () => {
return (
  <div className="space-y-2 md:scroll-py-4">
    <div className="overflow-hidden relative max-w-md mx-auto bg-white shadow-lg ring-1 ring-black/5 rounded-xl flex items-center gap-6">
      <img
        className="absolute -left-6 w-28 h-28 rounded-full shadow-lg"
        src="your-image-path"
      />
      <div className="min-w-0 py-5 pl-28 pr-5">
        <div className="text-slate-900 font-medium text-sm sm:text-base truncate">
          Andrew Alfred
        </div>
        <div className="text-slate-500 font-medium text-sm sm:text-base leading-tight truncate">
          Assistant to the Traveling Secretary
        </div>
      </div>
    </div>
    <div className="overflow-hidden relative bg-white dark:bg-darkSecondary shadow-lg rounded-xl p-4 max-w-sm w-full mx-auto">
      <div className="animate-pulse flex space-x-4">
        <div className="bg-slate-400 absolute -top-6 -left-6 w-28 h-28 rounded-full shadow-lg"></div>
        <div className="flex-1 space-y-5 py-1 pl-20">
          <div className="h-2 bg-slate-400 rounded w-[50%]" />
          <div className="h-2 bg-slate-400 rounded" />
        </div>
      </div>
    </div>
  </div>
);
};

import React, { useState } from 'react';
import { MdOutlineKeyboardArrowDown } from 'react-icons/md';

export const DropDown = () => {
const [dropdown, setDropdown] = useState(false);
return (
  <>
    <div onClick={() => setDropdown(!dropdown)}>
      <div className="p-3 bg-white dark:bg-darkSecondary shadow-lg rounded-xl flex items-center justify-between w-44 cursor-pointer">
        <small>DropDown</small>
        <MdOutlineKeyboardArrowDown
          className={
            dropdown ? 'rotate-180 duration-200' : 'rotate-0 duration-200'
          }
        />
      </div>
      <ul
        className={
          dropdown
            ? 'flex my-1 items-center space-x-2 p-2 rounded-xl bg-white dark:bg-darkSecondary shadow-2xl w-fit'
            : 'invisible inline-flex my-1 items-center space-x-2 p-2 rounded-xl bg-white dark:bg-darkSecondary shadow-2xl w-fit'
        }>
        <li>😍</li>
        <li>😋</li>
        <li>😡</li>
        <li>😎</li>
        <li>😭</li>
        <li>😩</li>
      </ul>
    </div>
  </>
);
};