projects list

src/components/Projects.astro

@@ -0,0 +1,76 @@
+---
+interface Props {
+    projects: {
+        name: string,
+        description: string,
+        date: Date,
+        dateVisual?: string,
+        links: string[]
+    }[]
+}
+
+const { projects } = Astro.props;
+
+let lastYear = 0;
+---
+
+<div>
+    {projects.sort((a, b) => b.date.getTime() - a.date.getTime()).map((project) => {
+        const isNewYear = project.date.getFullYear() !== lastYear;
+        lastYear = project.date.getFullYear();
+
+        return <>
+            {isNewYear && <div class="seperator"><span class="year">{project.date.getFullYear()}</span></div>}
+            <details>
+                <summary>
+                    <span class="name">{project.name}</span>
+                    <span class="date">{project.dateVisual || project.date.toLocaleString("default", { month: "long" })}</span>
+                </summary>
+                <div class="open">
+                    <p>{project.description}</p>
+                    <div class="links">
+                        {project.links.map((link) => {
+                            return <a target="_blank" rel="noopener" href={link}>{link}</a>;
+                        })}
+                    </div>
+                </div>
+            </details>
+        </>;
+    })}
+</div>
+<style>
+    .seperator {
+        background: linear-gradient(transparent calc(50% - 1px), #888888 calc(50%), transparent calc(50% - 1px));
+        margin: .5em 0;
+        text-align: center;
+
+        & .year {
+            background: #eeeeee;
+        }
+    }
+
+    summary {
+        display: flex;
+        flex-direction: row;
+        cursor: pointer;
+    }
+    details .open {
+        background-color: #e2e2e2;
+        padding: .5em 1em;
+        margin: .5em 0;
+    }
+
+    .name {
+        flex: 1 1 0;
+    }
+    .date {
+        flex: 0 0 auto;
+        color: #888888;
+    }
+
+    .links {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+</style>