fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

package/src/blocks/Header.astro

@@ -1,7 +1,196 @@
 ---
-import HeaderComponent from 'fulldev-ui/components/Header.astro'
+import type { HTMLAttributes } from 'astro/types'
+import Button from 'fulldev-ui/components/Button.astro'
+// import Cart from 'fulldev-ui/components/Cart.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+import Drawer from 'fulldev-ui/components/Drawer.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Link from 'fulldev-ui/components/Link.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Search from 'fulldev-ui/components/Search.astro'
+import Social from 'fulldev-ui/components/Social.astro'
+import Themer from 'fulldev-ui/components/Themer.astro'
+import type { HeaderSchema } from 'fulldev-ui/schemas/components/header'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'header'>, HeaderSchema {}
+
+const {
+  logo,
+  heading,
+  links,
+  socials,
+  menus,
+  search,
+  themer,
+  buttons,
+  cart,
+  ...rest
+} = Astro.props
 ---
 
-<HeaderComponent {...rest} />
+<Element
+  class:list="header"
+  {...rest}
+>
+  <Container>
+    <Element class:list="header-start">
+      <Logo {...logo} />
+      {
+        links?.map((link) => (
+          <Link
+            size="sm"
+            variant="muted"
+            {...link}
+          />
+        ))
+      }
+    </Element>
+    <Element class:list="header-end">
+      {
+        search && (
+          <Search
+            if={search}
+            variant="ghost"
+            size="sm"
+          />
+        )
+      }
+      {
+        buttons?.map((button) => (
+          <Button
+            size="sm"
+            {...button}
+          />
+        ))
+      }
+      <!-- {
+        cart && (
+          <Cart
+            variant="ghost"
+            size="sm"
+          />
+        )
+      } -->
+      <Themer
+        if={themer}
+        variant="ghost"
+        size="sm"
+      />
+      {
+        socials?.map((social) => (
+          <Social
+            variant="ghost"
+            size="sm"
+            href={social}
+          />
+        ))
+      }
+      <!-- <Button
+        class:list="menu-button"
+        as="label"
+        for="sidebar-toggle"
+        icon="menu-2"
+        variant="ghost"
+        size="sm"
+      /> -->
+      <Drawer
+        id="header-drawer"
+        icon="menu-2"
+        size="sm"
+      >
+        <Container>
+          <Element class:list="header-links">
+            {
+              links?.map((link) => (
+                <Link
+                  variant="muted"
+                  {...link}
+                />
+              ))
+            }
+          </Element>
+          {
+            menus?.map(({ heading, links }) => (
+              <Element class:list="header-menu">
+                <Heading
+                  text={heading}
+                  size="md"
+                  as="h6"
+                />
+                <Element class:list="header-links">
+                  {links?.map((link) => (
+                    <Link
+                      variant="muted"
+                      {...link}
+                    />
+                  ))}
+                </Element>
+              </Element>
+            ))
+          }
+        </Container>
+      </Drawer>
+    </Element>
+  </Container>
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .header {
+      @apply sticky left-0 top-0 z-20 flex h-14 w-full items-center overflow-hidden border-b bg-background;
+      height: var(--header-height);
+
+      &,
+      & ~ * {
+        --header-height: 3.5rem;
+      }
+
+      .container {
+        @apply flex items-center gap-6;
+      }
+
+      .header-start {
+        @apply flex items-center gap-6;
+
+        .link {
+          @apply max-lg:hidden;
+        }
+      }
+
+      .header-home {
+        @apply flex items-center gap-2;
+      }
+
+      .header-end {
+        @apply ml-auto flex items-center gap-1;
+
+        .social,
+        .themer {
+          @apply max-lg:hidden;
+        }
+
+        .menu-button {
+          @apply lg:hidden;
+        }
+      }
+
+      .drawer {
+        @apply lg:hidden;
+
+        .container {
+          @apply flex w-full flex-col items-start gap-6 overflow-y-auto px-gutter pb-14 pt-8;
+          @apply scrollbar scrollbar-track-transparent scrollbar-thumb-accent scrollbar-thumb-rounded-full scrollbar-w-2 hover:scrollbar-thumb-accent-hover;
+        }
+
+        .header-menu {
+          @apply flex flex-col gap-4;
+        }
+
+        .header-links {
+          @apply flex flex-col gap-3;
+        }
+      }
+    }
+  }
+</style>

package/src/blocks/Hero1.astro

@@ -0,0 +1,74 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.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 Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { HeroSchema } from 'fulldev-ui/schemas/blocks/hero.ts'
+
+interface Props extends ComponentProps<typeof Section>, HeroSchema {}
+
+const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="hero-1"
+  {...rest}
+>
+  <Container>
+    <Element class="hero-1-segment">
+      <Element class="hero-1-content">
+        <Badge
+          size="lg"
+          {...badge}
+        />
+        <Tagline
+          size="sm"
+          text={tagline}
+        />
+        <Heading
+          as="h1"
+          size="6xl"
+          text={heading}
+        />
+        <Paragraph
+          size="xl"
+          text={paragraph}
+        />
+      </Element>
+      <Buttons
+        {buttons}
+        size="lg"
+      />
+    </Element>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .hero-1 {
+      .hero-1-segment {
+        @apply flex flex-col items-center gap-8 text-center;
+      }
+
+      .hero-1-content {
+        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
+      }
+
+      .paragraph {
+        @apply text-balance;
+      }
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Job1.astro

@@ -0,0 +1,97 @@
+---
+import type { ComponentProps } from 'astro/types'
+import type { CollectionEntry } from 'astro:content'
+import Badge from 'fulldev-ui/components/Badge.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Container from 'fulldev-ui/components/Container.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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Prose from 'fulldev-ui/components/Prose.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+
+interface Props extends ComponentProps<typeof Section> {
+  badges?: ComponentProps<typeof Badge>[] | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  list?: ComponentProps<typeof List>['items'] | undefined
+  button?: ComponentProps<typeof Button> | undefined
+  render: CollectionEntry<'pages'>['render']
+}
+
+const { badges, heading, paragraph, list, button, render, ...rest } =
+  Astro.props
+
+const { Content } = await render()
+---
+
+<Section
+  class:list="job-1"
+  {...rest}
+>
+  <Container class:list="job-1-container">
+    <Element class:list="job-1-segment">
+      <Element class:list="job-1-content">
+        <Element class:list="job-1-badges">
+          {
+            badges?.map((badge) => (
+              <Badge
+                size="sm"
+                {...badge}
+              />
+            ))
+          }
+        </Element>
+        <Heading
+          as="h1"
+          size="4xl"
+          text={heading}
+        />
+        <Paragraph
+          size="lg"
+          muted
+          text={paragraph}
+        />
+        <List items={list} />
+      </Element>
+      <Button
+        size="lg"
+        {...button}
+      />
+    </Element>
+    <Prose>
+      <Content />
+    </Prose>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .job-1 {
+      .container {
+        @apply flex flex-col items-start gap-x-gutter lg:grid lg:grid-cols-2;
+      }
+
+      .job-1-segment {
+        @apply sticky top-0 flex max-w-xl flex-col items-start gap-8 py-16;
+
+        top: var(--header-height, 0px);
+        width: var(--sidebar-width);
+        height: calc(100vh - var(--headers));
+      }
+
+      .job-1-content {
+        @apply flex flex-col items-start gap-4;
+      }
+
+      .job-1-badges {
+        @apply flex flex-wrap gap-2;
+      }
+
+      .prose {
+        @apply py-16;
+      }
+    }
+  }
+</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 Card from 'fulldev-ui/components/Card.astro'
+import Container from 'fulldev-ui/components/Container.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 Section from 'fulldev-ui/components/Section.astro'
+import type { ProductsSchema } from 'fulldev-ui/schemas/blocks/products'
+import { getHref } from 'fulldev-ui/utils/getHref'
+
+interface Props extends ComponentProps<typeof Section>, ProductsSchema {}
+
+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/Reviews1.astro

@@ -0,0 +1,75 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { FeaturesSchema } from 'fulldev-ui/schemas/blocks/features'
+
+interface Props extends ComponentProps<typeof Section>, FeaturesSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="features-1"
+  {...rest}
+>
+  <Container>
+    <Element class="features-1-segment">
+      <Element class="features-1-content">
+        <Tagline
+          size="sm"
+          text={tagline}
+        />
+        <Heading
+          size="3xl"
+          text={heading}
+        />
+        <Paragraph
+          size="lg"
+          text={paragraph}
+        />
+      </Element>
+    </Element>
+    <Element class:list="features-1-cards">
+      {
+        cards?.map(({ icon, heading, paragraph }) => (
+          <Element class="features-1-card">
+            <Icon
+              size="lg"
+              name={icon}
+            />
+            <Heading
+              as="h3"
+              size="lg"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Element>
+        ))
+      }
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .features-1 {
+      .features-1-cards {
+        @apply grid grid-cols-1 gap-6 lg:grid-cols-3;
+      }
+
+      .features-1-card {
+        @apply flex flex-col gap-3;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>