Setup cards for information (#10)

package.json

@@ -18,5 +18,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/typography": "^0.5.9"
   }
 }

src/components/InfoCard.astro

@@ -0,0 +1,56 @@
+---
+
+export interface Props {
+    title: string;
+    undertitle?: string;
+    icon: string;
+    imgUrl: string;
+}
+
+const { title, undertitle, icon, imgUrl } = Astro.props;
+---
+
+<>
+    <div class="hidden md:block w-full h-full bg-white">
+        <img class="inline-block m-0" src={imgUrl} />
+        <div class="p-8">
+            <h2 class="text-2xl font-bold inline-block pb-2">{title}</h2>
+            <div class="prose prose-a:text-[#ff00ff] prose-sm"><slot name="content1" /></div>
+        </div>
+    </div>
+    <details class="block md:hidden w-full bg-white px-8">
+        <summary class="flex gap-4 w-full font-bold p-2">
+            <img class="w-7 h-fit m-0" src={icon} />
+            <div>
+                <h2 class="text-xl">{title}</h2>
+                <h3 class="text-lg ">{undertitle}</h3>
+            </div>
+        </summary>
+        <div class="prose prose-base prose-a:text-[#ff00ff] max-w-full py-8"><slot name="content2" /></div>
+    </details>
+</>
+
+<style>
+    details > summary {
+        list-style-type: none;
+
+    }
+
+    details > summary::marker {
+        display: none;
+    }
+
+    details > summary::after {
+        background-image: url("/assets/Arrow-short-Digital-black.svg");
+        float: right;
+        min-width: 1rem;
+        min-height: 1rem;
+        width:1rem;
+        height:1rem;
+        content: "";
+        background-size: 1rem 1rem;
+    }
+    details[open] > summary:after {
+        transform: rotate(90deg);
+    }
+</style>

src/markdown/infoCards/c0_test.md

@@ -0,0 +1,11 @@
+---
+title: "Først sjekk at du er påmeldt!"
+imgUrl: "/assets/test.jpg"
+icon: "/assets/Eye-6-Digital-black.svg"
+---
+
+Det er lurt å dobbeltsjekke at du er påmeldt ordentlig, slik at det ikke blir noen ufine overraskelser på dagen. Er du påmeldt så skal du ha fått en epost i respons på den eposten du skrev inn i påmeldingen. Søk etter epost med tema “Fagseminar vår 2023 - Påmelding” og avsender ”
+
+[FAGSEMINAR PÅMELDINGS FORM](https://www.knowit.no)
+
+[HANNE BERGHEIM](https://www.knowit.no)

src/markdown/infoCards/c1_hotel.md

@@ -0,0 +1,9 @@
+---
+title: "Thon Conference Universitetsgaten"
+imgUrl: "/assets/test.jpg"
+icon: "/assets/Map-Digital-black.svg"
+---
+
+Thon Conference Universitetsgaten er et nytt og moderne konferansesenter midt i Oslo Sentrum. Konferansesenteret eies og drives av Thon Hotel Rosenkrantz, og med kun 4 minutters gange herfra, kan vi by på både overnatting og et 5-stjerners mattilbud for våre konferansegjester.
+
+[GOOGLE MAPS THON HOTEL](https://www.knowit.no)

src/pages/info.astro

@@ -1,7 +1,29 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from "../layouts/Layout.astro";
+import InfoCard from "../components/InfoCard.astro";
+const cards = await Astro.glob("../markdown/infoCards/*.md");
 ---
 
 <Layout title="Mer Info">
-    <h1>Alt du trenger for å holde deg i loop-en</h1>
+    <div class="flex flex-col items-center">
+        <h1 class="text-xl font-bold">
+            Alt du trenger for å holde deg i loop-en
+        </h1>
+        <ul class="grid w-full md:grid-cols-2 lg:grid-cols-3 gap-4 p-2">
+            {
+                cards.map((card) => (
+                    <li class="w-full md:max-w-md">
+                        <InfoCard
+                            imgUrl={card.frontmatter.imgUrl}
+                            icon={card.frontmatter.icon}
+                            title={card.frontmatter.title}
+                        >
+                            {<card.Content slot="content1" />}{" "}
+                            {<card.Content slot="content2" />}
+                        </InfoCard>
+                    </li>
+                ))
+            }
+        </ul>
+    </div>
 </Layout>

tailwind.config.cjs

@@ -2,7 +2,15 @@
 module.exports = {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
-		extend: {},
+		extend: {
+			typography: ({theme}) => ({
+				default: {
+					css: {
+						'--tw-prose-links':'#FF00FF'
+					}
+				}
+			})
+		},
 	},
-	plugins: [],
+	plugins: [require('@tailwindcss/typography')],
 }