Add active state to all current

Signed-off-by: Jesse Dijkstra <mail@jessedijkstra.nl>
bruggendev · Jun 24, 2024 · 6d885c2 · 6d885c2
1 parent 81e01ed
commit 6d885c2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/components/Resume/Resume.module.css b/src/components/Resume/Resume.module.css
@@ -64,7 +64,8 @@
  border-radius: 34px;
  }
 }
-.ResumeItemHeader:first-of-type::before {
+
+.active::before {
  box-shadow: inset 0px 0px 0px 5px var(--background-color);
  background-color: var(--text-color);
 }

diff --git a/src/components/Resume/Resume.tsx b/src/components/Resume/Resume.tsx
@@ -1,5 +1,6 @@
-import { ParentComponent } from "solid-js";
+import { ParentComponent, ParentProps, PropsWithChildren } from "solid-js";
 import * as styles from "./Resume.module.css";
+import { className } from "solid-js/web";
 
 export const Resume: ParentComponent = (props) => (
  <dl {...props} class={styles.Resume} />
@@ -26,8 +27,9 @@ export const ResumeItemContent: ParentComponent = (props) => (
 export const ResumeItemHeader: ParentComponent<{
  from: string;
  to: string;
-}> = ({ from, to, children }) => (
- <dt class={styles.ResumeItemHeader}>
+ active?: boolean;
+}> = ({ from, to, children, active }) => (
+ <dt classList={{ [styles.ResumeItemHeader]: true, [styles.active]: active }}>
  <ResumeItemHeaderPeriod>
  <time>{from}</time> - <time>{to}</time>
  </ResumeItemHeaderPeriod>

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -54,7 +54,7 @@ export default function Home() {
  <SectionContent>
  <Resume>
  <ResumeItem>
- <ResumeItemHeader from="January 2024" to="Current">
+ <ResumeItemHeader from="January 2024" to="Current" active>
  <strong>Fullstack Developer (Freelance)</strong>{" "}
  <strong>Non-Disclosure Agreement</strong>
  </ResumeItemHeader>
@@ -71,7 +71,7 @@ export default function Home() {
  </ResumeItemContent>
  </ResumeItem>
  <ResumeItem>
- <ResumeItemHeader from="April 2023" to="Current">
+ <ResumeItemHeader from="April 2023" to="Current" active>
  <strong>Fullstack Developer (Freelance)</strong> at{" "}
  <strong>UMC Utrecht</strong>
  </ResumeItemHeader>