fulldev-ui 0.5.0-beta.9 → 0.6.0-beta-5

package/src/blocks/Footer.astro

@@ -1,7 +1,104 @@
 ---
-import FooterComponent from 'fulldev-ui/components/Footer.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Channel from 'fulldev-ui/components/Channel.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import { default as Paragraph } from 'fulldev-ui/components/Paragraph.astro'
+import Social from 'fulldev-ui/components/Social.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'footer'>, BlockSchema {
+  as?: HTMLTag
+}
+
+const {
+  as = 'footer',
+  logo,
+  heading,
+  paragraph,
+  socials,
+  channels,
+  menus,
+  // hours,
+  // html,
+  ...rest
+} = Astro.props
 ---
 
-<FooterComponent {...rest} />
+<Element
+  class:list="footer"
+  {as}
+  {...rest}
+>
+  <Element class:list="footer-container">
+    <Element class:list="footer-content">
+      <Logo
+        size="sm"
+        {...logo}
+      />
+      <Paragraph
+        size="sm"
+        text={paragraph}
+      />
+      <Element class:list="footer-socials">
+        {
+          socials?.map((social) => (
+            <Social
+              variant="secondary"
+              size="sm"
+              href={social}
+            />
+          ))
+        }
+      </Element>
+    </Element>
+    <Element class:list="footer-channels">
+      {channels?.map((channel) => <Channel {...channel} />)}
+    </Element>
+  </Element>
+  <!-- <Fragment set:html={html} /> -->
+  <!-- <Hours {hours} /> -->
+  <!-- <Menu
+    direction="row"
+    groups={menu}
+    {size}
+  /> -->
+  <!-- <Element class:list="hours column">
+    <Heading
+      text={hours?.heading}
+      as="h5"
+    />
+    <Element>
+      {
+        Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
+          <Element class:list="spread">
+            <Paragraph text={key} />
+            <Paragraph text={value} />
+          </Element>
+        ))
+      }
+    </Element>
+  </Element> -->
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .footer {
+      @apply relative mt-auto w-full border-t bg-background;
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      .footer-container {
+        @apply container flex flex-wrap justify-between gap-12 py-12;
+      }
+
+      .footer-content {
+        @apply flex max-w-60 flex-col gap-4;
+      }
+    }
+  }
+</style>

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 { BlockSchema } from 'fulldev-ui/schemas/components/block'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'header'>, BlockSchema {}
+
+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,60 @@
+---
+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 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 Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { badge, tagline, heading, paragraph, buttons, image, ...rest } =
+  Astro.props
+---
+
+<Section
+  class:list="hero-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Badge
+        size="lg"
+        {...badge}
+      />
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        as="h1"
+        size="6xl"
+        text={heading}
+      />
+      <Paragraph
+        size="xl"
+        text={paragraph}
+      />
+      <Buttons
+        {buttons}
+        size="lg"
+      />
+    </Writeup>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .hero-1 {
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Logos1.astro

@@ -0,0 +1,55 @@
+---
+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 Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Writeup from 'fulldev-ui/components/Writeup.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/components/block.ts'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, images, ...rest } = Astro.props
+---
+
+<Section
+  class:list="logos-1"
+  {...rest}
+>
+  <Container>
+    <Writeup>
+      <Heading
+        size="lg"
+        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 {
+      .logos-1-cards {
+        @apply grid grid-cols-1 gap-6 lg:grid-cols-3;
+      }
+
+      .logos-1-card {
+        @apply flex flex-col gap-3;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</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 { BlockSchema } from 'fulldev-ui/schemas/components/block'
+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/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 { BlockSchema } from 'fulldev-ui/schemas/components/block'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+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>