/*
This example requires some changes to your config:
```
// tailwind.config.js
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
],
}
```
*/
import { Fragment, useState } from 'react'
import { Dialog, Popover, Tab, Transition } from '@headlessui/react'
import { Bars3Icon, MagnifyingGlassIcon, ShoppingCartIcon, UserIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
const currencies = ['CAD', 'USD', 'AUD', 'EUR', 'GBP']
const navigation = {
categories: [
{
name: 'Women',
featured: [
{ name: 'Sleep', href: '#' },
{ name: 'Swimwear', href: '#' },
{ name: 'Underwear', href: '#' },
],
collection: [
{ name: 'Everything', href: '#' },
{ name: 'Core', href: '#' },
{ name: 'New Arrivals', href: '#' },
{ name: 'Sale', href: '#' },
],
categories: [
{ name: 'Basic Tees', href: '#' },
{ name: 'Artwork Tees', href: '#' },
{ name: 'Bottoms', href: '#' },
{ name: 'Underwear', href: '#' },
{ name: 'Accessories', href: '#' },
],
brands: [
{ name: 'Full Nelson', href: '#' },
{ name: 'My Way', href: '#' },
{ name: 'Re-Arranged', href: '#' },
{ name: 'Counterfeit', href: '#' },
{ name: 'Significant Other', href: '#' },
],
},
{
name: 'Men',
featured: [
{ name: 'Casual', href: '#' },
{ name: 'Boxers', href: '#' },
{ name: 'Outdoor', href: '#' },
],
collection: [
{ name: 'Everything', href: '#' },
{ name: 'Core', href: '#' },
{ name: 'New Arrivals', href: '#' },
{ name: 'Sale', href: '#' },
],
categories: [
{ name: 'Artwork Tees', href: '#' },
{ name: 'Pants', href: '#' },
{ name: 'Accessories', href: '#' },
{ name: 'Boxers', href: '#' },
{ name: 'Basic Tees', href: '#' },
],
brands: [
{ name: 'Significant Other', href: '#' },
{ name: 'My Way', href: '#' },
{ name: 'Counterfeit', href: '#' },
{ name: 'Re-Arranged', href: '#' },
{ name: 'Full Nelson', href: '#' },
],
},
],
pages: [
{ name: 'Company', href: '#' },
{ name: 'Stores', href: '#' },
],
}
const products = [
{
id: 1,
name: 'Nomad Tumbler',
description:
'This durable and portable insulated tumbler will keep your beverage at the perfect temperature during your next adventure.',
href: '#',
price: '35.00',
status: 'Preparing to ship',
step: 1,
date: 'March 24, 2021',
datetime: '2021-03-24',
address: ['Floyd Miles', '7363 Cynthia Pass', 'Toronto, ON N3Y 4H8'],
email: 'f•••@example.com',
phone: '1•••••••••40',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/confirmation-page-03-product-01.jpg',
imageAlt: 'Insulated bottle with white base and black snap lid.',
},
{
id: 2,
name: 'Minimalist Wristwatch',
description: 'This contemporary wristwatch has a clean, minimalist look and high quality components.',
href: '#',
price: '149.00',
status: 'Shipped',
step: 0,
date: 'March 23, 2021',
datetime: '2021-03-23',
address: ['Floyd Miles', '7363 Cynthia Pass', 'Toronto, ON N3Y 4H8'],
email: 'f•••@example.com',
phone: '1•••••••••40',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/confirmation-page-03-product-02.jpg',
imageAlt:
'Arm modeling wristwatch with black leather band, white watch face, thin watch hands, and fine time markings.',
},
// More products...
]
const footerNavigation = {
account: [
{ name: 'Manage Account', href: '#' },
{ name: 'Saved Items', href: '#' },
{ name: 'Orders', href: '#' },
{ name: 'Redeem Gift card', href: '#' },
],
service: [
{ name: 'Shipping & Returns', href: '#' },
{ name: 'Warranty', href: '#' },
{ name: 'FAQ', href: '#' },
{ name: 'Find a store', href: '#' },
{ name: 'Get in touch', href: '#' },
],
company: [
{ name: 'Who we are', href: '#' },
{ name: 'Press', href: '#' },
{ name: 'Careers', href: '#' },
{ name: 'Terms & Conditions', href: '#' },
{ name: 'Privacy', href: '#' },
],
connect: [
{ name: 'Instagram', href: '#' },
{ name: 'Pinterest', href: '#' },
{ name: 'Twitter', href: '#' },
],
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
const [open, setOpen] = useState(false)
return (
{/* Mobile menu */}
{/* Products */}
Products purchased
{products.map((product) => (
${product.price}
{product.description}
- Delivery address
-
{product.address[0]}
{product.address[1]}
{product.address[2]}
- Shipping updates
-
{product.email}
{product.phone}
Status
{product.status} on
Order placed
0 ? 'text-indigo-600' : '', 'text-center')}>
Processing
1 ? 'text-indigo-600' : '', 'text-center')}>
Shipped
2 ? 'text-indigo-600' : '', 'text-right')}>
Delivered
))}
{/* Billing */}
Billing Summary
- Billing address
-
Floyd Miles
7363 Cynthia Pass
Toronto, ON N3Y 4H8
- Payment information
-
Ending with 4242
Expires 02 / 24
- Subtotal
- $72
- Shipping
- $5
- Tax
- $6.16
- Order total
- $83.16
)
}