Create a central webpage for projects and likewise
Change-Id: If5b218fcb7cd223029bccdfac5ee9ea4e86ddf38
Reviewed-on: https://git.clicks.codes/c/Coded/thecoded.prof/+/673
Reviewed-by: Samuel Shuert <coded@clicks.codes>
Tested-by: Samuel Shuert <coded@clicks.codes>
diff --git a/sites/main/src/components/Project.astro b/sites/main/src/components/Project.astro
new file mode 100644
index 0000000..56249dd
--- /dev/null
+++ b/sites/main/src/components/Project.astro
@@ -0,0 +1,52 @@
+---
+
+import active from '../images/active.svg';
+import wip from '../images/wip.svg';
+import inactive from '../images/inactive.svg';
+
+export enum Status {
+ Active,
+ Inactive,
+ WIP
+}
+
+interface Props {
+ name: string,
+ url: string,
+ children: string;
+ status: Status;
+}
+
+const { name, url, status } = Astro.props;
+
+let color: string;
+let icon: string;
+
+switch (status) {
+ case Status.Active: {
+ color = "bg-green";
+ icon = active.src;
+ break;
+ }
+ case Status.WIP: {
+ color = "bg-yellow";
+ icon = wip.src;
+ break;
+ }
+ default:
+ case Status.Inactive: {
+ color = "bg-red";
+ icon = inactive.src;
+ break;
+ }
+}
+---
+
+<a href={url} class="w-72 h-36 flex flex-col rounded-lg p-2 m-2 bg-surface0 shadow-md shadow-crust transition-transform hover:bg-surface1 hover:drop-shadow-md hover:-translate-y-1">
+ <div class="flex justify-between mr-1 mb-1 items-end">
+ <p class="text-text text-lg">{name}</p>
+ <img src={icon} alt="cross" class="h-8"/>
+ </div>
+ <div class={`h-[2px] w-full mb-1 ${color}`}/>
+ <p class="text-text text-sm text-ellipsis overflow-hidden"><slot /></p>
+</a>
\ No newline at end of file