---
title: "Flexible and Elastic Card Layouts with r2resize"
author: "R Packager"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Flexible and Elastic Card Layouts with r2resize}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  comment = "#>",
  warning = FALSE,
  message = FALSE
)
library(r2resize)
library(shiny)
library(htmltools)
```

This vignette explores the `flexCard()` and `elastiCard()` functions from the `r2resize` package, which provide dynamic and interactive card layouts for displaying images, navigation items, or general content.

## Flexible Card - `flexCard()`

The `flexCard()` function creates an expandable flexible card holder, ideal for a list of items like images or navigation links that expand on hover or click.

```{r flexcard-example, eval=FALSE}
# Basic flex card with two items
r2resize::flexCard(
  item1 = c(
    bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
    icon = "home",
    title = "Welcome Home",
    subtitle = "Your personalized dashboard"
  ),
  item2 = c(
    bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
    icon = "info",
    title = "About Us",
    subtitle = "Learn more about our services",
    icon.color = "blue",
    text.color = "white"
  )
)

# Flex card with custom dimensions and active panel
r2resize::flexCard(
  itemA = c(
    bg = "https://r2resize.obi.obianom.com/m/1b.jpg",
    icon = "chart-line",
    title = "Analytics",
    subtitle = "View your data insights"
  ),
  itemB = c(
    bg = "https://r2resize.obi.obianom.com/m/1.jpg",
    icon = "envelope",
    title = "Messages",
    subtitle = "Check your inbox",
    icon.color = "red",
    text.color = "lightgray"
  ),
  height.px = 300,
  width.px = 800,
  border.color = "darkgray",
  border.width.px = 2,
  active.panel = 2 # Make the second item active by default
)

# Example within a Shiny app
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      h2("Flex Cards in Shiny"),
      flexCard(
        item1 = c(
          bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
          icon = "lightbulb",
          title = "Idea Generation",
          subtitle = "Brainstorm new concepts"
        ),
        item2 = c(
          bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
          icon = "code",
          title = "Development",
          subtitle = "Build your next project",
          icon.color = "green"
        )
      )
    ),
    server = function(input, output) {}
  )
}
```

## Hover Elastic Card - `elastiCard()`

The `elastiCard()` function creates an automatic elastic card holder, where cards expand and contract dynamically on hover, providing an engaging user experience.

```{r elasticard-example, eval=FALSE}
# Elasti card with text content
r2resize::elastiCard(
  item1 = c(
    title = "Product Features",
    subtitle = "Innovative and user-friendly",
    desc = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    text.color = "lightgreen"
  ),
  item2 = c(
    title = "Our Vision",
    subtitle = "Pioneering the future",
    desc = "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    text.color = "orange"
  )
)

# Elasti card with background images and text
r2resize::elastiCard(
  item1 = c(
    bg = "https://r2resize.obi.obianom.com/m/1b.jpg",
    title = "Scenic Landscapes",
    subtitle = "Explore breathtaking views",
    desc = "A collection of stunning natural beauty from around the world."
  ),
  item2 = c(
    bg = "https://r2resize.obi.obianom.com/m/1.jpg",
    title = "Urban Exploration",
    subtitle = "Discover city life",
    desc = "Dive into the vibrant and dynamic atmosphere of metropolitan areas."
  ),
  height.px = 350,
  width.px = 900,
  border.color = "gray",
  border.width.px = 3
)

# Example within a Shiny app
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      h2("Elastic Cards in Shiny"),
      elastiCard(
        item1 = c(
          bg = "https://r2resize.obi.obianom.com/m/image1.jpg",
          title = "Project Alpha",
          subtitle = "Phase 1 Complete",
          desc = "Successfully concluded the initial development phase with excellent results."
        ),
        item2 = c(
          bg = "https://r2resize.obi.obianom.com/m/image2.jpg",
          title = "Project Beta",
          subtitle = "Upcoming Milestones",
          desc = "Preparing for the next stage of development and feature integration."
        )
      )
    ),
    server = function(input, output) {}
  )
}
```