fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/blocks/Industries1.astro

@@ -0,0 +1,86 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.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 Matrix from 'fulldev-ui/structures/Matrix.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  pages: CollectionEntry<'pages'>[]
+}
+
+const { heading, button, pages, ...rest } = Astro.props
+---
+
+<Section
+  class:list="industries-1"
+  {...rest}
+>
+  <Container>
+    <Element class:list="industries-1-segment">
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Button
+        size="sm"
+        variant="ghost"
+        {...button}
+      />
+    </Element>
+    <Matrix>
+      {
+        pages?.map(({ slug, data: { title, list, image } }) => (
+          <Card
+            class="industries-1-card"
+            href={getHref(slug)}
+          >
+            <Image {...image} />
+            <Writeup>
+              <Heading
+                as="h2"
+                size="lg"
+                text={title}
+              />
+              <List
+                size="sm"
+                items={list}
+              />
+            </Writeup>
+          </Card>
+        ))
+      }
+    </Matrix>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .industries-1 {
+      .container {
+        @apply flex flex-col gap-12;
+      }
+
+      .industries-1-segment {
+        @apply flex items-center justify-between gap-8;
+      }
+
+      .card {
+        @apply overflow-hidden p-0;
+
+        .writeup {
+          @apply p-4;
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Intro1.astro

@@ -0,0 +1,68 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.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 Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const {
+  badge,
+  tagline,
+  heading,
+  paragraph,
+  content,
+  button,
+  buttons,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="intro-1"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+      <Fragment set:html={content} />
+      <Group>
+        <Buttons
+          size="sm"
+          {button}
+          {buttons}
+        />
+      </Group>
+    </Writeup>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .section.intro-1 {
+      @apply border-b py-8;
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Jobs1.astro

@@ -0,0 +1,77 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import List from 'fulldev-ui/components/List.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 Matrix from 'fulldev-ui/structures/Matrix.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {
+  pages: CollectionEntry<'pages'>[]
+}
+
+const { heading, button, pages, ...rest } = Astro.props
+---
+
+<Section
+  class:list="jobs-1"
+  {...rest}
+>
+  <Container>
+    <Element class:list="jobs-1-segment">
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Button
+        size="sm"
+        variant="ghost"
+        {...button}
+      />
+    </Element>
+    <Matrix>
+      {
+        pages?.map(({ slug, data: { title, list } }) => (
+          <Card
+            class="jobs-1-card"
+            href={getHref(slug)}
+          >
+            <Heading
+              as="h2"
+              size="lg"
+              text={title}
+            />
+            <List
+              size="sm"
+              items={list}
+            />
+          </Card>
+        ))
+      }
+    </Matrix>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .jobs-1 {
+      .container {
+        @apply flex flex-col gap-12;
+      }
+
+      .jobs-1-segment {
+        @apply flex items-center justify-between gap-8;
+      }
+
+      .card {
+        @apply flex flex-col gap-3;
+      }
+    }
+  }
+</style>

package/src/blocks/Logos1.astro

@@ -0,0 +1,55 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, images, ...rest } = Astro.props
+---
+
+<Section
+  class:list="logos-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Heading
+        size="xl"
+        text={heading}
+      />
+      <Paragraph
+        size="sm"
+        muted
+        text={paragraph}
+      />
+    </Writeup>
+    <Element class:list="logos-1-cards">
+      {images?.map((image) => <Image {...image} />)}
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .logos-1 {
+      .container {
+        @apply flex flex-col items-center gap-8;
+      }
+
+      .logos-1-cards {
+        @apply flex flex-wrap justify-center gap-12;
+      }
+
+      .image {
+        @apply max-w-36;
+      }
+    }
+  }
+</style>

package/src/blocks/Products1.astro

@@ -0,0 +1,90 @@
+---
+import type { ComponentProps } from 'astro/types'
+import { getEntries } from 'astro:content'
+import Button from 'fulldev-ui/components/Button.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Price from 'fulldev-ui/components/Price.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 Section from 'fulldev-ui/structures/Section.astro'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { heading, button, products, ...rest } = Astro.props
+
+const entries = products && (await getEntries(products))
+---
+
+<Section
+  class:list="products-1"
+  {...rest}
+>
+  <Container>
+    <Element class:list="products-1-segment">
+      <Heading
+        size="2xl"
+        text={heading}
+      />
+      <Button
+        variant="ghost"
+        size="sm"
+        {...button}
+      />
+    </Element>
+    <Element class:list="products-1-cards">
+      {
+        entries?.map(({ slug, data: { images, title, price } }) => (
+          <Card href={getHref(slug)}>
+            <Image {...images?.[0]} />
+            <Element class:list="products-1-card-content">
+              <Heading
+                as="h3"
+                size="md"
+                text={title}
+              />
+              <Price amount={price} />
+            </Element>
+          </Card>
+        ))
+      }
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .products-1 {
+      .container {
+        @apply flex flex-col gap-8;
+      }
+
+      .products-1-segment {
+        @apply flex items-center justify-between gap-8;
+      }
+
+      .products-1-cards {
+        @apply grid grid-cols-2 items-start gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6;
+      }
+
+      .card {
+        @apply relative flex flex-col gap-3;
+
+        &:hover > .image {
+          @apply opacity-75 transition-opacity;
+        }
+
+        .image {
+          @apply rounded-md border;
+        }
+      }
+
+      .products-1-card-content {
+        @apply flex h-full flex-col gap-2;
+      }
+    }
+  }
+</style>

package/src/blocks/Projects1.astro

@@ -0,0 +1,80 @@
+---
+// Heading etc left, image and content right, sticky
+import type { ComponentProps } from 'astro/types'
+import Badges from 'fulldev-ui/components/Badges.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
+
+interface Props {
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  cards?: {
+    image?: ComponentProps<typeof Image> | undefined
+    badges?: ComponentProps<typeof Badges>['badges']
+    heading?: string | undefined
+    paragraph?: string | undefined
+  }[]
+}
+
+const { tagline, heading, paragraph, buttons, content, cards } = Astro.props
+---
+
+<Section class="projects-1">
+  <Container>
+    <Split class="items-start">
+      <Prose class="lg:sticky lg:top-sticky-16 lg:max-w-xl">
+        <Tagline text={tagline} />
+        <Heading
+          as="h2"
+          size="4xl"
+          text={heading}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Element class="flex flex-col gap-8">
+        {
+          cards?.map(({ image, badges, heading, paragraph }) => (
+            <Element class="flex flex-col gap-2">
+              <Image
+                class="mb-4"
+                {...image}
+              />
+              <Group>
+                <Badges
+                  size="sm"
+                  {badges}
+                />
+              </Group>
+              <Heading
+                as="h3"
+                size="xl"
+                text={heading}
+              />
+              <Paragraph text={paragraph} />
+            </Element>
+          ))
+        }
+      </Element>
+    </Split>
+  </Container>
+</Section>

package/src/blocks/Reviews1.astro

@@ -0,0 +1,81 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Rating from 'fulldev-ui/components/Rating.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 Masonry from 'fulldev-ui/structures/Masonry.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="reviews-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Writeup>
+    <Masonry>
+      {
+        cards?.map(({ rating, heading, paragraph, image }) => (
+          <Card class="reviews-1-card">
+            <Image {...image} />
+            <Rating
+              size="sm"
+              score={rating}
+            />
+            <Heading
+              as="h3"
+              size="md"
+              text={heading}
+            />
+            <Paragraph
+              size="sm"
+              text={paragraph}
+            />
+          </Card>
+        ))
+      }
+    </Masonry>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .reviews-1 {
+      .container {
+        @apply flex flex-col items-center gap-16;
+      }
+
+      .reviews-1-cards {
+        @apply grid grid-cols-1 gap-6 lg:grid-cols-3;
+      }
+
+      .reviews-1-card {
+        @apply flex flex-col gap-3;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/{components → blocks}/Subheader.astro

@@ -2,9 +2,8 @@
 import type { ComponentProps, HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Links from 'fulldev-ui/components/Links.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props extends GlobalProps, HTMLAttributes<'header'> {
+interface Props extends HTMLAttributes<'header'> {
   dark?: boolean | undefined
   size?: 'sm' | 'md' | 'lg' | undefined
   links?: ComponentProps<typeof Links>['links']

package/src/blocks/{Hero.astro → _Hero.astro}

@@ -1,12 +1,13 @@
----
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
+<!-- ---
+import type { ComponentProps,HTMLAttributes,HTMLTag } from 'astro/types'
 import Badge from 'fulldev-ui/components/Badge.astro'
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
-import Lead from 'fulldev-ui/components/Lead.astro'
-import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Paragraph,{
+default as Lead,
+} from 'fulldev-ui/components/Paragraph.astro'
 import Rating from 'fulldev-ui/components/Rating.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 
@@ -69,7 +70,7 @@ const {
           {level}
           {size}
         />
-        <Lead
+        <Paragraph
           text={lead}
           {size}
         />
@@ -241,4 +242,4 @@ const {
       }
     }
   }
-</style>
+</style> -->

package/src/components/Badge.astro

@@ -1,41 +1,21 @@
 ---
-import type { ComponentProps, HTMLAttributes, HTMLTag } from 'astro/types'
-import type { CollectionEntry } from 'astro:content'
-import { getEntry } from 'astro:content'
+import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
 import Icon from 'fulldev-ui/components/Icon.astro'
-import type { GlobalProps } from 'fulldev-ui/types/global-props'
 
-interface Props
-  extends GlobalProps,
-    HTMLAttributes<'div'>,
-    HTMLAttributes<'a'> {
-  as?: HTMLTag
-  href?: string | null | undefined
-  icon?: ComponentProps<typeof Icon>['name']
-  slug?: CollectionEntry<'pages'>['slug'] | undefined
-  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | undefined
+interface Props extends HTMLAttributes<'a'>, HTMLAttributes<'div'> {
+  variant?: 'primary' | 'secondary' | 'outline' | undefined
+  size?: 'sm' | 'md' | 'lg' | undefined
   text?: string | undefined
+  icon?: string | undefined
 }
 
-const {
-  slug,
-  href = slug === 'index' ? '/' : slug ? `/${slug}/` : undefined,
-  text = slug ? (await getEntry('pages', slug)).data.title : undefined,
-  as = href ? 'a' : 'div',
-  target = href?.startsWith('http') ? '_blank' : undefined,
-  variant = 'outline',
-  size = 'md',
-  icon,
-  ...rest
-} = Astro.props
+const { variant = 'outline', size = 'md', text, icon, ...rest } = Astro.props
 ---
 
 <Element
   class:list="badge"
-  {as}
-  {href}
-  {target}
+  as={rest.href ? 'a' : 'div'}
   {variant}
   {size}
   {...rest}

package/src/components/Badges.astro

@@ -1,43 +1,20 @@
 ---
-import type { ComponentProps, HTMLAttributes } from 'astro/types'
-import Element from 'fulldev-ui/components/Element.astro'
-import Badge from './Badge.astro'
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
 
-interface Props extends HTMLAttributes<'div'> {
-  variant?: ComponentProps<typeof Badge>['variant']
-  size?: ComponentProps<typeof Badge>['size']
-  badges?: ComponentProps<typeof Badge>[] | undefined
+interface Props extends ComponentProps<typeof Badge> {
   badge?: ComponentProps<typeof Badge> | undefined
+  badges?: string[] | undefined
 }
 
-const {
-  variant = 'outline',
-  size = 'md',
-  badges = [],
-  badge,
-  ...rest
-} = Astro.props
+const { badge, badges, ...rest } = Astro.props
 ---
 
-<Element
-  class:list="badges"
-  {...rest}
->
-  {
-    [badge, ...badges].filter(Boolean).map((badge) => (
-      <Badge
-        {variant}
-        {size}
-        {...badge}
-      />
-    ))
-  }
-</Element>
-
-<style is:global>
-  @layer fulldev {
-    .badges {
-      @apply inline-flex w-auto flex-wrap justify-stretch gap-1.5;
-    }
-  }
-</style>
+{
+  [badge, ...(badges || [])].filter(Boolean).map((badge) => (
+    <Badge
+      {...rest}
+      {...(typeof badge === 'string' ? { text: badge } : badge)}
+    />
+  ))
+}