74 lines
3.5 KiB
JavaScript
74 lines
3.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
function AccordionTableItem(props) {
|
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
return (
|
|
<tbody className="text-sm">
|
|
<tr>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="flex items-center text-slate-800">
|
|
<div className="w-10 h-10 shrink-0 flex items-center justify-center bg-slate-100 rounded-full mr-2 sm:mr-3">
|
|
<img className="rounded-full ml-1" src={props.image} width="40" height="40" alt={props.customer} />
|
|
</div>
|
|
<div className="font-medium text-slate-800">{props.customer}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="text-left font-medium text-emerald-500">{props.total}</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="inline-flex font-medium bg-amber-100 text-amber-600 rounded-full text-center px-2.5 py-0.5">{props.status}</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="text-center">{props.items}</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="text-left">{props.location}</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap">
|
|
<div className="flex items-center">
|
|
<svg className="w-4 h-4 fill-current text-slate-400 shrink-0 mr-2" viewBox="0 0 16 16">
|
|
<path d="M4.3 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.1.4 5.7.4 2.9 3.1L.7.9 0 7.3l6.4-.7-2.1-2.1zM15.6 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z" />
|
|
</svg>
|
|
<div>{props.type}</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-2 first:pl-5 last:pr-5 py-3 whitespace-nowrap w-px">
|
|
<div className="flex items-center">
|
|
<button
|
|
className={`text-slate-400 hover:text-slate-500 transform ${open && 'rotate-180'}`}
|
|
aria-expanded={open}
|
|
onClick={() => setOpen(!open)}
|
|
aria-controls={`description-${props.id}`}
|
|
>
|
|
<span className="sr-only">Menu</span>
|
|
<svg className="w-8 h-8 fill-current" viewBox="0 0 32 32">
|
|
<path d="M16 20l-5.4-5.4 1.4-1.4 4 4 4-4 1.4 1.4z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/*
|
|
Example of content revealing when clicking the button on the right side:
|
|
Note that you must set a "colSpan" attribute on the <td> element,
|
|
and it should match the number of columns in your table
|
|
*/}
|
|
<tr id={`description-${props.id}`} role="region" className={`${!open && 'hidden'}`}>
|
|
<td colSpan="10" className="px-2 first:pl-5 last:pr-5 py-3">
|
|
<div className="flex items-center bg-slate-50 p-3 -mt-3">
|
|
<svg className="w-4 h-4 shrink-0 fill-current text-slate-400 mr-2">
|
|
<path d="M1 16h3c.3 0 .5-.1.7-.3l11-11c.4-.4.4-1 0-1.4l-3-3c-.4-.4-1-.4-1.4 0l-11 11c-.2.2-.3.4-.3.7v3c0 .6.4 1 1 1zm1-3.6l10-10L13.6 4l-10 10H2v-1.6z" />
|
|
</svg>
|
|
<div className="italic">{props.description}</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
);
|
|
}
|
|
|
|
export default AccordionTableItem;
|