feat/card: add the Card component (#115)

* refactor(component): refactoring Daisy Button props

* feat(component): add Card Component

* style: formatting Card JSX demo

* style: remove unused imports

* refactor: update property name

Author: fabiobiondi

packages/daisy/src/components/card/card-actions.tsx

@@ -0,0 +1,15 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+import {
+  CardActions as HeadlessCartActions,
+} from '@qwik-ui/headless';
+
+export type CardActionsProps = HTMLAttributes<HTMLElement>;
+
+
+export const CardActions = component$(
+  (props: CardActionsProps) => (
+    <HeadlessCartActions {...props} class="card-actions justify-end">
+      <Slot />
+    </HeadlessCartActions>
+  )
+)

packages/daisy/src/components/card/card-body.tsx

@@ -0,0 +1,13 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+type CardBodyProps = HTMLAttributes<HTMLElement>;
+
+
+export const CardBody = component$(
+  (props: CardBodyProps) => {
+    return (
+      <div class="card-body" {...props}>
+        <Slot />
+      </div>
+    )
+  }
+)

packages/daisy/src/components/card/card-image.tsx

@@ -0,0 +1,14 @@
+import { component$, HTMLAttributes, QwikIntrinsicElements } from '@builder.io/qwik';
+import {
+  CardImage as HeadlessCardImage,
+} from '@qwik-ui/headless';
+export type HTMLImgProps = QwikIntrinsicElements['img'];
+
+type CardImageProps = HTMLAttributes<HTMLElement> & HTMLImgProps;
+
+
+export const CardImage = component$(
+  (props: CardImageProps) => (
+    <HeadlessCardImage {...props} />
+  )
+)

packages/daisy/src/components/card/card-title.tsx

@@ -0,0 +1,15 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+import {
+  CardTitle as HeadlessCardTitle,
+} from '@qwik-ui/headless';
+
+export type CardTitleProps = HTMLAttributes<HTMLElement>;
+
+
+export const CardTitle = component$(
+  (props: CardTitleProps) => (
+    <HeadlessCardTitle {...props} class="card-title">
+      <Slot />
+    </HeadlessCardTitle>
+  )
+)

packages/daisy/src/components/card/card.tsx

@@ -0,0 +1,18 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+import {
+  Card as HeadlessCard,
+} from '@qwik-ui/headless';
+import { clsq } from '@qwik-ui/shared';
+
+export type CardProps = HTMLAttributes<HTMLElement>;
+
+export const Card = component$(
+  (props: CardProps) => {
+    const { class: className, ...rest } = props;
+    return (
+        <HeadlessCard class={clsq('card bg-base-100 ', className)} {...rest}>
+          <Slot />
+        </HeadlessCard>
+    );
+  }
+);

packages/daisy/src/components/card/index.ts

@@ -0,0 +1,5 @@
+export * from './card';
+export * from './card-body';
+export * from './card-title';
+export * from './card-actions';
+export * from './card-image';

packages/daisy/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/button/button';
 export * from './components/button-group/button-group';
+export * from './components/card';
 export * from './components/collapse/collapse';
 export * from './components/drawer/drawer';
 export * from './components/tabs';

packages/headless/src/components/card/card-actions.tsx

@@ -0,0 +1,14 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+
+type CardActionsProps = HTMLAttributes<HTMLElement>;
+
+export const CardActions = component$(
+  (props: CardActionsProps) => {
+    return (
+      <div {...props}>
+        <Slot />
+      </div>
+    );
+  }
+);
+

packages/headless/src/components/card/card-body.tsx

@@ -0,0 +1,14 @@
+import { component$, HTMLAttributes, Slot } from '@builder.io/qwik';
+
+type CardBodyProps = HTMLAttributes<HTMLElement>;
+
+export const CardBody = component$(
+  (props: CardBodyProps) => {
+    return (
+      <div {...props}>
+        <Slot />
+      </div>
+    );
+  }
+);
+

packages/headless/src/components/card/card-image.tsx

@@ -0,0 +1,14 @@
+import { component$, HTMLAttributes, QwikIntrinsicElements } from '@builder.io/qwik';
+
+export type HTMLImgProps = QwikIntrinsicElements['img'];
+
+type CardImageProps = HTMLAttributes<HTMLElement> & HTMLImgProps;
+
+export const CardImage = component$(
+  (props: CardImageProps) => {
+    return (
+      <figure><img {...props} /></figure>
+    );
+  }
+);
+