love-ui 1.2.17 → 1.2.18

package/registry/default/blocks/faq-4/components/faq.tsx

@@ -0,0 +1,181 @@
+"use client";
+import React from "react";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/registry/default/ui/accordion";
+import { Button } from "@/registry/default/ui/button";
+import { LayoutGridIcon, PowerIcon, FeatherIcon, CreditCardIcon, LifeBuoyIcon } from "lucide-react";
+
+const categories = [
+	{
+		icon: (
+			<LayoutGridIcon className="size-4" />
+		),
+		id: "all",
+		label: "All Topics",
+	},
+	{
+		icon: (
+			<PowerIcon className="size-4" />
+		),
+		id: "getting-started",
+		label: "Getting Started",
+	},
+	{
+		icon: (
+			<FeatherIcon className="size-4" />
+		),
+		id: "features",
+		label: "Features",
+	},
+	{
+		icon: (
+			<CreditCardIcon className="size-4" />
+		),
+		id: "license",
+		label: "License",
+	},
+	{
+		icon: (
+			<LifeBuoyIcon className="size-4" />
+		),
+		id: "support",
+		label: "Support",
+	},
+];
+
+export function FaqsSection() {
+	const [activeCategory, setActiveCategory] = React.useState("all");
+
+	const filtered = faqs.filter((faq) => {
+		const matchesCategory =
+			activeCategory === "all" || faq.category === activeCategory;
+		return matchesCategory;
+	});
+
+	const currentCategory = React.useMemo(
+		() => categories.find((cat) => cat.id === activeCategory),
+		[activeCategory]
+	);
+
+	return (
+		<section className="mx-auto min-h-screen w-full max-w-5xl">
+			<div className="flex flex-col items-center justify-center gap-4 px-4 py-16">
+				<h2 className="text-balance font-black font-mono text-4xl md:text-5xl lg:font-black">
+					FAQs
+				</h2>
+				<p className="text-muted-foreground">Answers about using LoveUI.</p>
+			</div>
+			<div className="relative grid min-h-full grid-cols-1 py-12 md:grid-cols-3">
+				<div className="flex h-full items-start justify-center border-b pb-2 md:border-b-0">
+					<div className="flex w-max flex-wrap items-start justify-start gap-2 md:flex-col md:justify-center">
+						{categories.map((cat) => (
+							<Button
+								key={cat.id}
+								onClick={() => setActiveCategory(cat.id)}
+								variant={activeCategory === cat.id ? "outline" : "ghost"}
+							>
+								{cat.icon}
+								{cat.label}
+							</Button>
+						))}
+					</div>
+				</div>
+				<div className="col-span-2 space-y-5 px-4 py-5">
+					{currentCategory && (
+						<div className="flex items-center gap-2">
+							{currentCategory.icon}
+							<span className="font-medium">{currentCategory.label}</span>
+						</div>
+					)}
+					<Accordion className="space-y-2" collapsible type="single">
+						{filtered.map((item) => (
+							<AccordionItem
+								className="border-b-0"
+								key={item.id}
+								value={item.id.toString()}
+							>
+								<AccordionTrigger className="bg-muted px-4 hover:no-underline dark:bg-muted/50">
+									{item.title}
+								</AccordionTrigger>
+
+								<AccordionContent className="p-4">
+									{item.content}
+								</AccordionContent>
+							</AccordionItem>
+						))}
+					</Accordion>
+				</div>
+			</div>
+		</section>
+	);
+}
+
+const faqs = [
+	{
+		id: 1,
+		category: "getting-started",
+		title: "How do I add my first component?",
+		content:
+			"Run npx love-ui@latest add loveui to install the shared setup, then add a component such as npx love-ui@latest add button.",
+	},
+	{
+		id: 2,
+		category: "getting-started",
+		title: "What are the system requirements?",
+		content:
+			"LoveUI is designed for React projects that use Tailwind CSS. If your project uses a different import alias, update the copied imports after installation.",
+	},
+	{
+		id: 3,
+		category: "features",
+		title: "Can I use LoveUI with a product team?",
+		content:
+			"Yes. Because LoveUI components live in your codebase, teams can review, edit, and version them like any other application source.",
+	},
+	{
+		id: 4,
+		category: "features",
+		title: "What does the component library include?",
+		content:
+			"LoveUI includes primitives, examples, and full-page blocks for common product interfaces, from forms and dialogs to auth screens and FAQ sections.",
+	},
+	{
+		id: 5,
+		category: "features",
+		title: "Does LoveUI include AI agent guidance?",
+		content:
+			"Yes. LoveUI Skills gives AI coding agents design rules, workflow steps, and quality checks for building better interfaces with LoveUI.",
+	},
+	{
+		id: 6,
+		category: "license",
+		title: "Is LoveUI free to use?",
+		content:
+			"Yes. LoveUI is open source under the MIT license, so you can use it in personal, internal, and commercial projects.",
+	},
+	{
+		id: 7,
+		category: "license",
+		title: "Do I have to keep the generated files unchanged?",
+		content:
+			"No. The source is copied into your app specifically so you can rename, restyle, and reshape it for your product.",
+	},
+	{
+		id: 8,
+		category: "support",
+		title: "How do I report a bug?",
+		content:
+			"Open a GitHub issue with a small reproduction, the component name, and the behavior you expected to see.",
+	},
+	{
+		id: 9,
+		category: "support",
+		title: "Where should I look for examples?",
+		content:
+			"Start with the component docs and block gallery. Each item shows the install command and source files you can copy or customize.",
+	},
+];

package/registry/default/blocks/faq-5/app/page.tsx

@@ -0,0 +1,9 @@
+import { FaqsSection } from "../components/faq";
+
+export default function Page() {
+	return (
+		<div className="min-h-screen w-full place-content-center">
+			<FaqsSection />
+		</div>
+	);
+}

package/registry/default/blocks/faq-5/components/faq.tsx

@@ -0,0 +1,211 @@
+"use client";
+import { cn } from "@/lib/utils";
+
+import React from "react";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/registry/default/ui/accordion";
+import { Button } from "@/registry/default/ui/button";
+import {
+	Empty,
+	EmptyContent,
+	EmptyHeader,
+	EmptyMedia,
+	EmptyTitle,
+} from "@/registry/default/ui/empty";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupInput,
+} from "@/registry/default/ui/input-group";
+import { FullWidthDivider } from "./full-width-divider";
+import { SearchIcon, SearchSlashIcon } from "lucide-react";
+
+export function FaqsSection() {
+	const [searchTerm, setSearchTerm] = React.useState("");
+	const [activeCategory, setActiveCategory] = React.useState("all");
+
+	const categories = [
+		{ id: "all", label: "All" },
+		{ id: "getting-started", label: "Getting Started" },
+		{ id: "features", label: "Features" },
+		{ id: "license", label: "License" },
+		{ id: "support", label: "Support" },
+	];
+
+	const filtered = faqs.filter((faq) => {
+		const matchesCategory =
+			activeCategory === "all" || faq.category === activeCategory;
+		const matchesSearch =
+			faq.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+			faq.content.toLowerCase().includes(searchTerm.toLowerCase());
+		return matchesCategory && matchesSearch;
+	});
+
+	return (
+		<div className="mx-auto min-h-screen w-full max-w-3xl md:border-x">
+			<div className="px-4 py-16 lg:px-6">
+				<h1 className="mb-4 font-semibold text-3xl md:text-4xl">
+					Frequently Asked Questions
+				</h1>
+				<p className="mb-8 max-w-2xl text-muted-foreground">
+					Find answers to common questions about LoveUI. Can't find what you're
+					looking for? Our support team is here to help.
+				</p>
+
+				<InputGroup className="max-w-sm">
+					<InputGroupInput
+						onChange={(e) => setSearchTerm(e.target.value)}
+						placeholder="Search FAQs..."
+						value={searchTerm}
+					/>
+					<InputGroupAddon>
+						<SearchIcon data-icon="inline-start" />
+					</InputGroupAddon>
+				</InputGroup>
+			</div>
+
+			<FullWidthDivider contained />
+
+			<div className="flex flex-wrap gap-1 border-b px-4 md:gap-3">
+				{categories.map((cat) => (
+					<button
+						className="flex flex-col"
+						key={cat.id}
+						onClick={() => setActiveCategory(cat.id)}
+						type="button"
+					>
+						<span
+							className={cn(
+								"p-1 text-muted-foreground text-sm hover:text-primary md:p-2 md:text-base",
+								activeCategory === cat.id && "text-primary"
+							)}
+						>
+							{cat.label}
+						</span>
+						{activeCategory === cat.id && (
+							<span className="h-0.5 w-full rounded-full bg-primary" />
+						)}
+					</button>
+				))}
+			</div>
+
+			<Accordion
+				className="space-y-2 border-0! px-4 py-12 lg:px-6"
+				collapsible
+				type="single"
+			>
+				{filtered.map((faq) => (
+					<AccordionItem
+						className="rounded-lg border px-4 shadow-xs"
+						key={faq.id}
+						value={faq.id.toString()}
+					>
+						<AccordionTrigger className="hover:no-underline">
+							{faq.title}
+						</AccordionTrigger>
+						<AccordionContent className="pt-2 pb-4 text-muted-foreground">
+							{faq.content}
+						</AccordionContent>
+					</AccordionItem>
+				))}
+			</Accordion>
+
+			{filtered.length === 0 && (
+				<Empty>
+					<EmptyHeader>
+						<EmptyMedia variant="icon">
+							<SearchIcon
+							/>
+						</EmptyMedia>
+						<EmptyTitle>No FAQs found matching your search.</EmptyTitle>
+					</EmptyHeader>
+					<EmptyContent>
+						<Button onClick={() => setSearchTerm("")} variant="outline">
+							<SearchSlashIcon data-icon="inline-start" />
+							Clear search
+						</Button>
+					</EmptyContent>
+				</Empty>
+			)}
+
+			<div className="flex items-center px-4 py-6 lg:px-6">
+				<p className="text-muted-foreground">
+					Can't find what you're looking for?{" "}
+					<a className="text-primary hover:underline" href="#">
+						Contact Us
+					</a>
+				</p>
+			</div>
+		</div>
+	);
+}
+
+const faqs = [
+	{
+		id: 1,
+		category: "getting-started",
+		title: "How do I add my first component?",
+		content:
+			"Run npx love-ui@latest add loveui to install the shared setup, then add a component such as npx love-ui@latest add button.",
+	},
+	{
+		id: 2,
+		category: "getting-started",
+		title: "What are the system requirements?",
+		content:
+			"LoveUI is designed for React projects that use Tailwind CSS. If your project uses a different import alias, update the copied imports after installation.",
+	},
+	{
+		id: 3,
+		category: "features",
+		title: "Can I use LoveUI with a product team?",
+		content:
+			"Yes. Because LoveUI components live in your codebase, teams can review, edit, and version them like any other application source.",
+	},
+	{
+		id: 4,
+		category: "features",
+		title: "What does the component library include?",
+		content:
+			"LoveUI includes primitives, examples, and full-page blocks for common product interfaces, from forms and dialogs to auth screens and FAQ sections.",
+	},
+	{
+		id: 5,
+		category: "features",
+		title: "Does LoveUI include AI agent guidance?",
+		content:
+			"Yes. LoveUI Skills gives AI coding agents design rules, workflow steps, and quality checks for building better interfaces with LoveUI.",
+	},
+	{
+		id: 6,
+		category: "license",
+		title: "Is LoveUI free to use?",
+		content:
+			"Yes. LoveUI is open source under the MIT license, so you can use it in personal, internal, and commercial projects.",
+	},
+	{
+		id: 7,
+		category: "license",
+		title: "Do I have to keep the generated files unchanged?",
+		content:
+			"No. The source is copied into your app specifically so you can rename, restyle, and reshape it for your product.",
+	},
+	{
+		id: 8,
+		category: "support",
+		title: "How do I report a bug?",
+		content:
+			"Open a GitHub issue with a small reproduction, the component name, and the behavior you expected to see.",
+	},
+	{
+		id: 9,
+		category: "support",
+		title: "Where should I look for examples?",
+		content:
+			"Start with the component docs and block gallery. Each item shows the install command and source files you can copy or customize.",
+	},
+];

package/registry/default/blocks/faq-5/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/features1/app/page.tsx

@@ -0,0 +1,9 @@
+import { FeatureSection } from "../components/feature-section";
+
+export default function Page() {
+	return (
+		<section className="min-h-screen place-content-center px-4">
+			<FeatureSection />
+		</section>
+	);
+}

package/registry/default/blocks/features1/components/feature-section.tsx

@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils";
+import type React from "react";
+import { ZapIcon, ShieldCheckIcon, ActivityIcon, GlobeIcon } from "lucide-react";
+
+type FeatureType = {
+	title: string;
+	icon: React.ReactNode;
+	description: string;
+};
+
+export function FeatureSection() {
+	return (
+		<div className="mx-auto grid max-w-5xl grid-cols-2 gap-4 py-4 md:grid-cols-4">
+			{features.map((feature, index) => (
+				<div
+					className={cn(
+						"relative flex flex-col items-center justify-center p-2",
+						"after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-linear-to-b after:from-foreground/6 after:via-foreground/25 after:to-foreground/6",
+						"[&_svg]:size-6 [&_svg]:text-muted-foreground",
+						{
+							"after:hidden": index === features.length - 1,
+							"after:hidden after:md:block": index === 1,
+						}
+					)}
+					key={feature.title}
+				>
+					{feature.icon}
+					<h3 className="mt-4 text-center font-medium text-xs md:text-sm lg:text-base">
+						{feature.title}
+					</h3>
+					<p className="mt-1 text-center text-[10px] text-muted-foreground md:text-xs">
+						{feature.description}
+					</p>
+				</div>
+			))}
+		</div>
+	);
+}
+
+const features: FeatureType[] = [
+	{
+		title: "Lightning Fast",
+		icon: (
+			<ZapIcon
+			/>
+		),
+		description: "Blazing fast edge performance.",
+	},
+	{
+		title: "Secure by Design",
+		icon: (
+			<ShieldCheckIcon
+			/>
+		),
+		description: "Security by design, zero config.",
+	},
+	{
+		title: "Real-time Sync",
+		icon: (
+			<ActivityIcon
+			/>
+		),
+		description: "Real-time sync across devices.",
+	},
+	{
+		title: "Global Scale",
+		icon: (
+			<GlobeIcon
+			/>
+		),
+		description: "Instant global deployment.",
+	},
+];

package/registry/default/blocks/features2/app/page.tsx

@@ -0,0 +1,9 @@
+import { FeatureSection } from "../components/feature-section";
+
+export default function Page() {
+	return (
+		<section className="min-h-screen place-content-center p-4">
+			<FeatureSection />
+		</section>
+	);
+}

package/registry/default/blocks/features2/components/decor-icon.tsx

@@ -0,0 +1,45 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const DecorIconVariants = cva(
+	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
+	{
+		variants: {
+			position: {
+				"top-left":
+					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"top-right":
+					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
+				"bottom-right":
+					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+				"bottom-left":
+					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
+			},
+		},
+		defaultVariants: {
+			position: "top-left",
+		},
+	}
+);
+
+type DecorIconProps = React.ComponentProps<"svg"> &
+	VariantProps<typeof DecorIconVariants>;
+
+export function DecorIcon({ position, className, ...props }: DecorIconProps) {
+	return (
+		<svg
+			aria-hidden="true"
+			className={cn(DecorIconVariants({ position, className }))}
+			fill="none"
+			stroke="currentColor"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path d="M5 12h14" />
+			<path d="M12 5v14" />
+		</svg>
+	);
+}

package/registry/default/blocks/features2/components/feature-section.tsx

@@ -0,0 +1,97 @@
+import { cn } from "@/lib/utils";
+import type React from "react";
+import { DecorIcon } from "./decor-icon";
+import { HistoryIcon, SquareDashedIcon, CommandIcon } from "lucide-react";
+
+type FeatureType = {
+	title: string;
+	icon: React.ReactNode;
+	description: string;
+};
+
+export function FeatureSection() {
+	return (
+		<div className="mx-auto max-w-5xl">
+			<h2 className="mb-5 text-center font-medium text-2xl md:text-3xl">
+				Ensuring your speedy workflow
+			</h2>
+
+			<div className="relative">
+				{/* Corner Icons */}
+				<DecorIcon
+					className="size-6 stroke-2 stroke-border"
+					position="top-left"
+				/>
+				<DecorIcon
+					className="size-6 stroke-2 stroke-border"
+					position="top-right"
+				/>
+				<DecorIcon
+					className="size-6 stroke-2 stroke-border"
+					position="bottom-left"
+				/>
+				<DecorIcon
+					className="size-6 stroke-2 stroke-border"
+					position="bottom-right"
+				/>
+
+				<DashedLine className="-top-[1.5px] right-3 left-3" />
+				<DashedLine className="top-3 -right-[1.5px] bottom-3" />
+				<DashedLine className="top-3 bottom-3 -left-[1.5px]" />
+				<DashedLine className="right-3 -bottom-[1.5px] left-3" />
+
+				<div className="grid grid-cols-1 md:grid-cols-3">
+					{features.map((feature) => (
+						<div
+							className="group [&_svg]:mask-b-from-0% relative p-8 [&_svg]:size-7 [&_svg]:text-muted-foreground"
+							key={feature.title}
+						>
+							{feature.icon}
+							<h3 className="font-medium text-lg">{feature.title}</h3>
+							<p className="text-muted-foreground text-sm leading-relaxed">
+								{feature.description}
+							</p>
+							<DashedLine className="right-5 bottom-0 left-5 group-last:hidden md:top-5 md:right-0 md:bottom-5 md:left-full" />
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function DashedLine({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			className={cn("absolute border-collapse border border-dashed", className)}
+			{...props}
+		/>
+	);
+}
+
+const features: FeatureType[] = [
+	{
+		title: "Auto-Save Everything",
+		icon: (
+			<HistoryIcon
+			/>
+		),
+		description: "Write without worry, every time.",
+	},
+	{
+		title: "Drag-and-Drop Blocks",
+		icon: (
+			<SquareDashedIcon
+			/>
+		),
+		description: "Rearrange sections with the block editor.",
+	},
+	{
+		title: "Keyboard Shortcuts",
+		icon: (
+			<CommandIcon
+			/>
+		),
+		description: "Speed up your workflow with quick keys.",
+	},
+];

package/registry/default/blocks/features3/app/page.tsx

@@ -0,0 +1,9 @@
+import { FeatureSection } from "../components/feature-section";
+
+export default function Page() {
+	return (
+		<section className="min-h-screen place-content-center overflow-hidden px-4">
+			<FeatureSection />
+		</section>
+	);
+}