improve list

LycheeOrg · Oct 15, 2024 · 55c65b0 · 55c65b0
1 parent 59c63e7
commit 55c65b0
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git a/src/components/ui/Tag.astro b/src/components/ui/Tag.astro
@@ -0,0 +1,7 @@
+---
+import { twMerge } from 'tailwind-merge';
+
+const { tag = 'v6', classes = {} } = Astro.props;
+---
+
+<span class={twMerge("rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20 ml-2", classes)}>{ tag }</span>
diff --git a/src/components/widgets/FeaturesList.astro b/src/components/widgets/FeaturesList.astro
@@ -3,6 +3,7 @@ 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';
+import Tag from '../ui/Tag.astro';
 
 const {
   title = await Astro.slots.render('title'),
@@ -36,11 +37,11 @@ const {
       </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') || ''}>
+          specs.map(({ feature, isHeader, isV6, values, available }) => (
+            <tr class={(isHeader && ' 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 && <td class="px-2 text-muted"><Fragment set:html={feature} />{ isV6 && <Tag/> }</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>

diff --git a/src/pages/get-supporter-edition.astro b/src/pages/get-supporter-edition.astro
@@ -115,6 +115,7 @@ const metadata = {
       {
         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],
+        isV6: true,
       },
       {
         feature: 'Unlimited photos upload',
@@ -154,8 +155,9 @@ const metadata = {
         available: [true, true],
       },
       {
-        feature: 'Upload by chunks <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Upload by chunks',
         available: [true, true],
+        isV6: true,
       },
       {
         feature: 'Zip & download',
@@ -207,8 +209,9 @@ const metadata = {
         available: [true, true],
       },
       {
-        feature: 'Slideshow with previous & next <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Slideshow with previous & next',
         available: [true, true],
+        isV6: true,
       },
 
       {
@@ -228,12 +231,14 @@ const metadata = {
         available: [true, true],
       },
       {
-        feature: 'Space usage per user <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Space usage per user',
         available: [false, true],
+        isV6: true,
       },
       {
-        feature: 'Upload quota per user <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Upload quota per user',
         available: [false, true],
+        isV6: true,
       },
 
       {
@@ -244,6 +249,10 @@ const metadata = {
         feature: 'Landing page',
         available: [true, true],
       },
+      {
+        feature: 'Map view',
+        available: [true, true],
+      },
       {
         feature: 'RSS Feed',
         available: [true, true],

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -257,6 +257,7 @@ export interface Features extends Omit<Headline, 'classes'>, Widget {
 export interface Spec {
   feature: string;
   isHeader?: boolean;
+  isV6?: boolean;
   values?: string[];
   available?: boolean[];
 }