mirror of
https://github.com/temetro/temetro.git
synced 2026-07-26 11:58:14 +00:00
Khalid Abdi
929bec8f31
Stop blocking AI imports/proposals on missing non-critical fields. Records the chat agent drafts now save with safe placeholders, auto-generated file numbers, and a source="ai" marker that surfaces an "Added by AI" badge so a clinician can review/edit them later. Backend: - add `source` (manual|ai) column to patients/appointments/prescriptions (migration 0014) + canonical types, services, validation schemas - relax patient/appointment validation: empty file number allowed, demographic + type/provider/initials fall back to placeholders (initials derived from name) - patients.generateFileNumber() auto-assigns an MRN when one is missing - proposeAppointment accepts a name when no file number resolves; AI commits + /api/ai/import stamp source="ai" Frontend: - `source` on Appointment/Patient/Prescription types; AI commits send source="ai" - reusable <AiBadge> shown on the Patients table/detail and prescriptions list Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
49 lines
1.6 KiB
Markdown
49 lines
1.6 KiB
Markdown
# Shimmer
|
|
|
|
An animated text shimmer component for creating eye-catching loading states and progressive reveal effects.
|
|
|
|
The `Shimmer` component provides an animated shimmer effect that sweeps across text, perfect for indicating loading states, progressive reveals, or drawing attention to dynamic content in AI applications.
|
|
|
|
See `scripts/shimmer.tsx` for this example.
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npx ai-elements@latest add shimmer
|
|
```
|
|
|
|
## Features
|
|
|
|
- Smooth animated shimmer effect using CSS gradients and Framer Motion
|
|
- Customizable animation duration and spread
|
|
- Polymorphic component - render as any HTML element via the `as` prop
|
|
- Automatic spread calculation based on text length
|
|
- Theme-aware styling using CSS custom properties
|
|
- Infinite looping animation with linear easing
|
|
- TypeScript support with proper type definitions
|
|
- Memoized for optimal performance
|
|
- Responsive and accessible design
|
|
- Uses `text-transparent` with background-clip for crisp text rendering
|
|
|
|
## Examples
|
|
|
|
### Different Durations
|
|
|
|
See `scripts/shimmer-duration.tsx` for this example.
|
|
|
|
### Custom Elements
|
|
|
|
See `scripts/shimmer-elements.tsx` for this example.
|
|
|
|
## Props
|
|
|
|
### `<Shimmer />`
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| `children` | `string` | - | The text content to apply the shimmer effect to. |
|
|
| `as` | `ElementType` | - | The HTML element or React component to render. |
|
|
| `className` | `string` | - | Additional CSS classes to apply to the component. |
|
|
| `duration` | `number` | `2` | The duration of the shimmer animation in seconds. |
|
|
| `spread` | `number` | `2` | The spread multiplier for the shimmer gradient, multiplied by text length. |
|