Opening Times

Component Misc

Preview

OpeningTimes

---
import site from '@src/site.js';
import Flow from '@components/Flow.astro';

const dayNames = {
	mon: 'Monday',
	tue: 'Tuesday',
	wed: 'Wednesday',
	thu: 'Thursday',
	fri: 'Friday',
	sat: 'Saturday',
	sun: 'Sunday',
};

const days = Object.entries(site.openingTimes);
---

<div x-data="openingTimes">
	<Flow as="ul" space="xs">
		{
			days.map(([day, time]) => (
				<li
					class="relative flex items-center justify-between after:block after:absolute after:bottom-1.5 after:left-0 after:w-full after:border after:border-dotted after:z-10"
					x-bind:class={`{ 'font-bold': today === '${day}' }`}
				>
					<p class="bg-white pr-3 z-20">{dayNames[day]}</p>
					<p class="bg-white pl-3 z-20">{time}</p>
				</li>
			))
		}
	</Flow>
</div>

<script define:vars={{ days }}>
	window.openingTimes = function () {
		return {
			today: null,
			days: days,
			dayNames: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
			init: function () {
				let today = new Date().getDay();
				this.today = this.dayNames[today];
			},
		};
	};
</script>

---
import site from '@src/site.js';
import Flow from '@components/Flow.astro';

const dayNames = {
	mon: 'Monday',
	tue: 'Tuesday',
	wed: 'Wednesday',
	thu: 'Thursday',
	fri: 'Friday',
	sat: 'Saturday',
	sun: 'Sunday',
};

const days = Object.entries(site.openingTimes);
---

<div x-data="openingTimes">
	<Flow as="ul" space="xs">
		{
			days.map(([day, time]) => (
				<li
					class="relative flex items-center justify-between after:block after:absolute after:bottom-1.5 after:left-0 after:w-full after:border after:border-dotted after:z-10"
					x-bind:class={`{ 'font-bold': today === '${day}' }`}
				>
					<p class="bg-white pr-3 z-20">{dayNames[day]}</p>
					<p class="bg-white pl-3 z-20">{time}</p>
				</li>
			))
		}
	</Flow>
</div>

Monday

09:00 - 17:00
Tuesday

09:00 - 17:00
Wednesday

09:00 - 17:00
Thursday

09:00 - 17:00
Friday

09:00 - 17:00
Saturday

Closed
Sunday

Closed

This component is available with our Astro Starter Kit.

Usage

Before you use this component, be sure that you’ve added the opening times to src/site.js in the following format:

export default {
	...otherConfig,

	/**
	 * Opening Times
	 */
	openingTimes: {
		mon: '09:00 - 17:00',
		tue: '09:00 - 17:00',
		wed: '09:00 - 17:00',
		thu: '09:00 - 17:00',
		fri: '09:00 - 17:00',
		sat: 'Closed',
		sun: 'Closed',
	},
};

Now you can import the component into the page or component you need it and use it!

---
import OpeningTimes from '@components/OpeningTimes.astro';
---
<OpeningTimes />

The current day of the week will be highlighted. To change the styling, you can edit the OpeningTimes.astro file. The class applied is on line 24:

x-bind:class={`{ 'font-bold': today === '${day}' }`}