Create single component for TwoColc.

Author: nikoshell

src/components/TwoCols.astro

@@ -0,0 +1,13 @@
+---
+const {content, sidebar } = Astro.props;
+---
+  <section class="space-y-12 pb-6 md:p-6">
+    <div class="flex flex-col lg:flex-row-reverse gap-6">
+      <div class="w-full lg:max-w-[400px]  lg:sticky lg:top-6 self-start">
+        <slot name="content"/>
+      </div>
+      <div class="flex-1">
+        <slot name="sidebar" />
+      </div>
+    </div>
+  </section>

src/pages/company/[company]/[job].astro

@@ -2,6 +2,7 @@
 import Layout from "@layouts/MarkdownLayout.astro";
 import JobCard from "@components/JobCard.astro";
 import CompanyCard from "@components/CompanyCard.astro";
+import TwoCols from "@components/TwoCols.astro";
 
 import { getEntry } from "astro:content";
 
@@ -31,13 +32,13 @@ export async function getStaticPaths() {
   description="EuroPython is the largest Python conference in Europe. We are looking forward to seeing you in Prague, Czech Republic & Remote from July 14th-20th 2025."
 >
   <section class="space-y-12 pb-6 md:p-6">
-    <div class="flex flex-col lg:flex-row-reverse gap-6">
-      <div class="w-full lg:max-w-[400px]  lg:sticky lg:top-6 self-start">
+    <TwoCols>
+      <Fragment slot="content">
         <CompanyCard {company} />
-      </div>
-      <div class="flex-1">
+      </Fragment>
+      <Fragment slot="sidebar">
         {(<JobCard {job} />)}
-      </div>
-    </div>
+      </Fragment>
+    </TwoCols>
   </section>
 </Layout>

src/pages/company/[company]/index.astro

@@ -2,6 +2,7 @@
 import Layout from "@layouts/MarkdownLayout.astro";
 import CompanyCard from "@components/CompanyCard.astro";
 import CompanyCardBody from "@components/CompanyCardBody.astro";
+import TwoCols from "@components/TwoCols.astro";
 
 import { getEntry, getCollection } from "astro:content";
 
@@ -22,19 +23,14 @@ export async function getStaticPaths() {
   title="EuroPython 2025 | July 14th-20th 2025 | Prague, Czech Republic & Remote"
   description="EuroPython is the largest Python conference in Europe. We are looking forward to seeing you in Prague, Czech Republic & Remote from July 14th-20th 2025."
 >
-
-
-    <section class="space-y-12 pb-6 md:p-6">
-          <div class="flex flex-col lg:flex-row-reverse gap-6">
-            <div class="flex flex-col md:flex-row-reverse gap-6">
-              <div class="w-full lg:max-w-[400px]  lg:sticky lg:top-6 self-start">
-                <CompanyCard {company} />
-              </div>
-              <div class="flex-1 ">
-                <CompanyCardBody {company} />
-              </div>
-            </div>
-      </section>
-  <section class="space-y-12 pb-6">
+  <section class="space-y-12 pb-6 md:p-6">
+    <TwoCols>
+      <Fragment slot="content">
+        <CompanyCard {company} />
+      </Fragment>
+      <Fragment slot="sidebar">
+        <CompanyCardBody {company} />
+      </Fragment>
+    </TwoCols>
   </section>
 </Layout>

src/pages/jobs.astro

@@ -5,6 +5,7 @@ import Layout from "@layouts/MarkdownLayout.astro";
 
 import CompanyCard from "@components/CompanyCard.astro";
 import JobCard from "@components/JobCard.astro";
+import TwoCols from "@components/TwoCols.astro";
 
 const companies = await getCollection("companies");
 
@@ -32,20 +33,20 @@ for (const path in jobFiles) {
       companies.map((company) => {
         const companyJobs = companiesJobsMap[company.id];
         return (
-          <div class="flex flex-col lg:flex-row-reverse gap-6">
-            <div class="w-full lg:max-w-[400px]  lg:sticky lg:top-6 self-start">
+          <TwoCols>
+            <Fragment slot="content">
               <CompanyCard {company} />
-            </div>
-            <div class="flex-1 ">
+            </Fragment>
+            <Fragment slot="sidebar">
               {companyJobs.length > 0 && (
                 <>
                   {companyJobs.map((job) => (
                     <JobCard {job} />
                   ))}
                 </>
               )}
-            </div>
-          </div>
+            </Fragment>
+          </TwoCols>
         );
       })
     }