Skip to content

Commit 8e10711

Browse files
shinokadashinokada
committed
style(admin/productdrawer): color update
1 parent 9621c37 commit 8e10711

File tree

2 files changed

+72
-72
lines changed

2 files changed

+72
-72
lines changed

‎src/routes/admin-dashboard/(sidebar)/components/product-drawer.md‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ Example
1111

1212
```svelte example
1313
<script lang="ts">
14-
import { ProductDrawer } from 'flowbite-svelte-admin-dashboard';
15-
import { Button, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from 'flowbite-svelte';
14+
import { ProductDrawer } from "flowbite-svelte-admin-dashboard";
15+
import { Button, Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell } from "flowbite-svelte";
1616
1717
// Types
1818
interface Product {
@@ -28,87 +28,87 @@ Example
2828
// State
2929
let drawerOpen = false;
3030
let productData: Partial<Product> | undefined;
31-
let drawerTitle = '';
31+
let drawerTitle = "";
3232
let editingProductId: number | null = null;
3333
3434
// Products database
3535
let products: Product[] = [
3636
{
3737
id: 1,
38-
name: 'iPhone 15 Pro',
39-
price: '1199',
40-
technology: 'APPLE',
41-
category: 'SMARTPHONE',
42-
description: 'Latest iPhone with titanium design and A17 Pro chip',
43-
discount: '5'
38+
name: "iPhone 15 Pro",
39+
price: "1199",
40+
technology: "APPLE",
41+
category: "SMARTPHONE",
42+
description: "Latest iPhone with titanium design and A17 Pro chip",
43+
discount: "5"
4444
},
4545
{
4646
id: 2,
47-
name: 'MacBook Air M3',
48-
price: '1299',
49-
technology: 'APPLE',
50-
category: 'LAPTOP',
51-
description: 'Lightweight laptop with M3 chip and 18-hour battery life',
52-
discount: '10'
47+
name: "MacBook Air M3",
48+
price: "1299",
49+
technology: "APPLE",
50+
category: "LAPTOP",
51+
description: "Lightweight laptop with M3 chip and 18-hour battery life",
52+
discount: "10"
5353
},
5454
{
5555
id: 3,
56-
name: 'Samsung Galaxy S24',
57-
price: '899',
58-
technology: 'SAMSUNG',
59-
category: 'SMARTPHONE',
60-
description: 'AI-powered smartphone with excellent camera',
61-
discount: ''
56+
name: "Samsung Galaxy S24",
57+
price: "899",
58+
technology: "SAMSUNG",
59+
category: "SMARTPHONE",
60+
description: "AI-powered smartphone with excellent camera",
61+
discount: ""
6262
}
6363
];
6464
6565
// Form configuration
6666
const additionalFields = [
6767
{
68-
name: 'technology',
69-
label: 'Technology/Brand',
70-
placeholder: 'Select brand',
68+
name: "technology",
69+
label: "Technology/Brand",
70+
placeholder: "Select brand",
7171
options: [
72-
{ value: 'APPLE', label: 'Apple' },
73-
{ value: 'SAMSUNG', label: 'Samsung' },
74-
{ value: 'GOOGLE', label: 'Google' },
75-
{ value: 'MICROSOFT', label: 'Microsoft' }
72+
{ value: "APPLE", label: "Apple" },
73+
{ value: "SAMSUNG", label: "Samsung" },
74+
{ value: "GOOGLE", label: "Google" },
75+
{ value: "MICROSOFT", label: "Microsoft" }
7676
]
7777
},
7878
{
79-
name: 'category',
80-
label: 'Category',
81-
placeholder: 'Select category',
79+
name: "category",
80+
label: "Category",
81+
placeholder: "Select category",
8282
options: [
83-
{ value: 'SMARTPHONE', label: 'Smartphone' },
84-
{ value: 'LAPTOP', label: 'Laptop' },
85-
{ value: 'TABLET', label: 'Tablet' },
86-
{ value: 'ACCESSORY', label: 'Accessory' }
83+
{ value: "SMARTPHONE", label: "Smartphone" },
84+
{ value: "LAPTOP", label: "Laptop" },
85+
{ value: "TABLET", label: "Tablet" },
86+
{ value: "ACCESSORY", label: "Accessory" }
8787
]
8888
},
8989
{
90-
name: 'discount',
91-
label: 'Discount',
92-
placeholder: 'No discount',
90+
name: "discount",
91+
label: "Discount",
92+
placeholder: "No discount",
9393
options: [
94-
{ value: '5', label: '5% Off' },
95-
{ value: '10', label: '10% Off' },
96-
{ value: '15', label: '15% Off' },
97-
{ value: '20', label: '20% Off' },
98-
{ value: '25', label: '25% Off' }
94+
{ value: "5", label: "5% Off" },
95+
{ value: "10", label: "10% Off" },
96+
{ value: "15", label: "15% Off" },
97+
{ value: "20", label: "20% Off" },
98+
{ value: "25", label: "25% Off" }
9999
]
100100
}
101101
];
102102
103103
// Helper function to get form data
104-
function getFormData(formData: FormData): Omit<Product, 'id'> {
104+
function getFormData(formData: FormData): Omit<Product, "id"> {
105105
return {
106-
name: String(formData.get('name') || ''),
107-
price: String(formData.get('price') || ''),
108-
technology: String(formData.get('technology') || ''),
109-
category: String(formData.get('category') || ''),
110-
description: String(formData.get('description') || ''),
111-
discount: String(formData.get('discount') || '')
106+
name: String(formData.get("name") || ""),
107+
price: String(formData.get("price") || ""),
108+
technology: String(formData.get("technology") || ""),
109+
category: String(formData.get("category") || ""),
110+
description: String(formData.get("description") || ""),
111+
discount: String(formData.get("discount") || "")
112112
};
113113
}
114114
@@ -121,7 +121,7 @@ Example
121121
function addNewProduct() {
122122
editingProductId = null;
123123
productData = undefined;
124-
drawerTitle = 'Add New Product';
124+
drawerTitle = "Add New Product";
125125
drawerOpen = true;
126126
}
127127
@@ -135,7 +135,7 @@ Example
135135
description: product.description,
136136
discount: product.discount
137137
};
138-
drawerTitle = 'Edit Product';
138+
drawerTitle = "Edit Product";
139139
drawerOpen = true;
140140
}
141141
@@ -147,21 +147,21 @@ Example
147147
technology: product.technology,
148148
category: product.category,
149149
description: product.description,
150-
discount: ''
150+
discount: ""
151151
};
152-
drawerTitle = 'Duplicate Product';
152+
drawerTitle = "Duplicate Product";
153153
drawerOpen = true;
154154
}
155155
156156
function createFromTemplate(category: string, technology: string) {
157157
editingProductId = null;
158158
productData = {
159-
name: '',
160-
price: '',
159+
name: "",
160+
price: "",
161161
technology: technology,
162162
category: category,
163163
description: `New ${category.toLowerCase()} product`,
164-
discount: ''
164+
discount: ""
165165
};
166166
drawerTitle = `Add New ${category}`;
167167
drawerOpen = true;
@@ -176,15 +176,15 @@ Example
176176
if (editingProductId !== null) {
177177
// Update existing product
178178
products = products.map((product) => (product.id === editingProductId ? { ...product, ...data } : product));
179-
console.log('Updated product:', editingProductId);
179+
console.log("Updated product:", editingProductId);
180180
} else {
181181
// Create new product
182182
const newProduct: Product = {
183183
id: generateNewId(),
184184
...data
185185
};
186186
products = [...products, newProduct];
187-
console.log('Created new product:', newProduct);
187+
console.log("Created new product:", newProduct);
188188
}
189189
190190
// Reset and close
@@ -194,9 +194,9 @@ Example
194194
}
195195
196196
function deleteProduct(productId: number) {
197-
if (confirm('Are you sure you want to delete this product?')) {
197+
if (confirm("Are you sure you want to delete this product?")) {
198198
products = products.filter((p) => p.id !== productId);
199-
console.log('Deleted product:', productId);
199+
console.log("Deleted product:", productId);
200200
}
201201
}
202202
</script>
@@ -208,12 +208,12 @@ Example
208208
</div>
209209
210210
<!-- Quick templates -->
211-
<div class="mb-6 rounded bg-gray-50 p-4 dark:bg-gray-900">
211+
<div class="mb-6 rounded p-4">
212212
<h3 class="mb-2 font-semibold dark:text-white">Quick Templates:</h3>
213213
<div class="flex gap-2">
214-
<Button color="lime" onclick={() => createFromTemplate('SMARTPHONE', 'APPLE')}>iPhone Template</Button>
215-
<Button color="indigo" onclick={() => createFromTemplate('SMARTPHONE', 'SAMSUNG')}>Samsung Phone</Button>
216-
<Button color="cyan" onclick={() => createFromTemplate('LAPTOP', 'APPLE')}>MacBook Template</Button>
214+
<Button color="lime" onclick={() => createFromTemplate("SMARTPHONE", "APPLE")}>iPhone Template</Button>
215+
<Button color="indigo" onclick={() => createFromTemplate("SMARTPHONE", "SAMSUNG")}>Samsung Phone</Button>
216+
<Button color="cyan" onclick={() => createFromTemplate("LAPTOP", "APPLE")}>MacBook Template</Button>
217217
</div>
218218
</div>
219219
@@ -235,11 +235,11 @@ Example
235235
<TableBodyCell>${product.price}</TableBodyCell>
236236
<TableBodyCell>{product.technology}</TableBodyCell>
237237
<TableBodyCell>{product.category}</TableBodyCell>
238-
<TableBodyCell>{product.discount ? `${product.discount}%` : 'None'}</TableBodyCell>
238+
<TableBodyCell>{product.discount ? `${product.discount}%` : "None"}</TableBodyCell>
239239
<TableBodyCell class="space-x-2">
240-
<button onclick={() => editProduct(product)} class="text-sm text-blue-600 hover:text-blue-800"> Edit </button>
241-
<button onclick={() => duplicateProduct(product)} class="text-sm text-green-600 hover:text-green-800"> Duplicate </button>
242-
<button onclick={() => deleteProduct(product.id)} class="text-sm text-red-600 hover:text-red-800"> Delete </button>
240+
<button onclick={() => editProduct(product)} class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-200 bg-gray-100 dark:bg-gray-600">Edit</button>
241+
<button onclick={() => duplicateProduct(product)} class="text-sm text-green-600 hover:text-green-800 dark:text-green-600 bg-gray-100 dark:bg-gray-600 ">Duplicate</button>
242+
<button onclick={() => deleteProduct(product.id)} class="text-sm text-red-600 hover:text-red-800 dark:text-red-600 bg-gray-100 dark:bg-gray-600">Delete</button>
243243
</TableBodyCell>
244244
</TableBodyRow>
245245
{/each}

‎src/routes/admin-dashboard/(sidebar)/components/productdrawer/examples/Example1.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -225,9 +225,9 @@
225225
<TableBodyCell>{product.category}</TableBodyCell>
226226
<TableBodyCell>{product.discount ? `${product.discount}%` : "None"}</TableBodyCell>
227227
<TableBodyCell class="space-x-2">
228-
<button onclick={() => editProduct(product)} class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">Edit</button>
229-
<button onclick={() => duplicateProduct(product)} class="text-sm text-green-600 hover:text-green-800 dark:text-green-400">Duplicate</button>
230-
<button onclick={() => deleteProduct(product.id)} class="text-sm text-red-600 hover:text-red-800 dark:text-red-400">Delete</button>
228+
<button onclick={() => editProduct(product)} class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-200 bg-gray-100 dark:bg-gray-600">Edit</button>
229+
<button onclick={() => duplicateProduct(product)} class="text-sm text-green-600 hover:text-green-800 dark:text-green-600 bg-gray-100 dark:bg-gray-600 ">Duplicate</button>
230+
<button onclick={() => deleteProduct(product.id)} class="text-sm text-red-600 hover:text-red-800 dark:text-red-600 bg-gray-100 dark:bg-gray-600">Delete</button>
231231
</TableBodyCell>
232232
</TableBodyRow>
233233
{/each}

0 commit comments

Comments
 (0)