dev.metalisp.sbt/src/component/card.lisp

;; https://getbootstrap.com/docs/5.3/components/card/

;; A card is a flexible and extensible content container. It includes options for
;; headers and footers, a wide variety of content, contextual background colors,
;; and powerful display options. If you’re familiar with Bootstrap 3, cards
;; replace our old panels, wells, and thumbnails. Similar functionality to those
;; components is available as modifier classes for cards.

(defpackage cl-sbt-card
  (:use :cl)
  (:export
   :title
   :subtitle
   :text
   :link
   :header
   :img
   :body
   :card-with-img
   :card))

(in-package :cl-sbt-card)

(defmacro title (&body body)
"This macro generates a Bootstrap card title.

BODY: The contents of the title."

  `(spinneret:with-html
       (:h5 :class "card-title" ,@body)))

(defmacro subtitle (&body body)
"This macro generates a Bootstrap card subtitle.

BODY: The contents of the subtitle."

  `(spinneret:with-html
       (:h6 :class "card-subtitle mb-2 text-body-secondary" ,@body)))

(defmacro text (&body body)
"This macro generates a Bootstrap card text.

BODY: The contents of the text."

  `(spinneret:with-html
       (:p :class "card-text" ,@body)))

(defmacro link ((&key (href "#")) &body body)
"This macro generates a Bootstrap card link.

HREF: The URL that the link will point to.

BODY: The contents of the link."

  `(spinneret:with-html
       (:a :href ,href :class "card-link" ,@body)))

(defmacro header (&body body)
"This macro generates a Bootstrap card header.

BODY: The contents of the header."

  `(spinneret:with-html
       (:div :class "header" ,@body)))

(defmacro img ((&key (src "#") (alt "Card Image")))
"This macro generates a Bootstrap card image.

SRC: The URL of the image.

ALT: The alt text for the image."

  `(spinneret:with-html
       (:img :src ,src
             :alt ,alt
             :class "card-img-top")))

(defmacro body (&body body)
"This macro generates a Bootstrap card body.

BODY: The contents of the body."

  `(spinneret:with-html
       (:div :class "card-body" ,@body)))

(defmacro card-with-img ((&key (img-src nil)) &body body)
"This macro generates a Bootstrap card with an image.

IMG-SRC: The URL of the image.

BODY: The contents of the body."

  `(spinneret:with-html
       (:div :class "card"
             ,(if (null img-src) nil `(img (:src ,img-src)))
             (:div :class "card-body" ,@body))))

(defmacro card (&body body)
"This macro generates a Bootstrap card.

BODY: The contents of the card."

  `(spinneret:with-html
       (:div :class "card" ,@body)))

;; Kitchen sink
;; Mix and match multiple content types to create the card you need, or throw
;; everything in there. Shown below are image styles, blocks, text styles, and a
;; list group—all wrapped in a fixed-width card.

(defun card-kitchen-sink ()
  (card (img (:src "..."))
        (body (card-title "Card title")
              (card-text "Some quick example text to build on the card title and make up the bulk of the card's content."))
        (cl-sbt-list-group (:content "An item")
                           (:content "A second item")
                           (:content "A third item"))
        (body (card-link "Card Link")
              (card-link "Another Link"))))