Bach branch

client/src/components/Flashcard/Flashcard.css

@@ -0,0 +1,42 @@
+.card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border-radius: 0.25rem;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.3);
+  background-color: white;
+  transform: perspective(1000px) rotateY(var(--rotate-y, 0))
+    translateY(var(--translate-y, 0));
+  transform-style: preserve-3d;
+  transition: 150ms;
+  cursor: pointer;
+  border: 2px solid #000;
+
+  width: 50%;
+  height: 500px;
+}
+
+.card:hover {
+  --translate-y: -2px;
+  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
+}
+
+.card.flip {
+  --rotate-y: 180deg;
+}
+
+.card .front,
+.card .back {
+  position: absolute;
+  padding: 1rem;
+  backface-visibility: hidden;
+}
+
+.card .back {
+  transform: rotateY(180deg);
+}
+
+.card .front {
+  transform: rotateY(0deg);
+}

client/src/components/Flashcard/Flashcard.js

@@ -0,0 +1,64 @@
+import { useState } from "react";
+
+import "./Flashcard.css";
+
+function Flashcard({ flashcards, setViewCard }) {
+  const [flip, setFlip] = useState(false); // Flip card hook
+  const [index, setIndex] = useState(0);
+
+  function handleRecord() {}
+  function handleSubmit() {}
+  function handleListen() {}
+
+  return (
+    <div>
+      <button onClick={() => setViewCard()}>Return to Assignments</button>
+      <div className="d-flex justify-content-center my-4">
+        {index > 0 ? (
+          <button
+            onClick={() => {
+              setIndex(index - 1);
+              setFlip(false);
+            }}
+          >
+            Left
+          </button>
+        ) : (
+          <></>
+        )}
+        <div
+          className={`card ${flip ? "flip" : ""}`}
+          onClick={() => setFlip(!flip)}
+        >
+          <div className="front">{flashcards[index].wordName}</div>
+          <div className="back">{flashcards[index].englishTranslation}</div>
+        </div>
+        {index < flashcards.length - 2 ? (
+          <button
+            onClick={() => {
+              setIndex(index + 1);
+              setFlip(false);
+            }}
+          >
+            Right
+          </button>
+        ) : (
+          <></>
+        )}
+      </div>
+      <div className="d-flex justify-content-around">
+        <button className="" onClick={handleRecord}>
+          Record
+        </button>
+        <button className="" onClick={handleSubmit}>
+          Submit
+        </button>
+        <button className="" onClick={handleListen}>
+          Listen
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Flashcard;

client/src/components/viewAssignments/viewAssignment.css

@@ -0,0 +1,88 @@
+/* General styling for view assignments */
+.viewAssignment {
+    padding: 10px;
+}
+
+/* Button container with flex layout */
+.button-container {
+    display: flex;
+    justify-content: space-between; /* Space buttons out */
+    align-items: center; /* Center buttons vertically */
+    margin-bottom: 20px; /* Add some margin below the container */
+}
+
+/* Styles for the back button */
+.backButton {
+    background-color: maroon; /* Less prominent color for secondary action */
+    color: white;
+    border: none;
+    padding: 5px 10px; /* Smaller padding */
+    font-size: 14px; /* Smaller font size */
+    cursor: pointer;
+    margin: 0 10px; /* Space between buttons */
+    border-radius: 5px; /* Rounded corners */
+    transition: background-color 0.4s, transform 0.2s; /* Smooth transitions for interaction */
+}
+
+/* Hover effect for back button */
+.backButton:hover {
+    background-color: darkred; /* Darken on hover */
+    transform: scale(1.05); /* Slight increase in size on hover */
+}
+
+/* Styles for the flashcard button */
+.flashCardButton {
+    background-color: maroon; /* Prominent color for primary action */
+    color: white;
+    border: none;
+    padding: 15px 30px; /* Larger padding for emphasis */
+    font-size: 18px; /* Larger font size */
+    cursor: pointer;
+    margin: 0 10px; /* Space between buttons */
+    border-radius: 5px; /* Rounded corners */
+    transition: background-color 0.4s, transform 0.2s; /* Smooth transitions for interaction */
+}
+
+/* Hover effect for flashcard button */
+.flashCardButton:hover {
+    background-color: darkred; /* Darken on hover */
+    transform: scale(1.05); /* Slight increase in size on hover */
+}
+
+/* Styling for lesson names */
+.lessonName {
+    margin-bottom: 20px;
+    color: maroon;
+}
+
+/* Container for tables with scrolling capability */
+.tableContainer {
+    max-height: 800px;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+}
+
+/* Styling for flashcard tables */
+.flashcardTable {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+/* Styling for table headers and cells */
+.flashcardTable th, .flashcardTable td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+/* Sticky header in table */
+.flashcardTable thead th {
+    position: sticky;
+    top: 0;
+    background-color: #f0f0f0;
+}
+
+/* Full-width audio controls for better usability */
+.audioControl {
+    width: 100%;
+}

client/src/components/viewAssignments/viewAssignments.js

@@ -1,23 +1,51 @@
-import React from 'react';
-
-function ViewAssignment() {
-  const flashcards = [
-    { wordName: 'Apple', englishTranslation: 'Apple', audioFile: 'apple.mp3' },
-    { wordName: 'Banana', englishTranslation: 'Banana', audioFile: 'banana.mp3' },
-    { wordName: 'Orange', englishTranslation: 'Orange', audioFile: 'orange.mp3' },
-  ];
+import { useState } from "react";
+import React from "react";
+import "./ViewAssignment.css"; // Make sure this points to the correct CSS file
+import Flashcard from "../Flashcard/Flashcard";
 
+export default function ViewAssignment({ lessonName, flashcards, onBack }) {
+  const [isViewCard, setViewCard] = useState(false);
   return (
-    <div>
-      {flashcards.map((flashcard, index) => (
-        <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
-          <div style={{ width: '100px', marginRight: '20px' }}>{flashcard.wordName}</div>
-          <div style={{ width: '100px' }}>{flashcard.englishTranslation}</div>
-          <audio src={flashcard.audioFile} controls />
+    <>
+      {isViewCard ? (
+        <Flashcard
+          flashcards={flashcards}
+          setViewCard={() => setViewCard(false)}
+        />
+      ) : (
+        <div className="viewAssignment">
+          <button onClick={onBack} className="backButton">
+            Back to Assignments
+          </button>
+          <button className="flashCardButton" onClick={() => setViewCard(true)}>
+            Go To Flashcard View
+          </button>
+
+          <h1 className="lessonName">{lessonName}</h1>
+          <div className="tableContainer">
+            <table className="flashcardTable">
+              <thead>
+                <tr>
+                  <th>Term</th>
+                  <th>Translation</th>
+                  <th>Audio</th>
+                </tr>
+              </thead>
+              <tbody>
+                {flashcards.map((flashcard, index) => (
+                  <tr key={index}>
+                    <td>{flashcard.wordName}</td>
+                    <td>{flashcard.englishTranslation}</td>
+                    <td>
+                      <audio src={flashcard.audioFile} controls />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
         </div>
-      ))}
-    </div>
+      )}
+    </>
   );
 }
-
-export default ViewAssignment;