Merge pull request #86 from qwikerx/feat/card-component

feat: add component Card, adjust Button justify-content props

README.md

@@ -127,6 +127,7 @@ export default component$(() => {
 - Badge
 - Breadcrumb
 - Button
+- Card
 - Checkbox
 - Drawer
 - Dropdown

apps/web/src/routes/docs/components/card/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik'
+import { ComponentDocPage } from '~/components/ComponentDocPage/ComponentDocPage'
+import { DocumentHead } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <ComponentDocPage name="card">
+      <div q:slot="explanation">
+        Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog,
+        application, user profiles, and more.
+      </div>
+    </ComponentDocPage>
+  )
+})
+
+export const head: DocumentHead = () => ({
+  title: 'Qwik Card - Flowbite',
+})

apps/web/src/routes/docs/layout.tsx

@@ -54,6 +54,9 @@ export default component$(() => {
             <SidebarItem tag={NavLink} href="/docs/components/button">
               Button
             </SidebarItem>
+            <SidebarItem tag={NavLink} href="/docs/components/card">
+              Card
+            </SidebarItem>
             <SidebarItem tag={NavLink} href="/docs/components/drawer">
               Drawer
             </SidebarItem>

apps/web/src/routes/examples/[theme-rtl]/card/01-default-card/index@examples.tsx

@@ -0,0 +1,25 @@
+/**
+ * title: Default card
+ * description: Use this example to show a simple card component with a title and description and apply the href tag to the <Card> component to set a hyperlink to the card.
+ * height: 300
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { Card } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <Card href="#" class="max-w-sm">
+      <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">
+        Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+      </p>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/card/02-card-with-cta-button/index@examples.tsx

@@ -0,0 +1,27 @@
+/**
+ * title: Card with CTA button
+ * description: By also importing the <Button> component you can add it inside the card to show a call-to-action button.
+ * height: 300
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { Button, Card } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+import { IconArrowRightOutline } from 'flowbite-qwik-icons'
+
+export default component$(() => {
+  return (
+    <Card class="max-w-sm">
+      <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">
+        Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+      </p>
+      <Button suffix={IconArrowRightOutline}>Read more</Button>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/card/03-card-with-image/index@examples.tsx

@@ -0,0 +1,25 @@
+/**
+ * title: Card with image
+ * description: Add an image to the card by using the imgSrc prop and set the imgAlt prop to add an alt text to the image.
+ * height: 500
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { Card } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <Card class="max-w-sm" imgAlt="Meaningful alt text for an image that is not purely decorative" imgSrc="/image-1.jpg">
+      <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">
+        Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+      </p>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/card/04-card-with-custom-image/index@examples.tsx

@@ -0,0 +1,25 @@
+/**
+ * title: Card with custom image
+ * description: Specify your own image component for the card by using the imgAs prop
+ * height: 500
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { Card } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <Card class="max-w-sm" imgAs={<img width="920" height="613" src="/image-1.jpg" alt="image 1" />}>
+      <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">
+        Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+      </p>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/card/05-card-horizontal/index@examples.tsx

@@ -0,0 +1,25 @@
+/**
+ * title: Card horizontal
+ * description: Use the horizontal prop to show the card in a horizontal layout.
+ * height: 500
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { Card } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <Card class="max-w-sm" imgSrc="/image-4.jpg" horizontal>
+      <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+      <p class="font-normal text-gray-700 dark:text-gray-400">
+        Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
+      </p>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/card/06-card-user-profile/index@examples.tsx

@@ -0,0 +1,68 @@
+/**
+ * title: User profile card
+ * description: Use this example to show a user card with a profile picture, name, job title, buttons and a dropdown menu.
+ * height: 500
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { Card, Dropdown, DropdownItem } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <Card class="max-w-sm">
+      <div class="flex justify-end px-4 pt-4">
+        <Dropdown inline label="">
+          <DropdownItem>
+            <a
+              href="#"
+              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              Edit
+            </a>
+          </DropdownItem>
+          <DropdownItem>
+            <a
+              href="#"
+              class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              Export Data
+            </a>
+          </DropdownItem>
+          <DropdownItem>
+            <a
+              href="#"
+              class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-white"
+            >
+              Delete
+            </a>
+          </DropdownItem>
+        </Dropdown>
+      </div>
+      <div class="flex flex-col items-center pb-10">
+        <img alt="Bonnie image" height="96" src="/profile-picture-3.jpg" width="96" class="mb-3 rounded-full shadow-lg" />
+        <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
+        <span class="text-sm text-gray-500 dark:text-gray-400">Visual Designer</span>
+        <div class="mt-4 flex space-x-3 lg:mt-6">
+          <a
+            href="#"
+            class="inline-flex items-center rounded-lg bg-cyan-700 px-4 py-2 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
+          >
+            Add friend
+          </a>
+          <a
+            href="#"
+            class="inline-flex items-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:hover:border-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+          >
+            Message
+          </a>
+        </div>
+      </div>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/card/07-card-with-form/index@examples.tsx

@@ -0,0 +1,44 @@
+/**
+ * title: Card with form
+ * description: You can also add form elements inside the card component such as for sign up or login forms.
+ * height: 500
+ */
+
+import { component$, useSignal } from '@builder.io/qwik'
+import { Button, Card, Checkbox, Input } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  const email = useSignal('')
+  const password = useSignal('')
+  const remember = useSignal(false)
+
+  return (
+    <Card class="max-w-sm">
+      <form class="flex flex-col gap-4">
+        <div>
+          <div class="mb-2 block">
+            <label for="email1">Your email"</label>
+          </div>
+          <Input bind:value={email} id="email1" type="email" placeholder="name@flowbite.com" required />
+        </div>
+        <div>
+          <div class="mb-2 block">
+            <label for="password1"> Your password</label>
+          </div>
+          <Input bind:value={password} id="password1" type="password" required />
+        </div>
+        <div class="flex items-center gap-2">
+          <Checkbox bind:checked={remember} />
+          <label form="remember">Remember me</label>
+        </div>
+        <Button type="submit">Submit</Button>
+      </form>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}

apps/web/src/routes/examples/[theme-rtl]/card/08-card-ecommerce/index@examples.tsx

@@ -0,0 +1,51 @@
+/**
+ * title: E-commerce card
+ * description: Use this example to show a product card with an image (product preview), title, price, rating stars and buttons built for E-commerce websites.
+ * height: 500
+ */
+
+import { component$ } from '@builder.io/qwik'
+import { Card } from 'flowbite-qwik'
+import { staticGenerateHandler } from '~/routes/examples/[theme-rtl]/layout'
+import { StaticGenerateHandler } from '@builder.io/qwik-city'
+
+export default component$(() => {
+  return (
+    <Card class="max-w-sm" imgAlt="Apple Watch Series 7 in colors pink, silver, and black" imgSrc="/apple-watch.png">
+      <a href="#">
+        <h5 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</h5>
+      </a>
+      <div class="mb-5 mt-2.5 flex items-center">
+        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+        </svg>
+        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+        </svg>
+        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+        </svg>
+        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+        </svg>
+        <svg class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+        </svg>
+        <span class="ml-3 mr-2 rounded bg-cyan-100 px-2.5 py-0.5 text-xs font-semibold text-cyan-800 dark:bg-cyan-200 dark:text-cyan-800">5.0</span>
+      </div>
+      <div class="flex items-center justify-between">
+        <span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
+        <a
+          href="#"
+          class="rounded-lg bg-cyan-700 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-cyan-800 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-600 dark:hover:bg-cyan-700 dark:focus:ring-cyan-800"
+        >
+          Add to cart
+        </a>
+      </div>
+    </Card>
+  )
+})
+
+export const onStaticGenerate: StaticGenerateHandler = async () => {
+  return staticGenerateHandler()
+}