Current section
Files
Jump to
Current section
Files
lib/pyraui_web/live/docs/datepicker_docs.ex
defmodule PyrauiWeb.DocsLive.DatepickerDocs do
use PyrauiWeb, :html
def render(assigns) do
~H"""
<div class="space-y-16 px-4 py-12 text-slate-900 sm:px-8 lg:px-12 xl:px-16 2xl:px-24">
<header class="space-y-4">
<span class="inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-sky-600">
Date design <span class="h-1 w-1 rounded-full bg-sky-500"></span> Suite
</span>
<h1 class="text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl">DatePicker</h1>
<p class="max-w-3xl text-base leading-relaxed text-slate-600 sm:text-lg">
Luminous shells, inline helpers, and smooth focus cues transform native date inputs into premium scheduling controls.
</p>
</header>
<section class="space-y-8">
<div class="space-y-8">
<div class="space-y-2">
<h2 class="text-2xl font-semibold text-slate-900">Hero scheduling</h2>
<p class="max-w-xl text-sm text-slate-600">
Pair soft gradients with helper copy to guide customers through booking flows or onboarding journeys.
</p>
</div>
<div class="grid gap-6 md:grid-cols-2">
<Pyraui.Components.DatePicker.datepicker
label="Check-in"
value="2025-04-18"
helper="Flexible up to 24 hours before"
/>
<Pyraui.Components.DatePicker.datepicker
label="Check-out"
value="2025-04-22"
helper="Late check-out available"
/>
<Pyraui.Components.DatePicker.datepicker
label="Meeting"
type={:datetime_local}
helper="Local timezone applied"
/>
<Pyraui.Components.DatePicker.datepicker
label="Focus timer"
type={:time}
variant={:outline}
helper="Start anytime today"
/>
</div>
</div>
<div class="space-y-5">
<span class="text-xs uppercase tracking-[0.3em] text-slate-500">Snippet</span>
<pre class="overflow-x-auto rounded-xl bg-slate-900/95 p-6 text-sm leading-6 text-slate-100 shadow-[0_35px_90px_-60px_rgba(15,23,42,0.35)]">
<code phx-no-curly-interpolation class="block whitespace-pre">
<.datepicker label="Check-in" value="2025-04-18" helper="Flexible up to 24 hours before" />
<.datepicker label="Meeting" type={:datetime_local} helper="Local timezone applied" />
</code>
</pre>
</div>
</section>
<section class="grid gap-10 lg:grid-cols-[1.1fr_1fr]">
<div class="space-y-6">
<div class="space-y-2">
<h3 class="text-xl font-semibold text-slate-900">Size palette</h3>
<p class="max-w-xl text-sm text-slate-600">
Each size adjusts padding, typography, and icon treatments—perfect for responsive dashboards and mobile trays.
</p>
</div>
<div class="grid gap-5 md:grid-cols-3">
<div class="space-y-3">
<span class="text-xs font-semibold uppercase tracking-[0.25em] text-slate-500">
Soft · sm
</span>
<Pyraui.Components.DatePicker.datepicker label="Sprint start" size={:sm} />
</div>
<div class="space-y-3">
<span class="text-xs font-semibold uppercase tracking-[0.25em] text-slate-500">
Soft · md
</span>
<Pyraui.Components.DatePicker.datepicker label="Campaign launch" size={:md} />
</div>
<div class="space-y-3">
<span class="text-xs font-semibold uppercase tracking-[0.25em] text-slate-500">
Outline · lg
</span>
<Pyraui.Components.DatePicker.datepicker
label="Executive review"
size={:lg}
variant={:outline}
/>
</div>
</div>
</div>
<div class="space-y-6">
<div class="space-y-2">
<h3 class="text-xl font-semibold text-slate-900">Micro UX</h3>
<p class="text-sm text-slate-600">
Validation and helper text stay polished, with animated focus states and graceful fallbacks.
</p>
</div>
<div class="space-y-5">
<Pyraui.Components.DatePicker.datepicker
label="Window start"
min="2025-01-01"
max="2025-12-31"
helper="Select within 2025"
/>
<Pyraui.Components.DatePicker.datepicker
label="Required"
required={true}
error="This field is required"
/>
<Pyraui.Components.DatePicker.datepicker
label="Without icon"
icon={false}
helper="Great for tight list rows"
/>
</div>
</div>
</section>
<section class="space-y-6">
<div class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
<div class="max-w-2xl space-y-2">
<h3 class="text-xl font-semibold text-slate-900">Temporal variety</h3>
<p class="text-sm text-slate-600">
Month and week pickers use the same shell, so alternative date granularities stay on-brand.
</p>
</div>
<div class="inline-flex items-center gap-2 rounded-full border border-indigo-200 bg-indigo-50 px-4 py-1 text-xs tracking-[0.3em] text-indigo-600">
Calendar masks
</div>
</div>
<div class="grid gap-6 md:grid-cols-3">
<Pyraui.Components.DatePicker.datepicker label="Month view" type={:month} />
<Pyraui.Components.DatePicker.datepicker label="Week selection" type={:week} />
<Pyraui.Components.DatePicker.datepicker
label="Time blocker"
type={:time}
variant={:outline}
/>
</div>
</section>
<section class="space-y-6">
<h3 class="text-xl font-semibold text-slate-900">Props</h3>
<p class="max-w-2xl text-sm text-slate-600">
Variants tune the shell styling while sizes align with typography tokens. Toggle icons or inject helper copy to personalise flows.
</p>
<div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_30px_80px_-60px_rgba(15,23,42,0.25)]">
<table class="min-w-full divide-y divide-slate-100 text-sm text-slate-700">
<thead class="bg-slate-50 text-xs uppercase tracking-[0.25em] text-slate-500">
<tr>
<th class="px-6 py-4 text-left">Prop</th>
<th class="px-6 py-4 text-left">Type</th>
<th class="px-6 py-4 text-left">Default</th>
<th class="px-6 py-4 text-left">Description</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr>
<td class="px-6 py-4 font-medium text-slate-900">variant</td>
<td class="px-6 py-4">:soft | :outline</td>
<td class="px-6 py-4 text-sky-500">:soft</td>
<td class="px-6 py-4">
Switch between glassy gradients or crisp outline styling.
</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-slate-900">size</td>
<td class="px-6 py-4">:sm | :md | :lg</td>
<td class="px-6 py-4 text-sky-500">:md</td>
<td class="px-6 py-4">
Controls padding, radius, and typography scale.
</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-slate-900">icon</td>
<td class="px-6 py-4">boolean</td>
<td class="px-6 py-4 text-sky-500">true</td>
<td class="px-6 py-4">
Toggle the calendar hero icon for ultra-compact layouts.
</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-slate-900">helper</td>
<td class="px-6 py-4">string | nil</td>
<td class="px-6 py-4 text-sky-500">nil</td>
<td class="px-6 py-4">
Optional supporting copy displayed below the control.
</td>
</tr>
<tr>
<td class="px-6 py-4 font-medium text-slate-900">error</td>
<td class="px-6 py-4">string | nil</td>
<td class="px-6 py-4 text-sky-500">nil</td>
<td class="px-6 py-4">
Highlights validation state with rose accents and messaging.
</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
"""
end
end