mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-10-14 17:54:42 +00:00
33 lines
1.5 KiB
TypeScript
33 lines
1.5 KiB
TypeScript
import ThemeSegmentedControl from '../../theme/components/ThemeSegmentedControl';
|
|
|
|
const ThemeTryOut = () => (
|
|
<section className="bg-neutral text-neutral-content">
|
|
<div className="mx-auto grid max-w-7xl items-center gap-8 px-5 py-16 grid-cols-[repeat(auto-fit,minmax(min(100%,22rem),1fr))]">
|
|
<div className="flex flex-col gap-4">
|
|
<h2 className="m-0 font-serif text-3xl leading-tight">
|
|
Pick a pour that suits you
|
|
</h2>
|
|
<p className="m-0 max-w-[32rem] leading-[1.55] opacity-80">
|
|
Four themes ship with the app — a light lager, a dark roast stout, a berry
|
|
cassis and a bright weizen. Try one; this page switches with it.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="rounded-box border border-neutral-content/15 bg-base-100 p-4 text-base-content shadow-xl sm:p-5">
|
|
<div className="mb-4 flex items-center justify-between gap-4">
|
|
<div>
|
|
<p className="m-0 text-xs font-bold uppercase tracking-[0.18em] opacity-60">
|
|
Set the mood
|
|
</p>
|
|
<p className="m-0 mt-1 text-sm opacity-75">Your theme follows your pour.</p>
|
|
</div>
|
|
<span className="badge badge-outline shrink-0">4 pours</span>
|
|
</div>
|
|
<ThemeSegmentedControl labels="short" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
|
|
export default ThemeTryOut;
|