feat: Add page view

morniteaque · Feb 11, 2023 · ad28be8 · ad28be8 · vercel · Feb 11, 2023
1 parent 2befee5
commit ad28be8
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 12 deletions.
diff --git a/app/globals.scss b/app/globals.scss
@@ -144,10 +144,14 @@ $color--substance-use: #ff7e74;
 
 .pf-x-c-grid {
   --pf-l-grid--m-gutter--GridGap: 0.5rem;
-  flex: 1;
 
-  --pf-l-grid__item--GridColumnEnd: span 1 !important;
-  grid-template-columns: repeat(1, [col-start] 1fr) !important;
+  &--week,
+  &--month {
+    --pf-l-grid__item--GridColumnEnd: span 1 !important;
+    grid-template-columns: repeat(1, [col-start] 1fr) !important;
+
+    flex: 1;
+  }
 
   &__header {
     margin-top: var(--pf-global--spacer--md) !important;
@@ -167,14 +171,17 @@ $color--substance-use: #ff7e74;
       grid-template-columns: repeat(4, [col-start] 1fr) !important;
     }
 
-    & .pf-l-grid__item {
-      padding-left: var(--pf-global--spacer--sm) !important;
-      padding-right: var(--pf-global--spacer--sm) !important;
-
-      &:not(:first-child) {
-        border-width: 0 0 0 1px;
-        border-style: dashed;
-        border-color: var(--pf-global--Color--400);
+    &--week,
+    &--month {
+      & .pf-l-grid__item {
+        padding-left: var(--pf-global--spacer--sm) !important;
+        padding-right: var(--pf-global--spacer--sm) !important;
+
+        &:not(:first-child) {
+          border-width: 0 0 0 1px;
+          border-style: dashed;
+          border-color: var(--pf-global--Color--400);
+        }
       }
     }
 
@@ -184,6 +191,13 @@ $color--substance-use: #ff7e74;
   }
 }
 
+.pf-x-c-page {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .pf-c-card--preview {
   &:not(:first-child) {
     @extend .pf-u-mt-sm;

diff --git a/components/home.tsx b/components/home.tsx
@@ -699,7 +699,7 @@ export default function Home() {
                                 {[
                                   { value: "week", label: "Week" },
                                   { value: "month", label: "Month" },
-                                  { value: "list", label: "List" },
+                                  { value: "page", label: "Page" },
                                 ].map((el, i) => (
                                   <FormSelectOption
                                     key={i}
@@ -870,6 +870,36 @@ export default function Home() {
                 </Grid>
               )}
 
+              {scale === "page" && (
+                <div className="pf-x-c-page">
+                  <Grid className="pf-x-c-grid pf-u-p-md" hasGutter>
+                    {ENTRIES.map((v, id) => ({ id, ...v }))
+                      .filter(
+                        (e) =>
+                          activeTopics.filter((v) => e.topics.includes(v))
+                            .length > 0
+                      )
+                      .slice(0, 4)
+                      .map((entry) => (
+                        <GridItem span={6} key={entry.id}>
+                          <EntryCard
+                            id={entry.id.toString()}
+                            entry={entry}
+                            selected={selectedEntryIndex === entry.id}
+                            onClick={() =>
+                              setSelectedEntryIndex((e) =>
+                                e === entry.id ? -1 : entry.id
+                              )
+                            }
+                            showDate
+                            showDay
+                          />
+                        </GridItem>
+                      ))}
+                  </Grid>
+                </div>
+              )}
+
               <Panel>
                 <PanelMain>
                   <PanelMainBody>