Skip to content

Commit

Permalink
feat: styling changes for create work sheet form
Browse files Browse the repository at this point in the history
  • Loading branch information
@citruscai
citruscai committed Jul 7, 2024
1 parent efb6110 commit 3575c0f
Show file tree
Hide file tree
Showing 8 changed files with 179 additions and 100 deletions.
Binary file added api/requirements.txt
View file
Binary file not shown.
12 changes: 6 additions & 6 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Image from 'next/image'
import Image from 'next/image';
import CreateWorksheetForm from '@/components/notes/CreateWorksheetForm/CreateWorkSheetForm';
import './globals.css';

Expand All @@ -8,16 +8,16 @@ export default function Home() {
<header className="bg-primary text-primary-foreground p-4">
<h1 className="text-xl font-bold">Home</h1>
</header>
<div className="flex-grow w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4">
<aside className="w-fixed w-full flex-shrink flex-grow-0 px-4">
<div className="flex-grow w-full flex flex-col sm:flex-row py-4">
<aside className="w-full sm:w-1/4 flex-shrink-0 px-4">
<div className="sticky top-0 p-4 w-full h-full">
{/* Sidebar content */}
</div>
</aside>
<main role="main" className="w-full flex-grow pt-1 px-3">
<main role="main" className="w-full sm:w-2/4 flex-grow pt-1 px-3">
<CreateWorksheetForm />
</main>
<aside className="w-fixed w-full flex-shrink flex-grow-0 px-2">
<aside className="w-full sm:w-1/4 flex-shrink-0 px-2">
<div className="flex sm:flex-col px-2">
{/* Additional sidebar content */}
</div>
Expand All @@ -27,5 +27,5 @@ export default function Home() {
Footer content
</footer>
</div>
)
);
}
39 changes: 21 additions & 18 deletions components/notes/CreateWorksheetForm/SelectLevelPage/LevelChoices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,28 @@ type LevelChoicesProps = {
};

const LevelChoices: React.FC<LevelChoicesProps> = ({ selectedLevel, onChange }) => {
const options = [
{ value: 'moderate', label: 'Moderate Support' },
{ value: 'high', label: 'High Support' },
{ value: 'questions', label: 'Questions' }
];

return (
<RadioGroup
defaultValue={selectedLevel}
onValueChange={onChange}
className="mb-4 theme-custom p-4 border border-border rounded-lg bg-background"
>
<div className="flex items-center space-x-2">
<RadioGroupItem value="moderate" id="r1" />
<Label htmlFor="r1" className="">Moderate Support</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="high" id="r2" />
<Label htmlFor="r2" className="">High Support</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="questions" id="r3" />
<Label htmlFor="r3" className="">Questions</Label>
</div>
</RadioGroup>
<div className="grid gap-4">
{options.map((option) => (
<div
key={option.value}
className={`p-4 rounded-lg border transition-colors cursor-pointer ${
selectedLevel === option.value
? 'bg-primary text-primary-foreground border-primary'
: 'hover:bg-muted'
}`}
onClick={() => onChange(option.value)}
>
<h3 className="text-xl font-semibold">{option.label}</h3>
</div>
))}
</div>
);
};

Expand Down
72 changes: 64 additions & 8 deletions components/notes/CreateWorksheetForm/SelectLevelPage/LevelDescriptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,78 @@ type LevelDescriptionProps = {
level: string;
};

const levelDescriptions: { [key: string]: string } = {
moderate: "Moderate Support: Ideal for quick guidance and minor assistance.",
high: "High Support: Suitable for detailed guidance and thorough support.",
questions: "Questions: Best for interactive sessions with questions and answers.",
};

const LevelDescriptions: React.FC<LevelDescriptionProps> = ({ level }) => {
return (
<motion.div
key={level}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
className="p-4 border border-primary rounded-lg"
className="bg-muted rounded-lg p-4"
>
<p className="text-primary">{levelDescriptions[level]}</p>
{level === "moderate" && (
<>
<h3 className="text-xl font-semibold mb-2">Moderate Support</h3>
<p>Fill in the blank notes ideal for advanced students who need minor assistance.</p>
<div className="grid gap-4 mt-4">
<div>
<p>Guided notes are ____________________________________</p>

</div>
<div>
<p>They provide a ___________ framework that students can fill in during ___________.</p>

</div>
<div>
<p>Guided notes can improve ___________ and ___________.</p>

</div>
</div>
</>
)}
{level === "high" && (
<>
<h3 className="text-xl font-semibold mb-2">High Support</h3>
<p>High Support: Suitable for students that need guidance and support.</p>
<div className="grid gap-4 mt-4">
<div>
<p>Guided notes are <span className="font-bold">_____</span> tools designed to help students <span className="font-bold">____</span> and <span className="font-bold">_____</span> key concepts.</p>

</div>
<div>
<p>They provide a <span className="font-bold">____</span> framework that students can fill in during <span className="font-bold">____</span>.</p>

</div>
<div>
<p>Guided notes can improve <span className="font-bold">_____</span> and <span className="font-bold">_________</span>.</p>
<input
type="text"
className="w-full border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500"
/>
</div>
</div>
</>
)}
{level === "questions" && (
<>
<h3 className="text-xl font-semibold mb-2">Questions</h3>
<p>Best for interactive sessions with questions and answers.</p>
<div className="grid gap-4 mt-4">
<div>
<p>What are guided notes?</p>
<p className="font-bold">Guided notes are structured tools designed to help students understand and retain key concepts.</p>
</div>
<div>
<p>How do guided notes help in learning?</p>
<p className="font-bold">They provide a clear framework that students can fill in during lessons, improving comprehension and engagement.</p>
</div>
<div>
<p>What are the benefits of using guided notes?</p>
<p className="font-bold">Guided notes can improve comprehension and engagement.</p>
</div>
</div>
</>
)}
</motion.div>
);
};
Expand Down
81 changes: 45 additions & 36 deletions components/notes/CreateWorksheetForm/SelectLevelPage/SelectLevelStep.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import LevelDescriptions from './LevelDescriptions';
import { Button } from '@/components/ui/button';
import { useRouter } from 'next/navigation';
import { generatePDF } from '@/lib/worksheetGenerator';
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';

type SelectLevelStepProps = {
prev: () => void;
Expand All @@ -28,24 +29,23 @@ const SelectLevelStep: React.FC<SelectLevelStepProps> = ({ prev }) => {
return text.replace(/‘/g, "'").replace(/’/g, "'");
};


const uploadWorksheet = async (pdf: Blob, fileName: string): Promise<string> => {
const formData = new FormData();
formData.append('file', pdf, fileName);
const response = await fetch('/api/worksheets/upload', {

const response = await fetch('/api/worksheets/upload', {
method: 'POST',
body: formData,
});

if (!response.ok) {
throw new Error(`Failed to upload PDF: ${response.statusText}`);
}

const data = await response.json();
return data.file_url;
};

const submitData = async () => {
setIsSubmitting(true);
try {
Expand All @@ -54,13 +54,13 @@ const SelectLevelStep: React.FC<SelectLevelStepProps> = ({ prev }) => {
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: formState.notes.text, level: selectedLevel })
});

if (!response.ok) {
throw new Error(`Failed to upload notes: ${response.statusText}`);
}

const jsonResponse = await response.json();

let parsedText;
try {
const sanitizedText = jsonResponse.text
Expand All @@ -73,27 +73,27 @@ const SelectLevelStep: React.FC<SelectLevelStepProps> = ({ prev }) => {
console.error('Error parsing text field:', parseError);
throw new Error('Invalid JSON structure in text field.');
}

const guidedNotesPdf = await generatePDF(parsedText, jsonResponse.level);
const solutionsPdf = await generatePDF(parsedText, jsonResponse.level, true);

const sanitizedTitle = parsedText.title
? parsedText.title.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').toLowerCase()
: 'guided-notes';

const guidedNotesUrl = await uploadWorksheet(guidedNotesPdf, `${sanitizedTitle}-guided-notes.pdf`);
const solutionsUrl = await uploadWorksheet(solutionsPdf, `${sanitizedTitle}-solutions.pdf`);

const saveResponse = await fetch('/api/worksheets/save-urls', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: jsonResponse.id, guidedNotesUrl, solutionsUrl })
});

if (!saveResponse.ok) {
throw new Error('Failed to save PDF URLs');
}

router.push(`/guidednotes/${jsonResponse.id}`);
} catch (error) {
if (error instanceof Error) {
Expand All @@ -103,30 +103,39 @@ const SelectLevelStep: React.FC<SelectLevelStepProps> = ({ prev }) => {
setIsSubmitting(false);
}
};

return (
<div className="flex flex-col space-y-4 theme-custom">
<h1 className="text-2xl mb-4 text-primary">Select Level</h1>
<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
<div className="flex-1">
<LevelChoices selectedLevel={selectedLevel} onChange={handleLevelChange} />
<div className="relative">
{isSubmitting && (
<div className="absolute inset-0 flex items-center justify-center bg-white bg-opacity-75 z-50">
<LoadingSpinner />
</div>
<div className="flex-1">
<LevelDescriptions level={selectedLevel} />
)}
<div className="grid grid-cols-[1fr_300px] gap-8 w-full max-w-6xl mx-auto py-12 px-4 md:px-6">
<div className="flex flex-col justify-between h-full">
<div>
<h1 className="text-4xl font-bold mb-6">Select a level</h1>
<div className="grid gap-4">
<LevelChoices selectedLevel={selectedLevel} onChange={handleLevelChange} />
</div>
</div>
<div className="w-full mt-4 flex justify-between space-x-2">
<Button onClick={prev} variant="default" className="mr-2">
Back
</Button>
<Button
onClick={submitData}
disabled={isSubmitting}
variant="default"
className={`${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
>
{isSubmitting ? 'Submitting...' : 'Submit'}
</Button>
</div>
</div>
</div>
<div className="w-full mt-4 flex justify-between space-x-2">
<Button onClick={prev} variant="default" className="mr-2">
Back
</Button>
<Button
onClick={submitData}
disabled={isSubmitting}
variant="default"
className={`${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
>
{isSubmitting ? 'Submitting...' : 'Submit'}
</Button>
{selectedLevel && (
<LevelDescriptions level={selectedLevel} />
)}
</div>
</div>
);
Expand Down
Loading

0 comments on commit 3575c0f

Please sign in to comment.