cards

controllers/tablerdata.go

@@ -44,6 +44,86 @@ func SampleNavbarMenu() TablerMenu {
 	}
 }
 
+// SampleCards returns 6 sample cards showing different variants.
+func SampleCards() []FormtablerCard {
+  defaultBody := &FormtablerCardBody{
+		Text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.",
+	}
+	return []FormtablerCard{
+		// 1. Card with header, body text, and footer
+		{
+			Header: &FormtablerCardHeader{Title: "Card with header and footer"},
+			Body:   defaultBody,
+			Footer: &FormtablerCardFooter{Text: "This is standard card footer"},
+		},
+		// 2. Card with image top, status bar, and action button in body
+		{
+			Image:  &FormtablerCardImage{Position: "top", Src: "/public/static/photos/coffee-on-a-table-with-other-items.jpg"},
+			Status: &FormtablerCardStatus{Position: "top", Color: "red"},
+			Body: &FormtablerCardBody{
+				Title:      "Card with image & status",
+				Subtitle:   "Featured card",
+				Text:       "This card has an image at the top, a red status bar, and a call-to-action button.",
+				HasButton:  true,
+				ButtonText: "View details",
+			},
+		},
+		// 3. Card with image bottom, progress bar, and footer with elements
+		{
+			Image: &FormtablerCardImage{Position: "bottom", Src: "/public/static/photos/coffee-on-a-table-with-other-items.jpg"},
+			Body:  defaultBody,
+			Footer: &FormtablerCardFooter{
+				HasSwitch: true,
+				HasMore:   true,
+			},
+			Progress: &FormtablerCardProgress{Percent: 60, Color: "green"},
+		},
+		// 4. Card with header tabs, alert, and footer buttons
+		{
+			Header: &FormtablerCardHeader{
+				UseTabs: true,
+				Tabs: []FormtablerCardTab{
+					{Title: "Active", Active: true, Link: "#"},
+					{Title: "Second", Link: "#"},
+					{Title: "Disabled", Disabled: true, Link: "#"},
+				},
+			},
+			Alert: &FormtablerCardAlert{Text: "This is an alert message inside the card.", Type: "info"},
+			Body:  defaultBody,
+			Footer: &FormtablerCardFooter{
+				ButtonsCancel: "Cancel",
+				ButtonsAction: "Continue",
+			},
+		},
+		// 5. Card with inactive state, no footer
+		{
+			Inactive: true,
+			Header:   &FormtablerCardHeader{Title: "Inactive card"},
+			Body: &FormtablerCardBody{
+				Title: "This card is inactive",
+				Text:  "Inactive cards have reduced opacity. They are useful for showing disabled or expired content.",
+			},
+		},
+		// 6. Card with header pills, footer with avatars, and active state
+		{
+			Active: true,
+			Header: &FormtablerCardHeader{
+				UsePills: true,
+				Pills: []FormtablerCardTab{
+					{Title: "All", Active: true, Link: "#"},
+					{Title: "Active", Link: "#"},
+					{Title: "Completed", Link: "#"},
+				},
+			},
+			Body: defaultBody,
+			Footer: &FormtablerCardFooter{
+				HasCheck:   true,
+				HasAvatars: true,
+			},
+		},
+	}
+}
+
 // SampleFormElements returns sample data for all 25 formtabler components.
 func SampleFormElements() FormtablerFormElementsPage {
 	return FormtablerFormElementsPage{