Card

templ CardDemo() {
	@ui.Card("w-[350px]", nil) {
		@ui.CardHeader("", nil) {
			@ui.CardTitle("", nil) {
				Create project
			}
			@ui.CardDescription("", nil) {
				Deploy your new project in one-click.
			}
		}
		@ui.CardContent("", nil) {
			<form>
				<div class="grid w-full items-center gap-4">
					<div class="flex flex-col space-y-1.5">
						@ui.Label("", templ.Attributes{"for": "card-name"}) {
							Name
						}
						@ui.Input("name", ui.InputTypeText, "", templ.Attributes{"id": "card-name", "placeholder": "Name of your project"})
					</div>
					<div class="flex flex-col space-y-1.5">
						@ui.Label("", templ.Attributes{"for": "card-framework"}) {
							Framework
						}
						@ui.Input("framework", ui.InputTypeText, "", templ.Attributes{"id": "card-framework", "placeholder": "Next.js"})
					</div>
				</div>
			</form>
		}
		@ui.CardFooter("flex justify-between", nil) {
			@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantOutline, ui.ButtonSizeDefault, "", nil) {
				Cancel
			}
			@ui.Button(ui.ButtonTypeButton, ui.ButtonVariantDefault, ui.ButtonSizeDefault, "", nil) {
				Deploy
			}
		}
	}
}