Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 1x 1x 1x 1x 1x 1x 1x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 92x 1x 1x | "use client";
import React, { useState } from "react";
import { Icon } from "@/components/ui/icons";
import { Input } from "@/components/ui";
const Shipping = () => {
const [dropdown, setDropdown] = useState(false);
// Custom className to match existing design system
const inputClassName = "rounded-md border-gray-3 dark:border-gray-600 bg-gray-1 dark:bg-gray-700 placeholder:text-dark-5 dark:placeholder:text-gray-400 dark:text-gray-200 py-2.5 px-5 focus:shadow-input";
return (
<div className="bg-white dark:bg-gray-800 shadow-1 rounded-[10px] mt-7.5">
<div
onClick={() => setDropdown(!dropdown)}
className="cursor-pointer flex items-center gap-2.5 font-medium text-lg text-dark dark:text-gray-100 py-5 px-5.5"
>
Ship to a different address?
<Icon
name="chevron-down"
size={22}
rotate={dropdown ? 180 : 0}
className="ease-out duration-200"
/>
</div>
{/* <!-- dropdown menu --> */}
<div className={`p-4 sm:p-8.5 ${dropdown ? "block" : "hidden"}`}>
<div className="mb-5">
<Input
as="select"
label="Country/ Region"
id="countryName"
required
fullWidth
className="rounded-md border-gray-3 dark:border-gray-600 bg-gray-1 dark:bg-gray-700 text-dark-4 dark:text-gray-200 py-3 px-5 focus:shadow-input"
>
<option value="0">Australia</option>
<option value="1">America</option>
<option value="2">England</option>
</Input>
</div>
<div className="mb-5">
<Input
label="Street Address"
type="text"
name="address"
placeholder="House number and street name"
required
fullWidth
className={inputClassName}
/>
<div className="mt-5">
<Input
type="text"
name="address"
placeholder="Apartment, suite, unit, etc. (optional)"
fullWidth
className={inputClassName}
/>
</div>
</div>
<div className="mb-5">
<Input
label="Town/ City"
type="text"
name="town"
required
fullWidth
className={inputClassName}
/>
</div>
<div className="mb-5">
<Input
label="Country"
type="text"
name="country"
fullWidth
className={inputClassName}
/>
</div>
<div className="mb-5">
<Input
label="Phone"
type="text"
name="phone"
required
fullWidth
className={inputClassName}
/>
</div>
<div>
<Input
label="Email Address"
type="email"
name="email"
required
fullWidth
className={inputClassName}
/>
</div>
</div>
</div>
);
};
export default Shipping;
|