/*
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, ShoppingBagIcon, UserIcon, XMarkIcon } from '@heroicons/react/24/outline'
const navigation = {
categories: [
{
id: 'women',
name: 'Women',
featured: [
{
name: 'New Arrivals',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/mega-menu-category-01.jpg',
imageAlt: 'Models sitting back to back, wearing Basic Tee in black and bone.',
},
{
name: 'Basic Tees',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/mega-menu-category-02.jpg',
imageAlt: 'Close up of Basic Tee fall bundle with off-white, ochre, olive, and black tees.',
},
{
name: 'Accessories',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/mega-menu-category-03.jpg',
imageAlt: 'Model wearing minimalist watch with black wristband and white watch face.',
},
],
sections: [
[
{
id: 'shoes',
name: 'Shoes & Accessories',
items: [
{ name: 'Sneakers', href: '#' },
{ name: 'Boots', href: '#' },
{ name: 'Flats', href: '#' },
{ name: 'Sandals', href: '#' },
{ name: 'Heels', href: '#' },
{ name: 'Socks', href: '#' },
],
},
{
id: 'collection',
name: 'Shop Collection',
items: [
{ name: 'Everything', href: '#' },
{ name: 'Core', href: '#' },
{ name: 'New Arrivals', href: '#' },
{ name: 'Sale', href: '#' },
{ name: 'Accessories', href: '#' },
],
},
],
[
{
id: 'clothing',
name: 'All Clothing',
items: [
{ name: 'Basic Tees', href: '#' },
{ name: 'Artwork Tees', href: '#' },
{ name: 'Tops', href: '#' },
{ name: 'Bottoms', href: '#' },
{ name: 'Swimwear', href: '#' },
{ name: 'Underwear', href: '#' },
],
},
{
id: 'accessories',
name: 'All Accessories',
items: [
{ name: 'Watches', href: '#' },
{ name: 'Wallets', href: '#' },
{ name: 'Bags', href: '#' },
{ name: 'Sunglasses', href: '#' },
{ name: 'Hats', href: '#' },
{ name: 'Belts', href: '#' },
],
},
],
[
{
id: 'brands',
name: 'Brands',
items: [
{ name: 'Full Nelson', href: '#' },
{ name: 'My Way', href: '#' },
{ name: 'Re-Arranged', href: '#' },
{ name: 'Counterfeit', href: '#' },
{ name: 'Significant Other', href: '#' },
],
},
],
],
},
{
id: 'men',
name: 'Men',
featured: [
{
name: 'Accessories',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/home-page-03-category-01.jpg',
imageAlt:
'Wooden shelf with gray and olive drab green baseball caps, next to wooden clothes hanger with sweaters.',
},
{
name: 'New Arrivals',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/product-page-04-detail-product-shot-01.jpg',
imageAlt: 'Drawstring top with elastic loop closure and textured interior padding.',
},
{
name: 'Artwork Tees',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/category-page-02-image-card-06.jpg',
imageAlt:
'Three shirts in gray, white, and blue arranged on table with same line drawing of hands and shapes overlapping on front of shirt.',
},
],
sections: [
[
{
id: 'shoes',
name: 'Shoes & Accessories',
items: [
{ name: 'Sneakers', href: '#' },
{ name: 'Boots', href: '#' },
{ name: 'Sandals', href: '#' },
{ name: 'Socks', href: '#' },
],
},
{
id: 'collection',
name: 'Shop Collection',
items: [
{ name: 'Everything', href: '#' },
{ name: 'Core', href: '#' },
{ name: 'New Arrivals', href: '#' },
{ name: 'Sale', href: '#' },
],
},
],
[
{
id: 'clothing',
name: 'All Clothing',
items: [
{ name: 'Basic Tees', href: '#' },
{ name: 'Artwork Tees', href: '#' },
{ name: 'Pants', href: '#' },
{ name: 'Hoodies', href: '#' },
{ name: 'Swimsuits', href: '#' },
],
},
{
id: 'accessories',
name: 'All Accessories',
items: [
{ name: 'Watches', href: '#' },
{ name: 'Wallets', href: '#' },
{ name: 'Bags', href: '#' },
{ name: 'Sunglasses', href: '#' },
{ name: 'Hats', href: '#' },
{ name: 'Belts', href: '#' },
],
},
],
[
{
id: 'brands',
name: 'Brands',
items: [
{ name: 'Re-Arranged', href: '#' },
{ name: 'Counterfeit', href: '#' },
{ name: 'Full Nelson', href: '#' },
{ name: 'My Way', href: '#' },
],
},
],
],
},
],
pages: [
{ name: 'Company', href: '#' },
{ name: 'Stores', href: '#' },
],
}
const orders = [
{
id: 1,
date: 'July 12, 2021',
datetime: '2021-07-12',
status: 'out-for-delivery',
productName: 'Kicks Carrier',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/order-history-page-05-product-01.jpg',
imageAlt: 'Black fabric shoe bag with zipper around 3 sides, holding pair of white sneakers.',
},
{
id: 2,
date: 'June 21, 2021',
datetime: '2021-06-21',
status: 'delivered',
productName: 'Micro Backpack',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/order-history-page-05-product-02.jpg',
imageAlt: 'Light grey canvas backpack with black handle, zipper, and edge details.',
},
{
id: 3,
date: 'June 6, 2021',
datetime: '2021-06-06',
status: 'cancelled',
productName: 'Drawtop Canister',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/order-history-page-05-product-03.jpg',
imageAlt: 'Orange canvas cylindrical bag with drawstring top, front zipper pouch, and black shoulder strap.',
},
{
id: 4,
date: 'May 24, 2021',
datetime: '2021-05-24',
status: 'delivered',
productName: 'High Wall Tote',
href: '#',
imageSrc: 'https://tailwindui.com/img/ecommerce-images/order-history-page-05-product-04.jpg',
imageAlt: 'White canvas tote bag with black drawstring liner and white handle.',
},
// More orders...
]
const footerNavigation = {
products: [
{ name: 'Bags', href: '#' },
{ name: 'Tees', href: '#' },
{ name: 'Objects', href: '#' },
{ name: 'Home Goods', href: '#' },
{ name: 'Accessories', href: '#' },
],
company: [
{ name: 'Who we are', href: '#' },
{ name: 'Sustainability', href: '#' },
{ name: 'Press', href: '#' },
{ name: 'Careers', href: '#' },
{ name: 'Terms & Conditions', href: '#' },
{ name: 'Privacy', href: '#' },
],
customerService: [
{ name: 'Contact', href: '#' },
{ name: 'Shipping', href: '#' },
{ name: 'Returns', href: '#' },
{ name: 'Warranty', href: '#' },
{ name: 'Secure Payments', href: '#' },
{ name: 'FAQ', href: '#' },
{ name: 'Find a store', href: '#' },
],
}
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
const [open, setOpen] = useState(false)
return (
{/* Mobile menu */}
Order history
Check the status of recent orders, manage returns, and discover similar products.
{orders.map((order) => (
{order.status === 'delivered' ? (
Delivered on
) : order.status === 'out-for-delivery' ? (
Out for delivery
) : order.status === 'cancelled' ? (
Cancelled
) : null}
))}
)
}