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

Top bar for Quick Log

Browse Source
This commit is contained in:
AG
2025-12-19 09:46:04 +02:00
parent 6f25507922
commit 1d8bcdd626
2 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Tracker/SporadicView.tsx
View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { CheckCircle, Plus, Pencil, Trash2, X, Save } from 'lucide-react'; import { CheckCircle, Plus, Pencil, Trash2, X, Save } from 'lucide-react';
import { TopBar } from '../ui/TopBar';
import { Language, WorkoutSet } from '../../types'; import { Language, WorkoutSet } from '../../types';
import { t } from '../../services/i18n'; import { t } from '../../services/i18n';
import ExerciseModal from '../ExerciseModal'; import ExerciseModal from '../ExerciseModal';
@@ -76,8 +77,14 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
return ( return (
<div className="flex flex-col h-full max-h-full overflow-hidden relative bg-surface"> <div className="flex flex-col h-full max-h-full overflow-hidden relative bg-surface">
<div className="px-4 py-3 bg-surface-container shadow-elevation-1 z-20 grid grid-cols-[1fr_auto_1fr] items-center"> <TopBar
<div className="flex justify-start"> title={
<span className="flex items-center gap-2">
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
{t('quick_log', lang)}
</span>
}
actions={
<button <button
onClick={() => { onClick={() => {
resetForm(); resetForm();
@@ -87,16 +94,8 @@ const SporadicView: React.FC<SporadicViewProps> = ({ tracker, lang }) => {
> >
{t('quit', lang)} {t('quit', lang)}
</button> </button>
</div> }
<div className="flex flex-col items-center"> />
<h2 className="text-title-medium text-on-surface flex items-center gap-2 font-medium">
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
{t('quick_log', lang)}
</h2>
</div>
<div />
</div>
<div className="flex-1 overflow-y-auto p-4 pb-32 space-y-6"> <div className="flex-1 overflow-y-auto p-4 pb-32 space-y-6">
<SetLogger <SetLogger

14
src/components/ui/TopBar.tsx
View File

@@ -2,20 +2,26 @@ import React from 'react';
import { LucideIcon } from 'lucide-react'; import { LucideIcon } from 'lucide-react';
interface TopBarProps { interface TopBarProps {
title: string; title: string | React.ReactNode;
icon?: LucideIcon; icon?: LucideIcon;
actions?: React.ReactNode; actions?: React.ReactNode;
leading?: React.ReactNode;
} }
export const TopBar: React.FC<TopBarProps> = ({ title, icon: Icon, actions }) => { export const TopBar: React.FC<TopBarProps> = ({ title, icon: Icon, actions, leading }) => {
return ( return (
<div className="p-4 bg-surface-container shadow-elevation-1 flex items-center gap-3 z-10 shrink-0 rounded-b-[24px]"> <div className="p-4 bg-surface-container shadow-elevation-1 flex items-center gap-3 z-10 shrink-0 rounded-b-[24px]">
{Icon && ( {leading}
{!leading && Icon && (
<div className="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center"> <div className="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center">
<Icon size={20} className="text-on-secondary-container" /> <Icon size={20} className="text-on-secondary-container" />
</div> </div>
)} )}
<h2 className="text-xl font-normal text-on-surface flex-1">{title}</h2> {typeof title === 'string' ? (
<h2 className="text-xl font-normal text-on-surface flex-1">{title}</h2>
) : (
<div className="flex-1 text-xl font-normal text-on-surface">{title}</div>
)}
{actions && <div className="flex items-center gap-2">{actions}</div>} {actions && <div className="flex items-center gap-2">{actions}</div>}
</div> </div>
); );