Skip to content

Commit 8e05f1f

Browse files
AlexVOiceoverAlexVOiceover
committed
style: added subquetsions counter
1 parent 72ab3f7 commit 8e05f1f

File tree

12 files changed

+190
-59
lines changed

12 files changed

+190
-59
lines changed

‎src/components/StatementBuilder.tsx‎

Whitespace-only changes.

‎src/components/statementWizard/StatementPreview.tsx‎

Lines changed: 55 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,70 @@
11
import React from 'react';
2-
import type { Entry } from '../../../types/entries';
2+
import type { Entry, Step } from '../../../types/entries';
33
import { getVerbName } from '../../../utils/verbUtils';
4+
import { MailPlus, MailX, FileText } from 'lucide-react';
45

56
interface StatementPreviewProps {
67
selection: Entry;
78
}
89

910
const StatementPreview: React.FC<StatementPreviewProps> = ({ selection }) => {
1011
const { subject, verb, object, adverbial } = selection.atoms;
12+
const { isPublic } = selection;
13+
14+
// Get the current step from the wizard
15+
const currentStep = selection.currentStep as Step | undefined;
16+
17+
// Only show the preview if we have at least a subject
18+
const hasContent = Boolean(subject.trim());
19+
20+
// Only show privacy icon if we've reached or passed that step
21+
const showPrivacyIcon = currentStep === 'privacy' || currentStep === 'complement';
22+
23+
if (!hasContent) return null;
1124

1225
return (
13-
<div className='mt-4 p-2 border-t border-gray-200 bg-gray-50'>
14-
<p className='text-sm text-gray-600 mb-2'>Current Statement:</p>
15-
<div className='flex flex-wrap gap-2'>
16-
{subject && (
17-
<span className={`px-2 py-1 rounded bg-subjectSelector text-black`}>
18-
{subject}
19-
</span>
20-
)}
21-
{verb && (
22-
<span className={`px-2 py-1 rounded bg-verbSelector text-black`}>
23-
{getVerbName(verb)}
24-
</span>
25-
)}
26-
{object && (
27-
<span className={`px-2 py-1 rounded bg-objectInput text-black`}>
28-
{object}
29-
</span>
30-
)}
31-
{adverbial &&
32-
adverbial.length > 0 &&
33-
adverbial.map((word, index) => (
34-
<span
35-
key={index}
36-
className={`px-2 py-1 rounded bg-gray-400 text-black`}
37-
>
38-
{word}
39-
</span>
40-
))}
26+
<div className='w-full pl-2 pr-4 mt-3 -mb-1 flex flex-wrap gap-1.5 items-center justify-start'>
27+
{/* Statement label */}
28+
<div className='flex items-center mr-1 text-gray-500'>
29+
<FileText size={12} className='mr-1' />
30+
<span className='text-xs font-medium'>Statement:</span>
4131
</div>
32+
33+
{/* Statement parts */}
34+
{subject && (
35+
<span className='px-1.5 py-0.5 text-xs rounded bg-subjectSelector text-black'>
36+
{subject}
37+
</span>
38+
)}
39+
{verb && (
40+
<span className='px-1.5 py-0.5 text-xs rounded bg-verbSelector text-black'>
41+
{getVerbName(verb)}
42+
</span>
43+
)}
44+
{object && (
45+
<span className='px-1.5 py-0.5 text-xs rounded bg-objectInput text-black'>
46+
{object}
47+
</span>
48+
)}
49+
50+
{/* Privacy indicator (only show after privacy step) */}
51+
{showPrivacyIcon && (
52+
<span className={`ml-0.5 flex-shrink-0 ${isPublic ? 'text-green-500' : 'text-gray-500'}`}>
53+
{isPublic ? <MailPlus size={14} /> : <MailX size={14} />}
54+
</span>
55+
)}
56+
57+
{/* Adverbials */}
58+
{adverbial &&
59+
adverbial.length > 0 &&
60+
adverbial.map((word, index) => (
61+
<span
62+
key={index}
63+
className='px-1.5 py-0.5 text-xs rounded bg-gray-400 text-black'
64+
>
65+
{word}
66+
</span>
67+
))}
4268
</div>
4369
);
4470
};

‎src/components/statementWizard/StatementWizard.tsx‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,10 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
163163

164164
// Render the current step component without navigation buttons.
165165
const renderStep = () => {
166+
// Calculate currentStep and totalSteps
167+
const currentStepNumber = currentStepIndex + 1;
168+
const totalSteps = steps.length;
169+
166170
switch (currentStep) {
167171
case 'subject':
168172
return (
@@ -176,6 +180,8 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
176180
atoms: { ...prev.atoms, subject: val },
177181
}))
178182
}
183+
currentStep={currentStepNumber}
184+
totalSteps={totalSteps}
179185
/>
180186
);
181187
case 'verb':
@@ -189,6 +195,8 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
189195
atoms: { ...prev.atoms, verb: val },
190196
}))
191197
}
198+
currentStep={currentStepNumber}
199+
totalSteps={totalSteps}
192200
/>
193201
);
194202
case 'object':
@@ -203,6 +211,8 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
203211
atoms: { ...prev.atoms, object: val },
204212
}))
205213
}
214+
currentStep={currentStepNumber}
215+
totalSteps={totalSteps}
206216
/>
207217
);
208218
case 'category':
@@ -215,6 +225,8 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
215225
category: val,
216226
}))
217227
}
228+
currentStep={currentStepNumber}
229+
totalSteps={totalSteps}
218230
/>
219231
);
220232
case 'privacy':
@@ -227,10 +239,17 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
227239
isPublic: val,
228240
}))
229241
}
242+
currentStep={currentStepNumber}
243+
totalSteps={totalSteps}
230244
/>
231245
);
232246
case 'complement':
233-
return <ComplementStep />;
247+
return (
248+
<ComplementStep
249+
currentStep={currentStepNumber}
250+
totalSteps={totalSteps}
251+
/>
252+
);
234253
default:
235254
return null;
236255
}
@@ -249,8 +268,10 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
249268
)}`}
250269
>
251270
{presetQuestion && (
252-
<div className='px-4 py-3 bg-gray-200 border-b'>
253-
<h2 className='text-xl font-bold'>{presetQuestion.mainQuestion}</h2>
271+
<div className='px-4 py-4 border-b'>
272+
<div className='flex items-center'>
273+
<h2 className='text-xl font-bold text-gray-800'>{presetQuestion.mainQuestion}</h2>
274+
</div>
254275
</div>
255276
)}
256277
<DialogDescription className='sr-only'>Wizard Steps</DialogDescription>
@@ -266,32 +287,34 @@ const StatementWizard: React.FC<StatementWizardProps> = ({
266287
{renderStep()}
267288
</motion.div>
268289
</AnimatePresence>
269-
<StatementPreview selection={selection} />
270290
{/* Navigation Panel */}
271-
<div className='flex justify-center p-4 gap-4'>
291+
<div className='flex justify-center p-4 pb-3 mb-0 gap-4'>
272292
<Button
273293
onClick={goBack}
274294
disabled={currentStepIndex === 0}
275-
variant='pink'
276-
// className='mx-auto'
295+
variant='outline'
296+
className='shadow-sm'
277297
>
278-
Back
298+
<span>Back</span>
279299
</Button>
280300
<Button
281-
variant='pink'
282-
// className='mx-auto'
301+
variant='default'
302+
className='shadow-sm'
283303
onClick={
284304
currentStepIndex === steps.length - 1 ? handleComplete : goNext
285305
}
286306
disabled={!isStepValid(currentStep) || isSubmitting}
287307
>
288-
{isSubmitting
289-
? 'Submitting...'
290-
: currentStepIndex === steps.length - 1
291-
? 'Create Statement'
292-
: 'Next'}
308+
<span>
309+
{isSubmitting
310+
? 'Submitting...'
311+
: currentStepIndex === steps.length - 1
312+
? 'Create Statement'
313+
: 'Next'}
314+
</span>
293315
</Button>
294316
</div>
317+
<StatementPreview selection={{...selection, currentStep}} />
295318
</DialogContent>
296319
</Dialog>
297320
);

‎src/components/statementWizard/StepContainer.tsx‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,38 @@ interface StepContainerProps {
99
showBack?: boolean;
1010
onBack?: () => void;
1111
children: React.ReactNode;
12+
currentStep?: number;
13+
totalSteps?: number;
1214
}
1315

1416
const StepContainer: React.FC<StepContainerProps> = ({
1517
subQuestion,
1618
showBack = false,
1719
onBack,
1820
children,
21+
currentStep = 1,
22+
totalSteps = 5,
1923
}) => (
2024
<div className='p-2 space-y-4'>
21-
<div className='flex items-center'>
25+
<div className='flex items-center mb-2'>
2226
{showBack && onBack && (
23-
<Button variant='outline' size='compact' onClick={onBack} className='mr-2 p-2'>
27+
<Button
28+
variant='outline'
29+
size='compact'
30+
onClick={onBack}
31+
className='mr-2 p-2'
32+
>
2433
<ArrowLeft className='w-4 h-4' />
2534
</Button>
2635
)}
27-
<h2 className='text-xl font-semibold'>{subQuestion}</h2>
36+
<div className='flex items-center'>
37+
<div className='flex items-center justify-center w-6 h-6 rounded-full border border-gray-300 bg-gray-50 mr-2'>
38+
<span className='text-xs font-medium text-gray-500'>
39+
{currentStep}/{totalSteps}
40+
</span>
41+
</div>
42+
<h2 className='text-md font-medium text-gray-700'>{subQuestion}</h2>
43+
</div>
2844
</div>
2945
{children}
3046
</div>

‎src/components/statementWizard/steps/CategoryStep.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import statementsCategories from '../../../../data/statementsCategories.json';
77
interface CategoryStepProps {
88
selection: string;
99
onUpdate: (val: string) => void;
10+
currentStep?: number;
11+
totalSteps?: number;
1012
}
1113

1214
export const CategoryStep: React.FC<CategoryStepProps> = ({
1315
selection,
1416
onUpdate,
17+
currentStep = 4,
18+
totalSteps = 5,
1519
}) => {
1620
const subQuestion = `You can set a category for your statement`;
1721
const categories = statementsCategories.categories || [];
@@ -21,7 +25,12 @@ export const CategoryStep: React.FC<CategoryStepProps> = ({
2125
selection.toLowerCase() === 'uncategorized';
2226

2327
return (
24-
<StepContainer subQuestion={subQuestion} showBack>
28+
<StepContainer
29+
subQuestion={subQuestion}
30+
showBack
31+
currentStep={currentStep}
32+
totalSteps={totalSteps}
33+
>
2534
<div className='grid grid-cols-2 gap-3 max-h-[60vh] overflow-y-auto p-2'>
2635
{categories.map((cat: { id: string; name: string }) => (
2736
<Button

‎src/components/statementWizard/steps/ComplementStep.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
import React from 'react';
22
import StepContainer from '../StepContainer';
33

4-
export const ComplementStep: React.FC = () => {
4+
interface ComplementStepProps {
5+
currentStep?: number;
6+
totalSteps?: number;
7+
}
8+
9+
export const ComplementStep: React.FC<ComplementStepProps> = ({
10+
currentStep = 5,
11+
totalSteps = 5
12+
}) => {
513
const subQuestion = 'Add additional statement if needed';
614
return (
7-
<StepContainer subQuestion={subQuestion}>
15+
<StepContainer
16+
subQuestion={subQuestion}
17+
currentStep={currentStep}
18+
totalSteps={totalSteps}
19+
>
820
<div className='text-center p-4'>
921
<p className='text-lg'>
1022
If you feel your statement didn't fully answer the question, you can

‎src/components/statementWizard/steps/ObjectStep.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,29 @@ interface ObjectStepProps {
99
verb: string;
1010
selection: string;
1111
onUpdate: (val: string) => void;
12+
currentStep?: number;
13+
totalSteps?: number;
1214
}
1315

1416
export const ObjectStep: React.FC<ObjectStepProps> = ({
1517
subject,
1618
verb,
1719
selection,
1820
onUpdate,
21+
currentStep = 3,
22+
totalSteps = 5,
1923
}) => {
2024
const subQuestion = `In what way does ${subject} ${getVerbName(
2125
verb
2226
)}? What's the context?`;
2327

2428
return (
25-
<StepContainer subQuestion={subQuestion} showBack>
29+
<StepContainer
30+
subQuestion={subQuestion}
31+
showBack
32+
currentStep={currentStep}
33+
totalSteps={totalSteps}
34+
>
2635
<div className='p-4 rounded-md'>
2736
<Input
2837
autoFocus

0 commit comments

Comments
 (0)