ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Side Sheets instead of Modals

Browse Source
This commit is contained in:
AG
2025-12-12 00:25:15 +02:00
parent 87f639e320
commit e1e956d6b2
7 changed files with 145 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/Plans.tsx
View File

@@ -13,6 +13,7 @@ import { toTitleCase } from '../utils/text';
import { Button } from './ui/Button';
import { Card } from './ui/Card';
import { Modal } from './ui/Modal';
import { SideSheet } from './ui/SideSheet';
interface PlansProps {
lang: Language;
@@ -297,11 +298,11 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
</div>
</div>
<Modal
<SideSheet
isOpen={showExerciseSelector}
onClose={() => setShowExerciseSelector(false)}
title={t('select_exercise', lang)}
maxWidth="md"
width="lg"
>
<div className="flex flex-col h-[60vh]">
<div className="flex justify-end mb-2">
@@ -325,13 +326,13 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
))}
</div>
</div>
</Modal>
</SideSheet>
<Modal
<SideSheet
isOpen={isCreatingExercise}
onClose={() => setIsCreatingExercise(false)}
title={t('create_exercise', lang)}
maxWidth="md"
width="md"
>
<div className="space-y-6 pt-2">
<FilledInput
@@ -390,7 +391,7 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
</Button>
</div>
</div>
</Modal>
</SideSheet>
</div>
);
}
@@ -468,19 +469,23 @@ const Plans: React.FC<PlansProps> = ({ lang }) => {
{/* Preparation Modal */}
{showPlanPrep && (
<div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-6 backdrop-blur-sm">
<div className="w-full max-w-sm bg-surface-container rounded-[28px] p-6 shadow-elevation-3">
<h3 className="text-2xl font-normal text-on-surface mb-4">{showPlanPrep.name}</h3>
<div className="bg-surface-container-high p-4 rounded-xl text-on-surface-variant text-sm mb-8">
<SideSheet
isOpen={!!showPlanPrep}
onClose={() => setShowPlanPrep(null)}
title={showPlanPrep.name}
width="md"
>
<div className="space-y-8">
<div className="bg-surface-container-high p-4 rounded-xl text-on-surface-variant text-sm">
<div className="text-xs font-bold text-primary mb-2">{t('prep_title', lang)}</div>
{showPlanPrep.description || t('prep_no_instructions', lang)}
</div>
<div className="flex justify-end gap-2">
<button onClick={() => setShowPlanPrep(null)} className="px-6 py-2.5 rounded-full text-primary font-medium hover:bg-white/5">{t('cancel', lang)}</button>
<button onClick={confirmPlanStart} className="px-6 py-2.5 rounded-full bg-primary text-on-primary font-medium">{t('start', lang)}</button>
<Button onClick={() => setShowPlanPrep(null)} variant="ghost">{t('cancel', lang)}</Button>
<Button onClick={confirmPlanStart}>{t('start', lang)}</Button>
</div>
</div>
</div>
</SideSheet>
)}
</div>
);