Change tags to categories

Author: mxvsh

README.md

@@ -8,7 +8,7 @@ A web-based TailwindCSS visual builder for creating and sharing components with
 - 📦 **Component Library**: Browse and manage blocks and templates
 - 🔍 **Live Preview**: Preview components in a new window with TailwindCSS
 - 📋 **Copy to Clipboard**: Easy copying of component HTML code
-- 🏷️ **Tagging System**: Organize components with tags
+- 🏷️ **Category System**: Organize components with categories
 - 🚀 **Build System**: Generate distribution files for CDN deployment
 - 📱 **Responsive Design**: Built with modern UI components from shadcn/ui
 
@@ -48,7 +48,7 @@ bun run dev
    - **Name**: Display name for your component
    - **Type**: Choose between "Blocks" or "Templates"
    - **Author**: Your name or organization
-   - **Tags**: Comma-separated tags (e.g., "header, hero, call-to-action")
+   - **Categories**: Comma-separated categories (e.g., "header, hero, call-to-action")
    - **HTML Code**: Your TailwindCSS component code
 
 3. Click "Create" to save your component
@@ -110,7 +110,7 @@ Each component includes metadata in `metadata.json`:
 {
   "id": "component-id",
   "name": "Component Name",
-  "tags": ["tag1", "tag2", "tag3"],
+  "categories": ["category1", "category2", "category3"],
   "author": "Author Name"
 }
 ```

contents/blocks/feat/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "feat",
   "name": "feat",
-  "tags": [
+  "categories": [
     "header"
   ],
   "author": "Yo"

contents/blocks/feature-02/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "feature-02",
   "name": "Feature 02",
-  "tags": [
+  "categories": [
     "card",
     "feature",
     "showcase"

contents/blocks/hero-section/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "hero-section",
   "name": "Hero Section",
-  "tags": [
+  "categories": [
     "hero",
     "call-to-action"
   ],

contents/templates/landing-01/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "landing-01",
   "name": "landing-01",
-  "tags": [
+  "categories": [
     "landing"
   ],
   "author": "Yo"

contents/templates/landing-01/preview.png

@@ -300,9 +300,9 @@ function ComponentCard({
 			</CardHeader>
 			<CardContent className="pt-0">
 				<div className="flex flex-wrap gap-1 mb-3">
-					{component.metadata.tags.map((tag) => (
-						<Badge key={tag} variant="secondary" className="text-xs">
-							{tag}
+					{component.metadata.categories.map((category) => (
+						<Badge key={category} variant="secondary" className="text-xs">
+							{category}
 						</Badge>
 					))}
 				</div>

src/components/ComponentBuilder.tsx

@@ -22,8 +22,8 @@ import {
 } from '@/components/ui/select';
 import type { Component } from '../types/component';
 
-// Predefined tag options for components
-const TAG_OPTIONS: Option[] = [
+// Predefined category options for components
+const CATEGORY_OPTIONS: Option[] = [
 	{ value: 'header', label: 'Header' },
 	{ value: 'hero', label: 'Hero' },
 	{ value: 'navigation', label: 'Navigation' },
@@ -80,14 +80,14 @@ const TAG_OPTIONS: Option[] = [
 const componentSchema = z.object({
 	name: z.string().min(1, 'Name is required'),
 	type: z.enum(['blocks', 'templates']),
-	tags: z
+	categories: z
 		.array(
 			z.object({
 				value: z.string(),
 				label: z.string()
 			})
 		)
-		.min(1, 'At least one tag is required'),
+		.min(1, 'At least one category is required'),
 	author: z.string().min(1, 'Author is required')
 });
 
@@ -118,34 +118,34 @@ export function ComponentForm({
 		defaultValues: {
 			name: editingComponent?.metadata.name || '',
 			type: editingComponent?.type || 'blocks',
-			tags:
-				editingComponent?.metadata.tags?.map((tag) => ({
-					value: tag,
-					label: tag.charAt(0).toUpperCase() + tag.slice(1)
+			categories:
+				editingComponent?.metadata.categories?.map((category) => ({
+					value: category,
+					label: category.charAt(0).toUpperCase() + category.slice(1)
 				})) || [],
 			author: editingComponent?.metadata.author || ''
 		}
 	});
 
 	const watchedType = watch('type');
-	const watchedTags = watch('tags');
+	const watchedCategories = watch('categories');
 
 	React.useEffect(() => {
 		if (editingComponent) {
 			reset({
 				name: editingComponent.metadata.name,
 				type: editingComponent.type,
-				tags: editingComponent.metadata.tags.map((tag) => ({
-					value: tag,
-					label: tag.charAt(0).toUpperCase() + tag.slice(1)
+				categories: editingComponent.metadata.categories.map((category) => ({
+					value: category,
+					label: category.charAt(0).toUpperCase() + category.slice(1)
 				})),
 				author: editingComponent.metadata.author
 			});
 		} else {
 			reset({
 				name: '',
 				type: 'blocks',
-				tags: [],
+				categories: [],
 				author: ''
 			});
 		}
@@ -159,7 +159,7 @@ export function ComponentForm({
 			metadata: {
 				id: newId,
 				name: data.name,
-				tags: data.tags.map((tag) => tag.value),
+				categories: data.categories.map((category) => category.value),
 				author: data.author
 			},
 			html: '<div class="p-4 bg-gray-100 rounded-lg">\n  <!-- Start building your component here -->\n  <p class="text-gray-600">Your component content goes here...</p>\n</div>',
@@ -223,25 +223,27 @@ export function ComponentForm({
 					</div>
 
 					<div>
-						<Label htmlFor="tags">Tags</Label>
+						<Label htmlFor="categories">Categories</Label>
 						<MultipleSelector
-							value={watchedTags as Option[]}
-							onChange={(options) => setValue('tags', options)}
-							defaultOptions={TAG_OPTIONS}
-							placeholder="Select tags for your component..."
+							value={watchedCategories as Option[]}
+							onChange={(options) => setValue('categories', options)}
+							defaultOptions={CATEGORY_OPTIONS}
+							placeholder="Select categories for your component..."
 							emptyIndicator={
 								<p className="text-center text-sm leading-10 text-muted-foreground">
-									No tags found.
+									No categories found.
 								</p>
 							}
 							className="mt-1"
 							maxSelected={4}
 							onMaxSelected={(maxLimit) => {
-								console.log(`You can select up to ${maxLimit} tags`);
+								console.log(`You can select up to ${maxLimit} categories`);
 							}}
 						/>
-						{errors.tags && (
-							<p className="text-sm text-red-500 mt-1">{errors.tags.message}</p>
+						{errors.categories && (
+							<p className="text-sm text-red-500 mt-1">
+								{errors.categories.message}
+							</p>
 						)}
 					</div>
 

src/components/ComponentForm.tsx

@@ -150,7 +150,7 @@ export function useComponents() {
 	};
 
 	  useEffect(() => {
-    loadComponents(1, 12, 'blocks');
+    loadComponents(1, 12, 'all');
   }, [loadComponents]);
 
 	return {

src/hooks/useComponents.ts

@@ -1,7 +1,7 @@
 export interface ComponentMetadata {
   id: string;
   name: string;
-  tags: string[];
+  categories: string[];
   author: string;
 }
 
@@ -16,6 +16,6 @@ export interface ComponentFormData {
   name: string;
   type: 'blocks' | 'templates';
   html: string;
-  tags: string;
+  categories: string;
   author: string;
 }