From d24001cd53bc9cc80cef8a055e3a1f721fd28020 Mon Sep 17 00:00:00 2001
From: ildyria <benoit@viguier.nl>
Date: Mon, 14 Oct 2024 18:50:23 +0200
Subject: [PATCH] improve feature list

---
 src/components/widgets/FeaturesList.astro |  52 ++++
 src/pages/get-supporter-edition.astro     | 356 ++++++++++------------
 src/types.d.ts                            |  24 +-
 3 files changed, 222 insertions(+), 210 deletions(-)
 create mode 100644 src/components/widgets/FeaturesList.astro

diff --git a/src/components/widgets/FeaturesList.astro b/src/components/widgets/FeaturesList.astro
new file mode 100644
index 00000000..c38e6613
--- /dev/null
+++ b/src/components/widgets/FeaturesList.astro
@@ -0,0 +1,52 @@
+---
+import Headline from '~/components/ui/Headline.astro';
+import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
+import type { FeaturesList as Props } from '~/types';
+import Tick from '../ui/Tick.astro';
+
+const {
+  title = await Astro.slots.render('title'),
+  subtitle = await Astro.slots.render('subtitle'),
+  tagline = await Astro.slots.render('tagline'),
+  products = [],
+  specs = [],
+
+  id,
+  isDark = false,
+  classes = {},
+  bg = await Astro.slots.render('bg'),
+} = Astro.props;
+---
+
+<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-3xl mx-auto ${classes?.container ?? ''}`} bg={bg}>
+  <Headline title={title} subtitle={subtitle} tagline={tagline} classes={classes?.headline as Record<string, string>} />
+  <div>
+    <table class="w-full border-collapse border border-neutral-200 dark:border-neutral-800">
+      <thead>
+        <tr class="bg-neutral-100 dark:bg-neutral-700">
+          <th class="p-2 text-xl font-bold text-left">Features</th>
+          {
+            products.map((name) => (
+              <th class="p-2 text-xl font-bold">
+                <Fragment set:html={name} />
+              </th>
+            ))
+          }
+        </tr>
+      </thead>
+      <tbody>
+        {
+          specs.map(({ feature, isHeader, values, available }) => (
+            <tr class={(isHeader && 'border-t border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800') || ''}>
+              {isHeader && <td class="p-2 font-semibold"><Fragment set:html={feature} /></td>}
+              {isHeader && products.map(() => <td class="p-2 text-center" />)}
+              {!isHeader && <td class="px-2 text-muted"><Fragment set:html={feature} /></td> }
+              {!isHeader && values && (values.map((val) => <td class="px-2 text-muted text-center">{val}</td>))}
+              {!isHeader && available && available.map((yes) => <td class="px-2 text-muted text-center">{yes && <Tick />}</td>)}
+            </tr>
+          ))
+        }
+      </tbody>
+    </table>
+  </div>
+</WidgetWrapper>
diff --git a/src/pages/get-supporter-edition.astro b/src/pages/get-supporter-edition.astro
index b475f9f9..61692f16 100644
--- a/src/pages/get-supporter-edition.astro
+++ b/src/pages/get-supporter-edition.astro
@@ -1,13 +1,10 @@
 ---
 import Layout from '~/layouts/PageLayout.astro';
 
-import Tick from '~/components/ui/Tick.astro';
 import Hero from '~/components/widgets/Hero.astro';
-// import CallToAction from '~/components/widgets/CallToAction.astro';
 import Prices from '~/components/widgets/Pricing.astro';
 import FAQs from '~/components/widgets/FAQs.astro';
-import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
-import Headline from '~/components/ui/Headline.astro';
+import FeaturesList from '~/components/widgets/FeaturesList.astro';
 
 const metadata = {
   title: 'Pre-Launch Landing Page',
@@ -105,208 +102,167 @@ const metadata = {
       }
     ]}
   />
-<!-- TODO : add table with all the functionalities of Lychee detailed. -->
-  <WidgetWrapper id={"fullDetails"} isDark={false} containerClass={`max-w-3xl mx-auto`}>
-    <Headline title={"Full comparison"} 
-    tagline={"the essentials and a few more"}
-     />
-     <!-- subtitle={subtitle}  -->
-     <div>
-      <table class="w-full border-collapse border border-neutral-200 dark:border-neutral-800">
-        <thead>
-          <tr class="bg-neutral-100 dark:bg-neutral-700">
-            <th class="p-2 text-xl font-bold text-left">Features</th>
-            <th class="p-2 text-xl font-bold">Free</th>
-            <th class="p-2 text-xl font-bold">Lychee <span class="text-sky-600">SE</span></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="bg-neutral-50 dark:bg-neutral-800">
-            <td class="p-2 font-semibold">Global</td>
-            <td class="p-2 text-center"></td>
-            <td class="p-2 text-center"></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted"><span class="text-black dark:text-neutral-400/50 font-bold">Dark</span> and <span class="text-neutral-500 dark:text-neutral-100  font-bold">Light</span> themes</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Unlimited photos upload</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Unlimited number of albums</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Unlimited number of users</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Multiple language supported</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-
-          <tr class="bg-neutral-50 dark:bg-neutral-800">
-            <td class="p-2 font-semibold">Photo management</td>
-            <td class="p-2 text-center"></td>
-            <td class="p-2 text-center"></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Full sizes and other variants</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Auto rotation on import</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Exif Data decoding</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Localization data reverse search</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Upload by chunks</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Zip & download</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
 
+  <FeaturesList
+    title="Full comparison"
+    tagline="the essentials and a few more"
+    products={['Free', 'Lychee <span class="text-sky-600">SE</span>']}
+    specs={[
+      {
+        feature: 'Global',
+        isHeader: true,
+      },
+      {
+        feature: '<span class="text-black dark:text-neutral-400/50 font-bold">Dark</span> and <span class="text-neutral-500 dark:text-neutral-100  font-bold">Light</span> themes',
+        available: [true, true],
+      },
+      {
+        feature: 'Unlimited photos upload',
+        available: [true, true],
+      },
+      {
+        feature: 'Unlimited number of albums',
+        available: [true, true],
+      },
+      {
+        feature: 'Unlimited number of users',
+        available: [true, true],
+      },
+      {
+        feature: 'Mutliple language supported',
+        available: [true, true],
+      },
 
-          <tr class="bg-neutral-50 dark:bg-neutral-800">
-            <td class="p-2 font-bold">Album management</td>
-            <td class="px-2 text-center"></td>
-            <td class="px-2 text-center"></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Smart albums</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Unlimited photos per album</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Possibility to create an album within another album</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Zip & download</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Custom sorting per album</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Justified/Masonry/Square photo layout</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Photo layout customizable per album</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Selectable hero header photo per album</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Slideshow with previous & next</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
+      {
+        feature: 'Photo management',
+        isHeader: true,
+      },
+      {
+        feature: 'Full sizes and other variants',
+        available: [true, true],
+      },
+      {
+        feature: 'Auto rotation on import',
+        available: [true, true],
+      },
+      {
+        feature: 'Exif Data decoding',
+        available: [true, true],
+      },
+      {
+        feature: 'GPS data localization',
+        available: [true, true],
+      },
+      {
+        feature: 'Upload by chunks <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        available: [true, true],
+      },
+      {
+        feature: 'Zip & download',
+        available: [true, true],
+      },
 
+      {
+        feature: 'Album management',
+        isHeader: true,
+      },
+      {
+        feature: 'Smart albums',
+        available: [true, true],
+      },
+      {
+        feature: 'Unlimited photos per album',
+        available: [true, true],
+      },
+      {
+        feature: 'Albums within albums',
+        available: [true, true],
+      },
+      {
+        feature: 'Zip & download',
+        available: [true, true],
+      },
+      {
+        feature: 'Custom sorting per album',
+        available: [true, true],
+      },
+      {
+        feature: 'Justified/Masonry/Square photo layouts',
+        available: [true, true],
+      },
+      {
+        feature: 'Photo layout custom per album',
+        available: [true, true],
+      },
+      {
+        feature: 'Thumbs album aspect-ratio custom per album',
+        available: [true, true],
+      },
+      {
+        feature: 'Customizable Album covers',
+        available: [true, true],
+      },
+      {
+        feature: 'Customizable Album header photo',
+        available: [true, true],
+      },
+      {
+        feature: 'Slideshow with previous & next <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        available: [true, true],
+      },
 
-          <tr class="bg-neutral-50 dark:bg-neutral-800">
-            <td class="p-2 font-bold">User management</td>
-            <td class="px-2 text-center"></td>
-            <td class="px-2 text-center"></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Login with WebAuthn and Oauth</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Access rights management</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Cross-user Album sharing</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Space usage per user</td>
-            <td class="px-2 text-center"></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr class="">
-            <td class="px-2 text-muted">Upload Quota per user</td>
-            <td class="px-2 text-center"></td>
-            <td class="px-2 text-center"><Tick classes={{icon_bg:'bg-neutral-100 dark:bg-neutral-800', icon: 'text-neutral-800 dark:text-neutral-400'}}/></td>
-          </tr>
+      {
+        feature: 'User management',
+        isHeader: true,
+      },
+      {
+        feature: 'Login with WebAuthn and Oauth',
+        available: [true, true],
+      },
+      {
+        feature: 'Access rights management per album',
+        available: [true, true],
+      },
+      {
+        feature: 'Cross-user sharing',
+        available: [true, true],
+      },
+      {
+        feature: 'Space usage per user <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        available: [false, true],
+      },
+      {
+        feature: 'Upload quota per user <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        available: [false, true],
+      },
 
+      {
+        feature: 'Administration',
+        isHeader: true,
+      },
+      {
+        feature: 'Logs',
+        available: [true, true],
+      },
+      {
+        feature: 'Maintenance page',
+        available: [true, true],
+      },
+      {
+        feature: 'Diagnostics tools',
+        available: [true, true],
+      },
+      {
+        feature: 'Full manual settings control',
+        available: [true, true],
+      },
+      {
+        feature: 'Statistics on your installation <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        available: [false, true],
+      }
 
-          <tr class="bg-neutral-50 dark:bg-neutral-800">
-            <td class="p-2 font-bold">Administration</td>
-            <td class="px-2 text-center"></td>
-            <td class="px-2 text-center"></td>
-          </tr>
-          <tr>
-            <td class="px-2 text-muted">Logs</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr>
-            <td class="px-2 text-muted">Maintenance page</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr>
-            <td class="px-2 text-muted">Diagnostics tools</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr>
-            <td class="px-2 text-muted">Full Manual settings control</td>
-            <td class="px-2 text-center"><Tick/></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          <tr>
-            <td class="px-2 text-muted">Statistics on your installation</td>
-            <td class="px-2 text-center"></td>
-            <td class="px-2 text-center"><Tick/></td>
-          </tr>
-          </tbody>
-      </table>
-    </div>
-  </WidgetWrapper>
+    ]}
+  />
 
   <FAQs
   title="FAQs"
diff --git a/src/types.d.ts b/src/types.d.ts
index 9fecb03e..636e962f 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -254,6 +254,20 @@ export interface Features extends Omit<Headline, 'classes'>, Widget {
   isAfterContent?: boolean;
 }
 
+export interface Spec {
+  feature: string;
+  isHeader?: boolean;
+  values?: string[];
+  available?: boolean[];
+}
+
+
+export interface FeaturesList extends Omit<Headline, 'classes'>, Widget {
+  products: string[];
+  specs: Spec[];
+
+}
+
 export interface Faqs extends Omit<Headline, 'classes'>, Widget {
   iconUp?: string;
   iconDown?: string;
@@ -298,13 +312,3 @@ export interface Content3 extends Omit<Headline, 'classes'>, Widget {
 
 export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}
 
-export interface Spec {
-  type: string;
-  values?: string[];
-  available?: boolean[];
-}
-
-export interface Products { 
-  products: string[];
-}
-