72 lines
4.5 KiB
TypeScript
72 lines
4.5 KiB
TypeScript
import React from 'react';
|
|
|
|
export default function Itinerary() {
|
|
return (
|
|
<div className='p-9'>
|
|
<h2 className="text-base font-semibold leading-6 text-gray-900">Who is in this week?</h2>
|
|
<div className="lg:grid lg:grid-cols-12 lg:gap-x-16">
|
|
<div className="mt-10 text-center lg:col-start-8 lg:col-end-13 lg:row-start-1 lg:mt-9 xl:col-start-9">
|
|
<div className="flex items-center text-gray-900">
|
|
<button type="button" className="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
|
|
<span className="sr-only">Previous month</span>
|
|
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fillRule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
<div className="flex-auto text-sm font-semibold">January</div>
|
|
<button type="button" className="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
|
|
<span className="sr-only">Next month</span>
|
|
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fillRule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clipRule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div className="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500">
|
|
<div>M</div>
|
|
<div>T</div>
|
|
<div>W</div>
|
|
<div>T</div>
|
|
<div>F</div>
|
|
<div>S</div>
|
|
<div>S</div>
|
|
</div>
|
|
<div className="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200">
|
|
{/* Buttons */}
|
|
</div>
|
|
<button type="button" className="mt-8 w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Add event</button>
|
|
</div>
|
|
<ol className="mt-4 divide-y divide-gray-100 text-sm leading-6 lg:col-span-7 xl:col-span-8">
|
|
<li className="relative flex space-x-6 py-6 xl:static">
|
|
<img src="/Britt.jpg" alt="" className="h-14 w-14 flex-none rounded-full" />
|
|
<div className="flex-auto">
|
|
<h3 className="pr-10 font-semibold text-gray-900 xl:pr-0">Britt Bones</h3>
|
|
<dl className="mt-2 flex flex-col text-gray-500 xl:flex-row">
|
|
<div className="flex items-start space-x-3">
|
|
<dt className="mt-0.5">
|
|
<span className="sr-only">Date</span>
|
|
<svg className="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fillRule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clipRule="evenodd" />
|
|
</svg>
|
|
</dt>
|
|
<dd><time dateTime="2022-01-10T17:00">January 10th, 2022 at 5:00 PM</time></dd>
|
|
</div>
|
|
<div className="mt-2 flex items-start space-x-3 xl:ml-3.5 xl:mt-0 xl:border-l xl:border-gray-400 xl:pl-3.5">
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
<div className="absolute right-0 top-6 xl:relative xl:right-auto xl:top-auto xl:self-center">
|
|
<div>
|
|
<button type="button" className="-m-2 flex items-center rounded-full p-2 text-gray-500 hover:text-gray-600" id="menu-0-button" aria-expanded="false" aria-haspopup="true">
|
|
<span className="sr-only">Open options</span>
|
|
<svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path d="M3 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM8.5 10a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM15.5 8.5a1.5 1.5 0 100 3 1.5 1.5 0 000-3z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|