fulldev-ui 0.7.0-beta.9 → 0.7.0

package/src/components/blocks/cta-7.astro

@@ -0,0 +1,90 @@
+---
+import { Avatar, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import { Image } from "@/components/ui/image"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+} from "@/components/ui/item"
+import { Rating } from "@/components/ui/rating"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionMedia,
+  SectionProse,
+  SectionSpread,
+} from "@/components/ui/section"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  image?: {
+    src: string
+    alt: string
+  }
+  item?: {
+    images?: {
+      src: string
+      alt: string
+    }[]
+    rating?: number
+    description?: string
+  }
+}
+
+const { class: className, id, links, image, item } = Astro.props
+---
+
+<Section class={className} id={id} size="lg">
+  <SectionMedia class="absolute inset-0 size-full rounded-none mask-y-from-0%">
+    <Image sizes="(1536px) 1536px, 100vw" {...image} />
+  </SectionMedia>
+  <SectionSpread class="relative @5xl:items-center">
+    <SectionProse size="lg">
+      <slot />
+    </SectionProse>
+    <SectionContent class="shrink-0">
+      <SectionActions>
+        {
+          links?.map(({ icon, text, ...link }, i) => (
+            <Button
+              class="w-full"
+              variant={i === 0 ? "default" : "secondary"}
+              {...link}
+            >
+              {icon && <Icon name={icon} />}
+              {text}
+            </Button>
+          ))
+        }
+      </SectionActions>
+      <Item class="p-0">
+        <ItemMedia class="-space-x-5">
+          {
+            item?.images?.map((image) => (
+              <Avatar class="ring-background size-11 ring">
+                <AvatarImage {...image} />
+              </Avatar>
+            ))
+          }
+        </ItemMedia>
+        <ItemContent class="mt-1">
+          <Rating rating={item?.rating} />
+          <ItemDescription class="text-foreground">
+            {item?.description}
+          </ItemDescription>
+        </ItemContent>
+      </Item>
+    </SectionContent>
+  </SectionSpread>
+</Section>

package/src/components/blocks/cta-8.astro

@@ -0,0 +1,91 @@
+---
+import { cn } from "@/lib/utils"
+import { Avatar, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+} from "@/components/ui/item"
+import { Rating } from "@/components/ui/rating"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionProse,
+} from "@/components/ui/section"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  item?: {
+    images?: {
+      src: string
+      alt: string
+    }[]
+    rating?: number
+    description?: string
+  }
+}
+
+const { class: className, id, links, item } = Astro.props
+---
+
+<Section
+  class={cn(
+    "border-primary/20 my-0 -mt-px rounded-none shadow-none",
+    className
+  )}
+  id={id}
+  variant="floating"
+  size="lg"
+>
+  <SectionContent
+    class={cn(
+      "before:from-primary/20 relative items-center before:absolute before:top-full before:left-0 before:-z-10 before:h-[200%] before:w-full before:animate-pulse before:rounded-full before:bg-gradient-to-b before:to-transparent before:blur-3xl"
+    )}
+  >
+    <Item class="p-0">
+      <ItemMedia class="-space-x-5">
+        {
+          item?.images?.map((image) => (
+            <Avatar class="ring-background size-11 ring">
+              <AvatarImage {...image} />
+            </Avatar>
+          ))
+        }
+      </ItemMedia>
+      <ItemContent class="mt-1">
+        <Rating rating={item?.rating} />
+        <ItemDescription>
+          {item?.description}
+        </ItemDescription>
+      </ItemContent>
+    </Item>
+    <SectionProse class="text-center" size="lg">
+      <slot />
+    </SectionProse>
+    <SectionActions class="justify-center">
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button
+            variant={i === 0 ? "default" : "outline"}
+            size="lg"
+            {...link}
+          >
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionContent>
+</Section>

package/src/components/blocks/faqs-1.astro

@@ -0,0 +1,61 @@
+---
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionProse,
+} from "@/components/ui/section"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    title?: string
+    description?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionContent>
+    <SectionProse>
+      <slot />
+    </SectionProse>
+    <SectionActions>
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button variant={i === 0 ? "default" : "outline"} {...link}>
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionContent>
+  <Accordion>
+    {
+      items?.map(({ title, description }) => (
+        <AccordionItem>
+          <AccordionTrigger>{title}</AccordionTrigger>
+          <AccordionContent>{description}</AccordionContent>
+        </AccordionItem>
+      ))
+    }
+  </Accordion>
+</Section>

package/src/components/blocks/faqs-2.astro

@@ -0,0 +1,64 @@
+---
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionProse,
+  SectionSplit,
+} from "@/components/ui/section"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    title?: string
+    description?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionSplit>
+    <SectionContent>
+      <SectionProse>
+        <slot />
+      </SectionProse>
+      <SectionActions>
+        {
+          links?.map(({ icon, text, ...link }, i) => (
+            <Button variant={i === 0 ? "default" : "outline"} {...link}>
+              {icon && <Icon name={icon} />}
+              {text}
+            </Button>
+          ))
+        }
+      </SectionActions>
+    </SectionContent>
+    <Accordion>
+      {
+        items?.map(({ title, description }) => (
+          <AccordionItem>
+            <AccordionTrigger>{title}</AccordionTrigger>
+            <AccordionContent>{description}</AccordionContent>
+          </AccordionItem>
+        ))
+      }
+    </Accordion>
+  </SectionSplit>
+</Section>

package/src/components/blocks/faqs-3.astro

@@ -0,0 +1,61 @@
+---
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionProse,
+  SectionSpread,
+} from "@/components/ui/section"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    title?: string
+    description?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionSpread class="@5xl:items-end">
+    <SectionProse>
+      <slot />
+    </SectionProse>
+    <SectionActions>
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button variant={i === 0 ? "default" : "outline"} {...link}>
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionSpread>
+  <Accordion>
+    {
+      items?.map(({ title, description }) => (
+        <AccordionItem>
+          <AccordionTrigger>{title}</AccordionTrigger>
+          <AccordionContent>{description}</AccordionContent>
+        </AccordionItem>
+      ))
+    }
+  </Accordion>
+</Section>

package/src/components/blocks/faqs-4.astro

@@ -0,0 +1,61 @@
+---
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionProse,
+} from "@/components/ui/section"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    title?: string
+    description?: string
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id} style="--section-width: 672px;">
+  <SectionContent>
+    <SectionProse>
+      <slot />
+    </SectionProse>
+    <SectionActions>
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button variant={i === 0 ? "default" : "outline"} {...link}>
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionContent>
+  <Accordion>
+    {
+      items?.map(({ title, description }) => (
+        <AccordionItem>
+          <AccordionTrigger>{title}</AccordionTrigger>
+          <AccordionContent>{description}</AccordionContent>
+        </AccordionItem>
+      ))
+    }
+  </Accordion>
+</Section>

package/src/components/blocks/features-1.astro

@@ -0,0 +1,90 @@
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+} from "@/components/ui/section"
+import {
+  Tile,
+  TileActions,
+  TileContent,
+  TileDescription,
+  TileMedia,
+  TileTitle,
+} from "@/components/ui/tile"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    title?: string
+    description?: string
+    icon?: string
+    href?: string
+    links?: {
+      icon?: string
+      text?: string
+      href?: string
+      target?: string
+    }[]
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionContent>
+    <SectionProse>
+      <slot />
+    </SectionProse>
+    <SectionActions>
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button variant={i === 0 ? "default" : "outline"} {...link}>
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionContent>
+  <SectionGrid>
+    {
+      items?.map(({ title, description, icon, links }) => (
+        <Tile>
+          <TileMedia variant="icon">
+            <Icon name={icon} />
+          </TileMedia>
+          <TileContent>
+            <TileTitle>{title}</TileTitle>
+            <TileDescription>{description}</TileDescription>
+          </TileContent>
+          <TileActions>
+            {links?.map(({ icon, text, href, target }) => (
+              <Button
+                class="h-auto p-0"
+                variant="link"
+                href={href}
+                target={target}
+              >
+                {icon && <Icon name={icon} />}
+                {text}
+              </Button>
+            ))}
+          </TileActions>
+        </Tile>
+      ))
+    }
+  </SectionGrid>
+</Section>

package/src/components/blocks/features-2.astro

@@ -0,0 +1,90 @@
+---
+import { Button } from "@/components/ui/button"
+import { Icon } from "@/components/ui/icon"
+import {
+  Section,
+  SectionActions,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+} from "@/components/ui/section"
+import {
+  Tile,
+  TileActions,
+  TileContent,
+  TileDescription,
+  TileMedia,
+  TileTitle,
+} from "@/components/ui/tile"
+
+interface Props {
+  class?: string
+  id?: string
+  links?: {
+    icon?: string
+    text?: string
+    href?: string
+    target?: string
+  }[]
+  items?: {
+    title?: string
+    description?: string
+    icon?: string
+    href?: string
+    links?: {
+      icon?: string
+      text?: string
+      href?: string
+      target?: string
+    }[]
+  }[]
+}
+
+const { class: className, id, links, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionContent class="items-center">
+    <SectionProse class="text-center">
+      <slot />
+    </SectionProse>
+    <SectionActions class="justify-center">
+      {
+        links?.map(({ icon, text, ...link }, i) => (
+          <Button variant={i === 0 ? "default" : "outline"} {...link}>
+            {icon && <Icon name={icon} />}
+            {text}
+          </Button>
+        ))
+      }
+    </SectionActions>
+  </SectionContent>
+  <SectionGrid>
+    {
+      items?.map(({ title, description, icon, links }) => (
+        <Tile class="items-center">
+          <TileMedia variant="icon">
+            <Icon name={icon} />
+          </TileMedia>
+          <TileContent class="items-center text-center text-balance">
+            <TileTitle>{title}</TileTitle>
+            <TileDescription>{description}</TileDescription>
+          </TileContent>
+          <TileActions class="justify-center">
+            {links?.map(({ icon, text, href, target }) => (
+              <Button
+                class="h-auto p-0"
+                variant="link"
+                href={href}
+                target={target}
+              >
+                {icon && <Icon name={icon} />}
+                {text}
+              </Button>
+            ))}
+          </TileActions>
+        </Tile>
+      ))
+    }
+  </SectionGrid>
+</Section>

package/src/components/blocks/features-3.astro

@@ -0,0 +1,58 @@
+---
+import { Image } from "@/components/ui/image"
+import {
+  Section,
+  SectionContent,
+  SectionGrid,
+  SectionProse,
+} from "@/components/ui/section"
+import {
+  Tile,
+  TileContent,
+  TileDescription,
+  TileMedia,
+  TileSplit,
+  TileTitle,
+} from "@/components/ui/tile"
+
+interface Props {
+  class?: string
+  id?: string
+  items?: {
+    href?: string
+    title?: string
+    description?: string
+    image?: {
+      src: string
+      alt: string
+    }
+  }[]
+}
+
+const { class: className, id, items } = Astro.props
+---
+
+<Section class={className} id={id}>
+  <SectionContent class="@5xl:items-center">
+    <SectionProse class="@5xl:text-center">
+      <slot />
+    </SectionProse>
+  </SectionContent>
+  <SectionGrid>
+    {
+      items?.map(({ title, description, href, image }) => (
+        <Tile href={href}>
+          <TileSplit class="items-center">
+            <TileMedia>
+              <Image sizes="230px" {...image} />
+            </TileMedia>
+            <TileContent>
+              <TileTitle>{title}</TileTitle>
+              <TileDescription>{description}</TileDescription>
+            </TileContent>
+          </TileSplit>
+        </Tile>
+      ))
+    }
+  </SectionGrid>
+</Section>