Massive Material 3 re-styling
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Plus, Trash2, PlayCircle, Dumbbell, Save, X, ChevronRight, List, ArrowUp, ArrowDown, Edit2, User, Flame, Timer as TimerIcon, Ruler, Footprints, Activity, Percent, CheckCircle, GripVertical, Scale, Search } from 'lucide-react';
|
||||
import { Plus, Trash2, PlayCircle, Dumbbell, Save, X, ChevronRight, List, ArrowUp, ArrowDown, Pencil, User, Flame, Timer as TimerIcon, Ruler, Footprints, Activity, Percent, CheckCircle, GripVertical, Scale, Search } from 'lucide-react';
|
||||
import { WorkoutPlan, ExerciseDef, PlannedSet, Language, ExerciseType } from '../types';
|
||||
import { getExercises, saveExercise } from '../services/storage';
|
||||
import { t } from '../services/i18n';
|
||||
@@ -14,6 +14,7 @@ import { Button } from './ui/Button';
|
||||
import { Card } from './ui/Card';
|
||||
import { Modal } from './ui/Modal';
|
||||
import { SideSheet } from './ui/SideSheet';
|
||||
import { Checkbox } from './ui/Checkbox';
|
||||
|
||||
interface PlansProps {
|
||||
lang: Language;
|
||||
@@ -213,15 +214,14 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
|
||||
onBlur={() => setName(toTitleCase(name))}
|
||||
/>
|
||||
|
||||
<div className="bg-surface-container-high rounded-t-lg border-b border-outline-variant px-4 py-2">
|
||||
<label className="text-[10px] text-on-surface-variant font-medium">{t('prep_title', lang)}</label>
|
||||
<textarea
|
||||
className="w-full bg-transparent text-base text-on-surface focus:outline-none pt-1 pb-2 min-h-[80px]"
|
||||
placeholder={t('plan_desc_ph', lang)}
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<FilledInput
|
||||
label={t('prep_title', lang)}
|
||||
value={description}
|
||||
onChange={(e: any) => setDescription(e.target.value)}
|
||||
multiline
|
||||
rows={3}
|
||||
type="text"
|
||||
/>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center px-2">
|
||||
@@ -404,57 +404,59 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
|
||||
<h2 className="text-2xl font-normal text-on-surface">{t('my_plans', lang)}</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-4 overflow-y-auto space-y-4 pb-24">
|
||||
<div className="flex-1 p-4 overflow-y-auto pb-24">
|
||||
{plans.length === 0 ? (
|
||||
<div className="text-center text-on-surface-variant mt-20 flex flex-col items-center">
|
||||
<div className="w-16 h-16 bg-surface-container-high rounded-full flex items-center justify-center mb-4">
|
||||
<List size={32} />
|
||||
</div>
|
||||
<p className="text-lg">{t('plans_empty', lang)}</p>
|
||||
<p className="text-headline-sm">{t('plans_empty', lang)}</p>
|
||||
</div>
|
||||
) : (
|
||||
plans.map(plan => (
|
||||
<Card key={plan.id} className="relative overflow-hidden">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="text-xl font-normal text-on-surface">{plan.name}</h3>
|
||||
<Button
|
||||
onClick={(e) => handleDelete(plan.id, e)}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Delete Plan"
|
||||
className="text-on-surface-variant hover:text-error hover:bg-white/5"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="absolute top-4 right-14">
|
||||
<Button
|
||||
onClick={(e) => { e.stopPropagation(); handleEdit(plan); }}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Edit Plan"
|
||||
className="text-on-surface-variant hover:text-primary hover:bg-white/5"
|
||||
>
|
||||
<Edit2 size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-on-surface-variant text-sm line-clamp-2 mb-4 min-h-[1.25rem]">
|
||||
{plan.description || t('prep_no_instructions', lang)}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-xs font-medium text-primary bg-primary-container/20 px-3 py-1 rounded-full">
|
||||
{plan.steps.length} {t('exercises_count', lang)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{plans.map(plan => (
|
||||
<Card key={plan.id} className="relative overflow-hidden group">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h3 className="text-title-lg font-normal text-on-surface">{plan.name}</h3>
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
onClick={(e) => { e.stopPropagation(); handleEdit(plan); }}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Edit Plan"
|
||||
className="text-on-surface-variant hover:text-primary hover:bg-surface-container-high"
|
||||
>
|
||||
<Pencil size={20} />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={(e) => handleDelete(plan.id, e)}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label="Delete Plan"
|
||||
className="text-on-surface-variant hover:text-error hover:bg-error-container/10"
|
||||
>
|
||||
<Trash2 size={20} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleStart(plan)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<PlayCircle size={18} />
|
||||
{t('start', lang)}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))
|
||||
<p className="text-on-surface-variant text-body-md line-clamp-2 mb-4 min-h-[1.5rem]">
|
||||
{plan.description || t('prep_no_instructions', lang)}
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-label-md font-medium text-primary bg-primary-container/20 px-3 py-1 rounded-full">
|
||||
{plan.steps.length} {t('exercises_count', lang)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleStart(plan)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<PlayCircle size={18} />
|
||||
{t('start', lang)}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user