diff --git a/frontend/src/components/Logbooks/AddLogbookCard.css b/frontend/src/components/Logbooks/AddLogbookCard.css new file mode 100644 index 00000000..14f7eaa6 --- /dev/null +++ b/frontend/src/components/Logbooks/AddLogbookCard.css @@ -0,0 +1,37 @@ +.add-logbook-card { + border-radius: 30px; + max-width: 300px; + padding: 20px; + position: relative; + cursor: pointer; + transition: transform 0.2s; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + } + + .add-logbook-card:hover { + transform: translateY(-4px); + } + + /* Text Styles */ + .add-logbook-card span { + color: #1f2937; + font-size: 14px; + font-weight: 400; + } + + /* Icon Styles */ + .plus-circle-icon { + width: 40px; + height: 40px; + color: #244b94; + padding: 8px; + border: 4px solid #244b94; + border-radius: 50%; + stroke-width: 3px; + } + \ No newline at end of file diff --git a/frontend/src/components/Logbooks/AddLogbookCard.jsx b/frontend/src/components/Logbooks/AddLogbookCard.jsx new file mode 100644 index 00000000..38c46a6e --- /dev/null +++ b/frontend/src/components/Logbooks/AddLogbookCard.jsx @@ -0,0 +1,11 @@ +import { PlusIcon } from "@heroicons/react/24/outline"; +import "./AddLogbookCard.css"; + +export default function AddLogbookCard() { + return ( +
+ + Add Log Book +
+ ); +} diff --git a/frontend/src/components/Logbooks/LogbookCard.css b/frontend/src/components/Logbooks/LogbookCard.css new file mode 100644 index 00000000..179b904a --- /dev/null +++ b/frontend/src/components/Logbooks/LogbookCard.css @@ -0,0 +1,134 @@ +/* Base Card Styles */ +.logbook-card { + border-radius: 30px; + max-width: 300px; + padding: 20px; + position: relative; + cursor: pointer; + transition: transform 0.2s; + background: #ebf2fd; + backdrop-filter: blur(20px); + box-shadow: + 0px 16px 60px 0px #cdd8f040, + 0px 0px 60px 0px #ffffff80 inset; + height: 300px; + } + + .logbook-card:hover .book-cover { + transform: translateY(-10px); + } + + /* Logbook Card Variants */ + .logbook-card.congenital { + background: #fbf4ff; + } + + .logbook-card.ophthalmology { + background: #ebfbfe; + } + + .logbook-card.obstetrics { + background: #f0edf3; + } + + .logbook-card.general-surgery { + background: #e8fdff; + } + + /* Book Cover Styles */ + .book-cover { + position: relative; + height: 100%; + overflow: hidden; + transition: transform 0.2s; + } + + .book-cover-image { + width: 60%; + margin-top: 10%; + margin-left: 20%; + object-fit: cover; + clip-path: inset(0 0 30% 0); + } + + .book-cover-image.obstetrics { + width: 30%; + margin-top: 90%; + } + + .log-rectangle { + width: 170%; + height: 240%; + padding: 13px; + object-fit: cover; + position: absolute; + bottom: 0; + right: -57%; + } + + /* Details Container */ + .details-container { + position: relative; + height: 140px; + } + + .book-details { + position: relative; + padding: 10px; + bottom: 100%; + z-index: 2; + align-items: flex-start; + } + + /* Text Styles */ + .book-title { + font-size: 22px; + font-weight: bold; + color: #1e1e1e; + margin-bottom: 12px; + text-align: left; + } + + .type-label, + .storage-info { + font-size: 14px; + font-weight: 500; + text-align: left; + display: flex; + align-items: center; + gap: 4px; + } + + .type-label { + color: #333333; + } + + .storage-info { + margin: 8px 0; + } + + .type-value, + .storage-count { + font-size: 14px; + font-weight: 500; + } + + .type-value { + color: #244b94; + } + + .storage-count { + color: #5d9eff; + } + + .created-date { + font-size: 10px; + color: #656b6f; + margin-top: 8px; + text-align: left; + } + + .created-date strong { + font-weight: 600; + } + \ No newline at end of file diff --git a/frontend/src/components/Logbooks/LogbookCard.jsx b/frontend/src/components/Logbooks/LogbookCard.jsx new file mode 100644 index 00000000..79e7ea24 --- /dev/null +++ b/frontend/src/components/Logbooks/LogbookCard.jsx @@ -0,0 +1,40 @@ +import { LogbookTypeInfo } from "./logbookTypeInfo"; +import LogRectangle from "../../assets/images/LogRectangle.png"; +import "./LogbookCard.css"; + +export default function LogbookCard({ title, type, storage, created }) { + /** Retrieve type information from the mapping */ + const typeInfo = LogbookTypeInfo[type] || {}; + + /** Construct class name */ + const className = ["logbook-card", typeInfo.className] + .filter(Boolean) + .join(" "); + + /** Get the corresponding book image */ + const bookImage = typeInfo.image || LogRectangle; // Fallback to LogRectangle if image not found + + return ( +
+
+ {type} +
+
+ +
+

{title}

+
+ Type: {type} +
+
+ Storage: {storage}/100 logs + used +
+
+ Created {created} +
+
+
+
+ ); +} diff --git a/frontend/src/components/Logbooks/LogbookTypeInfo.jsx b/frontend/src/components/Logbooks/LogbookTypeInfo.jsx new file mode 100644 index 00000000..7a2f0416 --- /dev/null +++ b/frontend/src/components/Logbooks/LogbookTypeInfo.jsx @@ -0,0 +1,29 @@ +import AdultCardiac from "../../assets/images/adult-cardiac-book.png"; +import CongenitalCardiac from "../../assets/images/congenital-cardiac-book.png"; +import Obstetrics from "../../assets/images/obstetrics-book.png"; +import GeneralSurgery from "../../assets/images/general-surgery-book.png"; +import Ophthalmology from "../../assets/images/ophthalmology-book.png"; + +/** Mapping of logbook types to their class names and images */ +export const LogbookTypeInfo = { + "Cardiac Surgery - Adult": { + className: "", + image: AdultCardiac, + }, + "Cardiac Surgery - Congenital": { + className: "congenital", + image: CongenitalCardiac, + }, + Ophthalmology: { + className: "ophthalmology", + image: Ophthalmology, + }, + "Obstetrics/Gynecology": { + className: "obstetrics", + image: Obstetrics, + }, + "General Surgery": { + className: "general-surgery", + image: GeneralSurgery, + }, +}; diff --git a/frontend/src/pages/logbooks/Logbooks.css b/frontend/src/pages/logbooks/Logbooks.css index b03429e7..7d0fb5bf 100644 --- a/frontend/src/pages/logbooks/Logbooks.css +++ b/frontend/src/pages/logbooks/Logbooks.css @@ -12,172 +12,3 @@ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 100px; } - -/* Base Card Styles */ -.logbook-card, -.add-logbook-card { - border-radius: 30px; - max-width: 300px; - padding: 20px; - position: relative; - cursor: pointer; - transition: transform 0.2s; -} - -.logbook-card { - background: #ebf2fd; - backdrop-filter: blur(20px); - box-shadow: - 0px 16px 60px 0px #cdd8f040, - 0px 0px 60px 0px #ffffff80 inset; - height: 300px; -} - -.logbook-card:hover .book-cover, -.add-logbook-card:hover { - transform: translateY(-10px); -} - -.add-logbook-card { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; -} - -.add-logbook-card:hover { - transform: translateY(-4px); -} - -/* Logbook Card Variants */ -.logbook-card.congenital { - background: #fbf4ff; -} - -.logbook-card.ophthalmology { - background: #ebfbfe; -} - -.logbook-card.obstetrics { - background: #f0edf3; -} - -.logbook-card.general-surgery { - background: #e8fdff; -} - -/* Book Cover Styles */ -.book-cover { - position: relative; - height: 100%; - overflow: hidden; - transition: transform 0.2s; -} - -.book-cover-image { - width: 60%; - margin-top: 10%; - margin-left: 20%; - object-fit: cover; - clip-path: inset(0 0 30% 0); -} - -.book-cover-image.obstetrics { - width: 30%; - margin-top: 90%; -} - -.log-rectangle { - width: 170%; - height: 240%; - padding: 13px; - object-fit: cover; - position: absolute; - bottom: 0; - right: -57%; -} - -/* Details Container */ -.details-container { - position: relative; - height: 140px; -} - -.book-details { - position: relative; - padding: 10px; - bottom: 100%; - z-index: 2; - align-items: flex-start; -} - -/* Text Styles */ -.book-title { - font-size: 22px; - font-weight: bold; - color: #1e1e1e; - margin-bottom: 12px; - text-align: left; -} - -.type-label, -.storage-info { - font-size: 14px; - font-weight: 500; - text-align: left; - display: flex; - align-items: center; - gap: 4px; -} - -.type-label { - color: #333333; -} - -.storage-info { - margin: 8px 0; -} - -.type-value, -.storage-count { - font-size: 14px; - font-weight: 500; -} - -.type-value { - color: #244b94; -} - -.storage-count { - color: #5d9eff; -} - -.created-date { - font-size: 10px; - color: #656b6f; - margin-top: 8px; - text-align: left; -} - -.created-date strong { - font-weight: 600; -} - -.add-logbook-card span { - color: #1f2937; - font-size: 14px; - font-weight: 400; -} - -/* Icon Styles */ -.plus-circle-icon { - width: 40px; - height: 40px; - color: #244b94; - padding: 8px; - border: 4px solid #244b94; - border-radius: 50%; - stroke-width: 3px; -} diff --git a/frontend/src/pages/logbooks/Logbooks.jsx b/frontend/src/pages/logbooks/Logbooks.jsx index b409f423..92f17d65 100644 --- a/frontend/src/pages/logbooks/Logbooks.jsx +++ b/frontend/src/pages/logbooks/Logbooks.jsx @@ -1,133 +1,56 @@ import { NavContentWrapper } from "../../components/NavContentWrapper/NavContentWrapper"; import ContentHeader from "../../components/ContentHeader/ContentHeader"; -import { PlusIcon } from "@heroicons/react/24/outline"; - -import LogRectangle from "../../assets/images/LogRectangle.png"; -import AdultCardiac from "../../assets/images/adult-cardiac-book.png"; -import CongenitalCardiac from "../../assets/images/congenital-cardiac-book.png"; -import Obstetrics from "../../assets/images/obstetrics-book.png"; -import GeneralSurgery from "../../assets/images/general-surgery-book.png"; -import Ophthalmology from "../../assets/images/ophthalmology-book.png"; - +import LogbookCard from "../../components/Logbooks/LogbookCard"; +import AddLogbookCard from "../../components/Logbooks/AddLogbookCard"; import "./Logbooks.css"; -export default function Logbooks() { - return ( - - - - ); -} - -/** Mapping of logbook types to their class names and images */ -const logbookTypeInfo = { - "Cardiac Surgery - Adult": { - className: "", - image: AdultCardiac, +/** Array of logbook data */ +const logbooks = [ + { + title: "Cardiac Surgery - Nov.", + type: "Cardiac Surgery - Adult", + storage: "20", + created: "10-01-2024", }, - "Cardiac Surgery - Congenital": { - className: "congenital", - image: CongenitalCardiac, + { + title: "Cardiac Cong. - Nov.", + type: "Cardiac Surgery - Congenital", + storage: "20", + created: "10-01-2024", }, - Ophthalmology: { - className: "ophthalmology", - image: Ophthalmology, + { + title: "Ophthalmology - Nov.", + type: "Ophthalmology", + storage: "20", + created: "10-01-2024", }, - "Obstetrics/Gynecology": { - className: "obstetrics", - image: Obstetrics, + { + title: "OB/GYN - Nov.", + type: "Obstetrics/Gynecology", + storage: "20", + created: "10-01-2024", }, - "General Surgery": { - className: "general-surgery", - image: GeneralSurgery, + { + title: "General Surgery - Nov.", + type: "General Surgery", + storage: "20", + created: "10-01-2024", }, -}; - -function MainContent() { - /** Array of logbook data */ - const logbooks = [ - { - title: "Cardiac Surgery - Nov.", - type: "Cardiac Surgery - Adult", - storage: "20", - created: "10-01-2024", - }, - { - title: "Cardiac Cong. - Nov.", - type: "Cardiac Surgery - Congenital", - storage: "20", - created: "10-01-2024", - }, - { - title: "Ophthalmology - Nov.", - type: "Ophthalmology", - storage: "20", - created: "10-01-2024", - }, - { - title: "OB/GYN - Nov.", - type: "Obstetrics/Gynecology", - storage: "20", - created: "10-01-2024", - }, - { - title: "General Surgery - Nov.", - type: "General Surgery", - storage: "20", - created: "10-01-2024", - }, - // Add more logbooks as needed - ]; - - return ( -
- -
- {logbooks.map((book, index) => ( - - ))} -
- - Add Log Book -
-
-
- ); -} - -function LogbookCard({ title, type, storage, created }) { - /** Retrieve type information from the mapping */ - const typeInfo = logbookTypeInfo[type] || {}; - - /** Construct class name */ - const className = ["logbook-card", typeInfo.className] - .filter(Boolean) - .join(" "); - - /** Get the corresponding book image */ - const bookImage = typeInfo.image || AdultCardiac; + // Add more logbooks as needed +]; +export default function Logbooks() { return ( -
-
- {type} -
-
- -
-

{title}

-
- Type: {type} -
-
- Storage: {storage}/100 logs - used -
-
- Created {created} -
+ +
+ +
+ {logbooks.map((book, index) => ( + + ))} +
-
+ ); }