feat: replace native select elements with custom Select component for improved styling and functionality in replays and settings pages
This commit is contained in:
Usman Baig
@@ -7,6 +7,7 @@ import { listReplays, formatDuration, type ReplayListItem, type ReplayFilters }
|
||||
import { toast } from 'sonner'
|
||||
import { LockClosedIcon } from '@radix-ui/react-icons'
|
||||
import LoadingOverlay from '@/components/LoadingOverlay'
|
||||
import Select from '@/components/ui/Select'
|
||||
|
||||
function formatDate(dateString: string) {
|
||||
const date = new Date(dateString)
|
||||
@@ -128,28 +129,28 @@ export default function ReplaysPage() {
|
||||
|
||||
{/* Filters */}
|
||||
<div className="mb-6 flex gap-4 flex-wrap">
|
||||
<select
|
||||
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
|
||||
value={filters.device_type || ''}
|
||||
onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))}
|
||||
>
|
||||
<option value="">All Devices</option>
|
||||
<option value="desktop">Desktop</option>
|
||||
<option value="mobile">Mobile</option>
|
||||
<option value="tablet">Tablet</option>
|
||||
</select>
|
||||
<Select
|
||||
value={filters.device_type ?? ''}
|
||||
onChange={(v) => setFilters((prev) => ({ ...prev, device_type: v || undefined, offset: 0 }))}
|
||||
options={[
|
||||
{ value: '', label: 'All Devices' },
|
||||
{ value: 'desktop', label: 'Desktop' },
|
||||
{ value: 'mobile', label: 'Mobile' },
|
||||
{ value: 'tablet', label: 'Tablet' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<select
|
||||
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
|
||||
value={filters.min_duration || ''}
|
||||
onChange={(e) => setFilters(prev => ({ ...prev, min_duration: e.target.value ? parseInt(e.target.value) : undefined, offset: 0 }))}
|
||||
>
|
||||
<option value="">Any Duration</option>
|
||||
<option value="5000">5s+</option>
|
||||
<option value="30000">30s+</option>
|
||||
<option value="60000">1m+</option>
|
||||
<option value="300000">5m+</option>
|
||||
</select>
|
||||
<Select
|
||||
value={filters.min_duration ? String(filters.min_duration) : ''}
|
||||
onChange={(v) => setFilters((prev) => ({ ...prev, min_duration: v ? parseInt(v, 10) : undefined, offset: 0 }))}
|
||||
options={[
|
||||
{ value: '', label: 'Any Duration' },
|
||||
{ value: '5000', label: '5s+' },
|
||||
{ value: '30000', label: '30s+' },
|
||||
{ value: '60000', label: '1m+' },
|
||||
{ value: '300000', label: '5m+' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Replays List */}
|
||||
|
||||
@@ -8,6 +8,7 @@ import { toast } from 'sonner'
|
||||
import LoadingOverlay from '@/components/LoadingOverlay'
|
||||
import VerificationModal from '@/components/sites/VerificationModal'
|
||||
import PasswordInput from '@/components/PasswordInput'
|
||||
import Select from '@/components/ui/Select'
|
||||
import { APP_URL, API_URL } from '@/lib/api/client'
|
||||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
import {
|
||||
@@ -305,26 +306,15 @@ export default function SiteSettingsPage() {
|
||||
<label htmlFor="timezone" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
Timezone
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
id="timezone"
|
||||
value={formData.timezone}
|
||||
onChange={(e) => setFormData({ ...formData, timezone: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-neutral-50/50 dark:bg-neutral-900/50 focus:bg-white dark:focus:bg-neutral-900
|
||||
focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white appearance-none"
|
||||
>
|
||||
{TIMEZONES.map((tz) => (
|
||||
<option key={tz} value={tz}>
|
||||
{tz}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
|
||||
<svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Select
|
||||
id="timezone"
|
||||
value={formData.timezone}
|
||||
onChange={(v) => setFormData({ ...formData, timezone: v })}
|
||||
options={TIMEZONES.map((tz) => ({ value: tz, label: tz }))}
|
||||
variant="input"
|
||||
fullWidth
|
||||
align="left"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
@@ -649,22 +639,18 @@ export default function SiteSettingsPage() {
|
||||
Control location tracking granularity
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={formData.collect_geo_data}
|
||||
onChange={(e) => setFormData({ ...formData, collect_geo_data: e.target.value as GeoDataLevel })}
|
||||
className="px-4 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white text-sm font-medium appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange"
|
||||
>
|
||||
<option value="full">Full (country, region, city)</option>
|
||||
<option value="country">Country only</option>
|
||||
<option value="none">None</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
|
||||
<svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Select
|
||||
value={formData.collect_geo_data}
|
||||
onChange={(v) => setFormData({ ...formData, collect_geo_data: v as GeoDataLevel })}
|
||||
options={[
|
||||
{ value: 'full', label: 'Full (country, region, city)' },
|
||||
{ value: 'country', label: 'Country only' },
|
||||
{ value: 'none', label: 'None' },
|
||||
]}
|
||||
variant="input"
|
||||
align="right"
|
||||
className="min-w-[200px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -850,24 +836,20 @@ export default function SiteSettingsPage() {
|
||||
How long to keep recordings
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={formData.replay_retention_days}
|
||||
onChange={(e) => setFormData({ ...formData, replay_retention_days: parseInt(e.target.value) })}
|
||||
className="px-4 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white text-sm font-medium appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange"
|
||||
>
|
||||
<option value={7}>7 days</option>
|
||||
<option value={14}>14 days</option>
|
||||
<option value={30}>30 days</option>
|
||||
<option value={60}>60 days</option>
|
||||
<option value={90}>90 days</option>
|
||||
</select>
|
||||
<div className="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
|
||||
<svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<Select
|
||||
value={String(formData.replay_retention_days)}
|
||||
onChange={(v) => setFormData({ ...formData, replay_retention_days: parseInt(v, 10) })}
|
||||
options={[
|
||||
{ value: '7', label: '7 days' },
|
||||
{ value: '14', label: '14 days' },
|
||||
{ value: '30', label: '30 days' },
|
||||
{ value: '60', label: '60 days' },
|
||||
{ value: '90', label: '90 days' },
|
||||
]}
|
||||
variant="input"
|
||||
align="right"
|
||||
className="min-w-[120px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user