add: checkout page

src/components/combobox/Combobox.tsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect, useRef } from 'react';
-import ArrowDownIcon from '../icons/ArrowDownIcon';
 import { motion, Variants } from 'framer-motion';
-import { SearchNormal } from 'iconsax-react';
+import { Icon, SearchNormal } from 'iconsax-react';
+import clsx from 'clsx';
+import { ChevronDown } from 'lucide-react';
 
 export interface ComboboxOption {
     id: string;
     title: string;
+    icon?: Icon;
     label?: string;
 }
 
@@ -15,10 +17,12 @@ type Props = {
     expanded?: boolean;
     selectedId: string;
     searchable?: boolean;
+    placeholder?: string;
+    icon?: React.ElementType;
     onSelectionChange: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, index: number) => void,
 } & React.HTMLAttributes<HTMLDivElement>
 
-function Combobox({ title, options, expanded, selectedId, searchable = true, onSelectionChange, ...props }: Props) {
+function Combobox({ title, options, placeholder, icon: Icon, expanded, selectedId, searchable = true, onSelectionChange, ...props }: Props) {
     const [expand, setExpand] = useState(expanded);
     const [searchValue, setSearchValue] = useState('');
     const boxRef = useRef<HTMLDivElement>(null);
@@ -54,6 +58,13 @@ function Combobox({ title, options, expanded, selectedId, searchable = true, onS
         setExpand(false);
     };
 
+    const selectedOption = options.find((x) => x.id === selectedId);
+    const activeIcon = selectedOption?.icon && React.createElement(selectedOption.icon, {
+        size: 16,
+        className: "inline-block mr-1 stroke-primary"
+    })
+
+
     const variants: Variants = {
         collapse: {
             opacity: 0,
@@ -77,7 +88,12 @@ function Combobox({ title, options, expanded, selectedId, searchable = true, onS
 
 
     return (
-        <div ref={boxRef} className={`relative ${props.className ?? ''}`} {...props}>
+        <div ref={boxRef}
+            className={clsx(
+                "relative",
+                props.className ?? '')}
+            {...props}
+        >
             <div
                 className="flex w-full h-11 items-center justify-end gap-2 px-3 py-4 relative bg-white/29 rounded-xl border border-solid border-neutral-200 cursor-pointer"
                 tabIndex={0}
@@ -97,17 +113,29 @@ function Combobox({ title, options, expanded, selectedId, searchable = true, onS
                     </span>
                 </label>
 
-                <div className="w-full text-sm2">
-                    {options.find((x) => x.id === selectedId)?.title ?? ''}
+                <div className="w-full text-sm2 flex items-center justify-start gap-3">
+                    {
+                        activeIcon ? (
+                            activeIcon
+                        ) : (
+                            Icon && <Icon size={16} className="inline-block mr-1 stroke-primary" />
+                        )
+                    }
+                    <span className={clsx(
+                        selectedOption?.title ? "mt-0.5" : "mt-1 text-sm font-light"
+                    )}
+                    >
+                        {selectedOption?.title ?? placeholder}
+                    </span>
                 </div>
 
-                <ArrowDownIcon data-expand={expand} className="transition-all duration-200 data-[expand=true]:rotate-x-180" />
+                <ChevronDown size={20} data-expand={expand} className="transition-all stroke-foreground duration-200 data-[expand=true]:rotate-x-180" />
             </div>
 
             <motion.div
                 data-expand={expand}
                 aria-hidden={!expand}
-                className="absolute top-full left-0 w-full mt-1 bg-white rounded-xl outline outline-solid outline-neutral-200 shadow-lg z-10"
+                className="absolute top-full left-0 w-full mt-1 text-foreground bg-white rounded-xl outline outline-solid outline-neutral-200 shadow-lg z-10"
                 role="listbox"
                 aria-label={`${title} options`}
                 onClick={(e) => e.stopPropagation()}
@@ -135,12 +163,18 @@ function Combobox({ title, options, expanded, selectedId, searchable = true, onS
                                 onClick={(e) => setSelection(e, i)}
                                 key={v.id}
                                 data-selected={v.id === selectedId}
-                                className="flex items-center justify-end px-2 py-1.5 cursor-pointer hover:bg-gray-50 rounded-md last:rounded-b-xl"
+                                className="flex gap-3 items-center justify-end px-2 py-1 cursor-pointer hover:bg-gray-50 rounded-md last:rounded-b-xl"
                                 tabIndex={0}
                                 role="option"
                                 aria-selected
                             >
-                                <span className="text-sm2 tracking-[0.13px] leading-5 w-full">{v.title}</span>
+                                {
+                                    v?.icon && React.createElement(v.icon, {
+                                        size: 16,
+                                        className: "inline-block mr-1 stroke-primary"
+                                    })
+                                }
+                                <span className="text-sm2 tracking-[0.13px] leading-5 w-full mt-1">{v.title}</span>
                             </div>
                         ))}
                 </div>