Merge pull request #111 from fulldotdev/list-and-compare-block

List and compare block

cloudcannon.config.yml

@@ -80,6 +80,9 @@ _inputs:
       step: 0.1
   head:
     label: SEO / Settings
+    type: object
+    options:
+      empty_type: object
   head.title:
     label: SEO title
     comment: 50-60 characters

src/blocks/Compare1.astro

@@ -0,0 +1,64 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Card from 'fulldev-ui/structures/Card.astro'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Stack from 'fulldev-ui/structures/Stack.astro'
+
+interface Props extends BlockSchema {}
+
+const { depth = 2, heading, paragraph, button, pros, cons } = Astro.props
+---
+
+<Section class="pricings-1">
+  <Container class="flex flex-col items-center gap-16">
+    <Prose class="text-center">
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        size="xl"
+        text={paragraph}
+      />
+    </Prose>
+    <Stack class="mx-auto flex flex-wrap items-stretch justify-center">
+      {
+        [cons || {}, pros || {}].map(
+          ({ tagline, heading, paragraph, list }, i) => (
+            <Card
+              class:list={`min-w-sm flex max-w-md flex-col justify-between gap-8 p-8 ${i === 0 ? 'bg-transparent' : ''}`}
+            >
+              <Prose>
+                <Tagline text={tagline} />
+                <Heading
+                  depth={(depth + 1) as 3}
+                  size="3xl"
+                  text={heading}
+                />
+                <Paragraph
+                  muted={i === 0}
+                  text={paragraph}
+                />
+                <List
+                  icon={i === 0 ? 'x' : 'check'}
+                  muted={i === 0}
+                  size="sm"
+                  items={list}
+                />
+              </Prose>
+            </Card>
+          )
+        )
+      }
+    </Stack>
+    <Button {...button} />
+  </Container>
+</Section>

src/components/List.astro

@@ -1,28 +1,32 @@
 ---
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
 
 interface Props extends HTMLAttributes<'ul' | 'ol'> {
   as?: 'ul' | 'ol' | undefined
   size?: 'sm' | 'md' | 'lg' | undefined
   items?: string[] | undefined
   muted?: boolean | undefined
+  icon?: string | undefined
 }
 
-const { as = 'ul', items, ...rest } = Astro.props
+const { as = 'ul', items, icon, ...rest } = Astro.props
 ---
 
 <Element
-  class:list="list"
+  class:list={['list', icon ? 'has-icon' : undefined]}
   {as}
   {...rest}
 >
   {
     items?.map((item) => (
-      <Element
-        as="li"
-        set:html={item}
-      />
+      <Element as="li">
+        <Icon name={icon} />
+        <span>
+          <Fragment set:html={item} />
+        </span>
+      </Element>
     ))
   }
   <slot />
@@ -32,22 +36,22 @@ const { as = 'ul', items, ...rest } = Astro.props
   @layer fulldev {
     .list,
     .prose :is(ul, ol) {
-      @apply ml-6;
+      @apply pl-4;
 
       &:is(ul) {
         @apply list-disc;
       }
 
       ul {
-        @apply ml-6 mt-2 list-disc;
+        @apply ml-5 mt-2 list-disc;
       }
 
       &:is(ol) {
         @apply list-decimal;
       }
 
       ol {
-        @apply ml-6 mt-2 list-decimal;
+        @apply ml-5 mt-2 list-decimal;
       }
 
       li {
@@ -57,11 +61,35 @@ const { as = 'ul', items, ...rest } = Astro.props
       &.size-sm,
       &:where(.size-sm &) {
         @apply text-sm;
+
+        .icon {
+          @apply mt-0;
+        }
       }
 
       &.size-lg,
       &:where(.size-lg &) {
         @apply text-lg;
+
+        .icon {
+          @apply mt-1;
+        }
+      }
+
+      &.muted {
+        @apply text-muted-foreground;
+      }
+
+      .icon {
+        @apply -ml-5 mt-0.5 shrink-0 text-inherit;
+      }
+
+      &.has-icon {
+        @apply ml-0 list-none;
+
+        li {
+          @apply flex gap-2;
+        }
       }
     }
   }

src/content/pages/docs/components/list.mdx

@@ -40,3 +40,14 @@ import List from 'fulldev-ui/components/List.astro'
 <List size="md" items={['First', 'Second', 'Third']} />
 <List size="lg" items={['First', 'Second', 'Third']} />
 ```
+
+### `icon`
+
+```astro live
+---
+import List from 'fulldev-ui/components/List.astro'
+---
+
+<List icon="check" items={['First', 'Second', 'Third']} />
+<List icon="x" items={['First', 'Second', 'Third']} />
+```

src/schemas/block.ts

@@ -11,6 +11,8 @@ export const blockSchema = cardSchema
     search: z.boolean().optional(),
     cart: z.boolean().optional(),
     cards: cardSchema.array().optional(),
+    pros: cardSchema.optional(),
+    cons: cardSchema.optional(),
     pages: pathSchema('pages').array().optional(),
     records: pathSchema('records').array().optional(),
     soldout: z.boolean().optional(),