feat: add card component

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2024-10-06
 
 - Added: Product Hunt badge on landing page
+- Added: Card component
 - Changed: Theme switcher on landing page
 - Changed: Improve docs UI
 - Changed: Make Product Hunt Badge smaller on footer

assets/css/output.css

@@ -860,6 +860,10 @@ body {
   width: 100%;
 }
 
+.w-\[350px\] {
+  width: 350px;
+}
+
 .max-w-3xl {
   max-width: 48rem;
 }
@@ -1242,6 +1246,11 @@ body {
   padding-bottom: 2rem;
 }
 
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }

cmd/server/main.go

@@ -24,6 +24,7 @@ func main() {
 	mux.Handle("GET /docs/components/button", templ.Handler(pages.Button()))
 	mux.Handle("GET /docs/components/sheet", templ.Handler(pages.Sheet()))
 	mux.Handle("GET /docs/components/tabs", templ.Handler(pages.Tabs()))
+	mux.Handle("GET /docs/components/card", templ.Handler(pages.Card()))
 
 	fmt.Println("Server is running on http://localhost:8090")
 	http.ListenAndServe(":8090", mux)

internals/shared/menudata.go

@@ -33,6 +33,10 @@ var Sections = []Section{
 				Text: "Button",
 				Href: "/docs/components/button",
 			},
+			{
+				Text: "Card",
+				Href: "/docs/components/card",
+			},
 			{
 				Text: "Sheet",
 				Href: "/docs/components/sheet",

internals/ui/components/card.templ

@@ -0,0 +1,41 @@
+package components
+
+type CardProps struct {
+	Class string
+}
+
+templ Card(props CardProps) {
+	<div class={ "rounded-lg border bg-card text-card-foreground shadow-sm", props.Class }>
+		{ children... }
+	</div>
+}
+
+templ CardHeader() {
+	<div class="flex flex-col space-y-1.5 p-6">
+		{ children... }
+	</div>
+}
+
+templ CardTitle() {
+	<h3 class="font-semibold leading-none tracking-tight">
+		{ children... }
+	</h3>
+}
+
+templ CardDescription() {
+	<p class="text-sm text-muted-foreground">
+		{ children... }
+	</p>
+}
+
+templ CardContent() {
+	<div class="p-6 pt-0">
+		{ children... }
+	</div>
+}
+
+templ CardFooter() {
+	<div class="flex items-center p-6 pt-0">
+		{ children... }
+	</div>
+}

internals/ui/pages/card.templ

@@ -0,0 +1,39 @@
+package pages
+
+import (
+	"github.com/axzilla/goilerplate/internals/ui/components"
+	"github.com/axzilla/goilerplate/internals/ui/layouts"
+	"github.com/axzilla/goilerplate/internals/ui/showcase"
+)
+
+templ Card() {
+	@layouts.DocsLayout() {
+		<div>
+			<div class="mb-16">
+				<h1 class="text-3xl font-bold mb-2">Card</h1>
+				<p class="mb-4 text-muted-foreground">Displays a card with header, content, and footer.</p>
+			</div>
+			@components.Tabs(components.TabsProps{
+				Tabs: []components.Tab{
+					{
+						ID:      "preview",
+						Title:   "Preview",
+						Content: showcase.CardShowcase(),
+					},
+					{
+						ID:      "code",
+						Title:   "Code",
+						Content: CodeSnippetFromEmbedded("card.templ", "go", showcase.TemplFiles),
+					},
+					{
+						ID:      "component",
+						Title:   "Component",
+						Content: CodeSnippetFromEmbedded("card.templ", "go", components.TemplFiles),
+					},
+				},
+				TabsContainerClass:    "md:w-1/2",
+				ContentContainerClass: "w-full",
+			})
+		</div>
+	}
+}

internals/ui/showcase/card.templ

@@ -0,0 +1,24 @@
+package showcase
+
+import "github.com/axzilla/goilerplate/internals/ui/components"
+
+templ CardShowcase() {
+	<div class="flex justify-center items-center border rounded-md py-16 px-4">
+		@components.Card(components.CardProps{Class: "w-[350px]"}) {
+			@components.CardHeader() {
+				@components.CardTitle() {
+					Card Title
+				}
+				@components.CardDescription() {
+					Card Description
+				}
+			}
+			@components.CardContent() {
+				<p>Card Content</p>
+			}
+			@components.CardFooter() {
+				@components.Button(components.ButtonProps{Text: "Action"}, nil)
+			}
+		}
+	</div>
+}