plutonium 0.8.0 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +6 -0
  3. data/app/assets/js/controllers/application.js +1 -0
  4. data/app/assets/js/controllers/index.js +9 -0
  5. data/app/assets/js/controllers/resource_dismiss_controller.js +37 -0
  6. data/app/assets/js/controllers/resource_drop_down_controller.js +29 -0
  7. data/app/assets/js/turbo/index.js +1 -1
  8. data/app/views/application/_flash.html.erb +1 -1
  9. data/app/views/application/_flash_alerts.html.erb +51 -7
  10. data/app/views/application/_flash_toasts.html.erb +53 -23
  11. data/app/views/application/_resource_header.html.erb +563 -561
  12. data/app/views/components/form/form_builder.rb +2 -2
  13. data/app/views/components/form/form_component.html.erb +5 -6
  14. data/app/views/components/interactive_action_form/interactive_action_form_component.html.erb +1 -1
  15. data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_component.html.erb +66 -0
  16. data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_component.rb +23 -0
  17. data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_controller.js +64 -0
  18. data/app/views/components/sidebar/sidebar_component.html.erb +61 -63
  19. data/app/views/components/table_search_input/table_search_input_component.html.erb +1 -1
  20. data/app/views/layouts/resource.html copy.erb +0 -2
  21. data/app/views/layouts/resource.html.erb +1 -3
  22. data/app/views/layouts/rodauth.html.erb +0 -1
  23. data/app/views/resource/_interactive_resource_action_form.html.erb +1 -1
  24. data/exe/pug +6 -0
  25. data/lib/generators/pu/gen/component/component_generator.rb +1 -1
  26. data/lib/generators/pu/gen/pug/pug_generator.rb +1 -1
  27. data/lib/generators/pu/lib/plutonium_generators/cli.rb +42 -0
  28. data/lib/generators/pu/lib/plutonium_generators/generator.rb +1 -5
  29. data/lib/generators/pu/lib/plutonium_generators/model_generator.rb +1 -1
  30. data/lib/generators/pu/lib/plutonium_generators.rb +8 -0
  31. data/lib/plutonium/core/actions/collection.rb +1 -1
  32. data/lib/plutonium/core/controllers/authorizable.rb +4 -4
  33. data/lib/plutonium/core/fields/inputs/base.rb +1 -1
  34. data/lib/plutonium/core/fields/inputs/nested_input.rb +57 -0
  35. data/lib/plutonium/core/fields/inputs/noop_input.rb +1 -1
  36. data/lib/plutonium/core/fields/inputs/phone_input.rb +1 -1
  37. data/lib/plutonium/core/fields/inputs/polymorphic_belongs_to_association_input.rb +1 -1
  38. data/lib/plutonium/core/fields/inputs/simple_form_association_input.rb +1 -1
  39. data/lib/plutonium/core/fields/inputs/simple_form_input.rb +1 -1
  40. data/lib/plutonium/core/fields/renderers/factory.rb +1 -0
  41. data/lib/plutonium/core/fields/renderers/map_renderer.rb +19 -0
  42. data/lib/plutonium/resource/policy.rb +6 -0
  43. data/lib/plutonium/resource/presenter.rb +35 -0
  44. data/lib/plutonium/resource/record.rb +40 -7
  45. data/lib/plutonium/version.rb +1 -1
  46. data/package-lock.json +7 -0
  47. data/package.json +5 -4
  48. data/templates/base.rb +8 -0
  49. metadata +14 -4
  50. data/app/assets/js/controllers/dropdown_controller.js +0 -12
@@ -74,647 +74,649 @@
74
74
  </div>
75
75
  <div class="flex items-center lg:order-2">
76
76
  <!-- Notifications -->
77
- <button
78
- type="button"
79
- data-dropdown-toggle="notification-dropdown"
80
- class="p-2 mr-1 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
81
- >
82
- <span class="sr-only">View notifications</span>
83
- <!-- Bell icon -->
84
- <svg
85
- aria-hidden="true"
86
- class="w-6 h-6"
87
- fill="currentColor"
88
- viewBox="0 0 20 20"
89
- xmlns="http://www.w3.org/2000/svg"
90
- >
91
- <path
92
- d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
93
- ></path>
94
- </svg>
95
- </button>
96
- <!-- Dropdown menu -->
97
- <div
98
- class="hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white rounded divide-y divide-gray-100 shadow-lg dark:divide-gray-600 dark:bg-gray-700 rounded-xl"
99
- id="notification-dropdown"
100
- >
77
+ <div data-controller="resource-drop-down">
78
+ <button
79
+ type="button"
80
+ data-resource-drop-down-target="trigger"
81
+ class="p-2 mr-1 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
82
+ <span class="sr-only">View notifications</span>
83
+ <!-- Bell icon -->
84
+ <svg
85
+ aria-hidden="true"
86
+ class="w-6 h-6"
87
+ fill="currentColor"
88
+ viewBox="0 0 20 20"
89
+ xmlns="http://www.w3.org/2000/svg"
90
+ >
91
+ <path
92
+ d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
93
+ ></path>
94
+ </svg>
95
+ </button>
96
+ <!-- Dropdown menu -->
101
97
  <div
102
- class="block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300"
103
- >
104
- Notifications
105
- </div>
106
- <div>
107
- <a
108
- href="#"
109
- class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
98
+ data-resource-drop-down-target="menu"
99
+ class="hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white divide-y divide-gray-100 shadow-lg dark:divide-gray-600 dark:bg-gray-700 rounded-xl">
100
+ <div
101
+ class="block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300"
110
102
  >
111
- <div class="shrink-0">
112
- <img
113
- class="w-11 h-11 rounded-full"
114
- src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
115
- alt="Bonnie Green avatar"
116
- />
117
- <div
118
- class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 rounded-full border border-white bg-primary-700 dark:border-gray-700"
119
- >
120
- <svg
121
- aria-hidden="true"
122
- class="w-3 h-3 text-white"
123
- fill="currentColor"
124
- viewBox="0 0 20 20"
125
- xmlns="http://www.w3.org/2000/svg"
103
+ Notifications
104
+ </div>
105
+ <div>
106
+ <a
107
+ href="#"
108
+ class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
109
+ >
110
+ <div class="shrink-0">
111
+ <img
112
+ class="w-11 h-11 rounded-full"
113
+ src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
114
+ alt="Bonnie Green avatar"
115
+ />
116
+ <div
117
+ class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 rounded-full border border-white bg-primary-700 dark:border-gray-700"
126
118
  >
127
- <path
128
- d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
129
- ></path>
130
- <path
131
- d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
132
- ></path>
133
- </svg>
119
+ <svg
120
+ aria-hidden="true"
121
+ class="w-3 h-3 text-white"
122
+ fill="currentColor"
123
+ viewBox="0 0 20 20"
124
+ xmlns="http://www.w3.org/2000/svg"
125
+ >
126
+ <path
127
+ d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"
128
+ ></path>
129
+ <path
130
+ d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"
131
+ ></path>
132
+ </svg>
133
+ </div>
134
134
  </div>
135
- </div>
136
- <div class="pl-3 w-full">
137
- <div
138
- class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
139
- >
140
- New message from
141
- <span class="font-semibold text-gray-900 dark:text-white"
142
- >Bonnie Green</span
143
- >: "Hey, what's up? All set for the presentation?"
144
- </div>
145
- <div
146
- class="text-xs font-medium text-primary-600 dark:text-primary-500"
147
- >
148
- a few moments ago
135
+ <div class="pl-3 w-full">
136
+ <div
137
+ class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
138
+ >
139
+ New message from
140
+ <span class="font-semibold text-gray-900 dark:text-white"
141
+ >Bonnie Green</span
142
+ >: "Hey, what's up? All set for the presentation?"
143
+ </div>
144
+ <div
145
+ class="text-xs font-medium text-primary-600 dark:text-primary-500"
146
+ >
147
+ a few moments ago
148
+ </div>
149
149
  </div>
150
- </div>
151
- </a>
152
- <a
153
- href="#"
154
- class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
155
- >
156
- <div class="shrink-0">
157
- <img
158
- class="w-11 h-11 rounded-full"
159
- src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
160
- alt="Jese Leos avatar"
161
- />
162
- <div
163
- class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-gray-900 rounded-full border border-white dark:border-gray-700"
164
- >
165
- <svg
166
- aria-hidden="true"
167
- class="w-3 h-3 text-white"
168
- fill="currentColor"
169
- viewBox="0 0 20 20"
170
- xmlns="http://www.w3.org/2000/svg"
150
+ </a>
151
+ <a
152
+ href="#"
153
+ class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
154
+ >
155
+ <div class="shrink-0">
156
+ <img
157
+ class="w-11 h-11 rounded-full"
158
+ src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
159
+ alt="Jese Leos avatar"
160
+ />
161
+ <div
162
+ class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-gray-900 rounded-full border border-white dark:border-gray-700"
171
163
  >
172
- <path
173
- d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
174
- ></path>
175
- </svg>
164
+ <svg
165
+ aria-hidden="true"
166
+ class="w-3 h-3 text-white"
167
+ fill="currentColor"
168
+ viewBox="0 0 20 20"
169
+ xmlns="http://www.w3.org/2000/svg"
170
+ >
171
+ <path
172
+ d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
173
+ ></path>
174
+ </svg>
175
+ </div>
176
176
  </div>
177
- </div>
178
- <div class="pl-3 w-full">
179
- <div
180
- class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
181
- >
182
- <span class="font-semibold text-gray-900 dark:text-white"
183
- >Jese leos</span
177
+ <div class="pl-3 w-full">
178
+ <div
179
+ class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
184
180
  >
185
- and
186
- <span class="font-medium text-gray-900 dark:text-white"
187
- >5 others</span
181
+ <span class="font-semibold text-gray-900 dark:text-white"
182
+ >Jese leos</span
183
+ >
184
+ and
185
+ <span class="font-medium text-gray-900 dark:text-white"
186
+ >5 others</span
187
+ >
188
+ started following you.
189
+ </div>
190
+ <div
191
+ class="text-xs font-medium text-primary-600 dark:text-primary-500"
188
192
  >
189
- started following you.
190
- </div>
191
- <div
192
- class="text-xs font-medium text-primary-600 dark:text-primary-500"
193
- >
194
- 10 minutes ago
193
+ 10 minutes ago
194
+ </div>
195
195
  </div>
196
- </div>
197
- </a>
198
- <a
199
- href="#"
200
- class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
201
- >
202
- <div class="shrink-0">
203
- <img
204
- class="w-11 h-11 rounded-full"
205
- src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png"
206
- alt="Joseph McFall avatar"
207
- />
208
- <div
209
- class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-red-600 rounded-full border border-white dark:border-gray-700"
210
- >
211
- <svg
212
- aria-hidden="true"
213
- class="w-3 h-3 text-white"
214
- fill="currentColor"
215
- viewBox="0 0 20 20"
216
- xmlns="http://www.w3.org/2000/svg"
196
+ </a>
197
+ <a
198
+ href="#"
199
+ class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
200
+ >
201
+ <div class="shrink-0">
202
+ <img
203
+ class="w-11 h-11 rounded-full"
204
+ src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png"
205
+ alt="Joseph McFall avatar"
206
+ />
207
+ <div
208
+ class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-red-600 rounded-full border border-white dark:border-gray-700"
217
209
  >
218
- <path
219
- fill-rule="evenodd"
220
- d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
221
- clip-rule="evenodd"
222
- ></path>
223
- </svg>
210
+ <svg
211
+ aria-hidden="true"
212
+ class="w-3 h-3 text-white"
213
+ fill="currentColor"
214
+ viewBox="0 0 20 20"
215
+ xmlns="http://www.w3.org/2000/svg"
216
+ >
217
+ <path
218
+ fill-rule="evenodd"
219
+ d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
220
+ clip-rule="evenodd"
221
+ ></path>
222
+ </svg>
223
+ </div>
224
224
  </div>
225
- </div>
226
- <div class="pl-3 w-full">
227
- <div
228
- class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
229
- >
230
- <span class="font-semibold text-gray-900 dark:text-white"
231
- >Joseph Mcfall</span
225
+ <div class="pl-3 w-full">
226
+ <div
227
+ class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
232
228
  >
233
- and
234
- <span class="font-medium text-gray-900 dark:text-white"
235
- >141 others</span
229
+ <span class="font-semibold text-gray-900 dark:text-white"
230
+ >Joseph Mcfall</span
231
+ >
232
+ and
233
+ <span class="font-medium text-gray-900 dark:text-white"
234
+ >141 others</span
235
+ >
236
+ love your story. See it and view more stories.
237
+ </div>
238
+ <div
239
+ class="text-xs font-medium text-primary-600 dark:text-primary-500"
236
240
  >
237
- love your story. See it and view more stories.
238
- </div>
239
- <div
240
- class="text-xs font-medium text-primary-600 dark:text-primary-500"
241
- >
242
- 44 minutes ago
241
+ 44 minutes ago
242
+ </div>
243
243
  </div>
244
- </div>
245
- </a>
246
- <a
247
- href="#"
248
- class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
249
- >
250
- <div class="shrink-0">
251
- <img
252
- class="w-11 h-11 rounded-full"
253
- src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
254
- alt="Roberta Casas image"
255
- />
256
- <div
257
- class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-green-400 rounded-full border border-white dark:border-gray-700"
258
- >
259
- <svg
260
- aria-hidden="true"
261
- class="w-3 h-3 text-white"
262
- fill="currentColor"
263
- viewBox="0 0 20 20"
264
- xmlns="http://www.w3.org/2000/svg"
244
+ </a>
245
+ <a
246
+ href="#"
247
+ class="flex py-3 px-4 border-b hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600"
248
+ >
249
+ <div class="shrink-0">
250
+ <img
251
+ class="w-11 h-11 rounded-full"
252
+ src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
253
+ alt="Roberta Casas image"
254
+ />
255
+ <div
256
+ class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-green-400 rounded-full border border-white dark:border-gray-700"
265
257
  >
266
- <path
267
- fill-rule="evenodd"
268
- d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
269
- clip-rule="evenodd"
270
- ></path>
271
- </svg>
258
+ <svg
259
+ aria-hidden="true"
260
+ class="w-3 h-3 text-white"
261
+ fill="currentColor"
262
+ viewBox="0 0 20 20"
263
+ xmlns="http://www.w3.org/2000/svg"
264
+ >
265
+ <path
266
+ fill-rule="evenodd"
267
+ d="M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z"
268
+ clip-rule="evenodd"
269
+ ></path>
270
+ </svg>
271
+ </div>
272
272
  </div>
273
- </div>
274
- <div class="pl-3 w-full">
275
- <div
276
- class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
277
- >
278
- <span class="font-semibold text-gray-900 dark:text-white"
279
- >Leslie Livingston</span
273
+ <div class="pl-3 w-full">
274
+ <div
275
+ class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
280
276
  >
281
- mentioned you in a comment:
282
- <span
283
- class="font-medium text-primary-600 dark:text-primary-500"
284
- >@bonnie.green</span
277
+ <span class="font-semibold text-gray-900 dark:text-white"
278
+ >Leslie Livingston</span
279
+ >
280
+ mentioned you in a comment:
281
+ <span
282
+ class="font-medium text-primary-600 dark:text-primary-500"
283
+ >@bonnie.green</span
284
+ >
285
+ what do you say?
286
+ </div>
287
+ <div
288
+ class="text-xs font-medium text-primary-600 dark:text-primary-500"
285
289
  >
286
- what do you say?
287
- </div>
288
- <div
289
- class="text-xs font-medium text-primary-600 dark:text-primary-500"
290
- >
291
- 1 hour ago
290
+ 1 hour ago
291
+ </div>
292
292
  </div>
293
- </div>
294
- </a>
295
- <a
296
- href="#"
297
- class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-600"
298
- >
299
- <div class="shrink-0">
300
- <img
301
- class="w-11 h-11 rounded-full"
302
- src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/robert-brown.png"
303
- alt="Robert image"
304
- />
305
- <div
306
- class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-purple-500 rounded-full border border-white dark:border-gray-700"
307
- >
308
- <svg
309
- aria-hidden="true"
310
- class="w-3 h-3 text-white"
311
- fill="currentColor"
312
- viewBox="0 0 20 20"
313
- xmlns="http://www.w3.org/2000/svg"
293
+ </a>
294
+ <a
295
+ href="#"
296
+ class="flex py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-600"
297
+ >
298
+ <div class="shrink-0">
299
+ <img
300
+ class="w-11 h-11 rounded-full"
301
+ src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/robert-brown.png"
302
+ alt="Robert image"
303
+ />
304
+ <div
305
+ class="flex absolute justify-center items-center ml-6 -mt-5 w-5 h-5 bg-purple-500 rounded-full border border-white dark:border-gray-700"
314
306
  >
315
- <path
316
- d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
317
- ></path>
318
- </svg>
307
+ <svg
308
+ aria-hidden="true"
309
+ class="w-3 h-3 text-white"
310
+ fill="currentColor"
311
+ viewBox="0 0 20 20"
312
+ xmlns="http://www.w3.org/2000/svg"
313
+ >
314
+ <path
315
+ d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"
316
+ ></path>
317
+ </svg>
318
+ </div>
319
319
  </div>
320
- </div>
321
- <div class="pl-3 w-full">
322
- <div
323
- class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
324
- >
325
- <span class="font-semibold text-gray-900 dark:text-white"
326
- >Robert Brown</span
320
+ <div class="pl-3 w-full">
321
+ <div
322
+ class="text-gray-500 font-normal text-sm mb-1.5 dark:text-gray-200"
327
323
  >
328
- posted a new video: Glassmorphism - learn how to implement
329
- the new design trend.
330
- </div>
331
- <div
332
- class="text-xs font-medium text-primary-600 dark:text-primary-500"
333
- >
334
- 3 hours ago
324
+ <span class="font-semibold text-gray-900 dark:text-white"
325
+ >Robert Brown</span
326
+ >
327
+ posted a new video: Glassmorphism - learn how to implement
328
+ the new design trend.
329
+ </div>
330
+ <div
331
+ class="text-xs font-medium text-primary-600 dark:text-primary-500"
332
+ >
333
+ 3 hours ago
334
+ </div>
335
335
  </div>
336
- </div>
337
- </a>
338
- </div>
339
- <a
340
- href="#"
341
- class="block py-2 text-md font-medium text-center text-gray-900 bg-gray-50 hover:bg-gray-100 dark:bg-gray-600 dark:text-white dark:hover:underline"
342
- >
343
- <div class="inline-flex items-center">
344
- <svg
345
- aria-hidden="true"
346
- class="mr-2 w-4 h-4 text-gray-500 dark:text-gray-200"
347
- fill="currentColor"
348
- viewBox="0 0 20 20"
349
- xmlns="http://www.w3.org/2000/svg"
350
- >
351
- <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
352
- <path
353
- fill-rule="evenodd"
354
- d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
355
- clip-rule="evenodd"
356
- ></path>
357
- </svg>
358
- View all
336
+ </a>
359
337
  </div>
360
- </a>
361
- </div>
362
- <!-- Apps -->
363
- <button
364
- type="button"
365
- data-dropdown-toggle="apps-dropdown"
366
- class="p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
367
- >
368
- <span class="sr-only">View notifications</span>
369
- <!-- Icon -->
370
- <svg
371
- class="w-6 h-6"
372
- fill="currentColor"
373
- viewBox="0 0 20 20"
374
- xmlns="http://www.w3.org/2000/svg"
375
- >
376
- <path
377
- d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
378
- ></path>
379
- </svg>
380
- </button>
381
- <!-- Dropdown menu -->
382
- <div
383
- class="hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white rounded divide-y divide-gray-100 shadow-lg dark:bg-gray-700 dark:divide-gray-600 rounded-xl"
384
- id="apps-dropdown"
385
- >
386
- <div
387
- class="block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300"
388
- >
389
- Apps
390
- </div>
391
- <div class="grid grid-cols-3 gap-4 p-4">
392
- <a
393
- href="#"
394
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
395
- >
396
- <svg
397
- aria-hidden="true"
398
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
399
- fill="currentColor"
400
- viewBox="0 0 20 20"
401
- xmlns="http://www.w3.org/2000/svg"
402
- >
403
- <path
404
- fill-rule="evenodd"
405
- d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
406
- clip-rule="evenodd"
407
- ></path>
408
- </svg>
409
- <div class="text-sm text-gray-900 dark:text-white">Sales</div>
410
- </a>
411
- <a
412
- href="#"
413
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
414
- >
415
- <svg
416
- aria-hidden="true"
417
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
418
- fill="currentColor"
419
- viewBox="0 0 20 20"
420
- xmlns="http://www.w3.org/2000/svg"
421
- >
422
- <path
423
- d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
424
- ></path>
425
- </svg>
426
- <div class="text-sm text-gray-900 dark:text-white">Users</div>
427
- </a>
428
- <a
429
- href="#"
430
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
431
- >
432
- <svg
433
- aria-hidden="true"
434
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
435
- fill="currentColor"
436
- viewBox="0 0 20 20"
437
- xmlns="http://www.w3.org/2000/svg"
438
- >
439
- <path
440
- fill-rule="evenodd"
441
- d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z"
442
- clip-rule="evenodd"
443
- ></path>
444
- </svg>
445
- <div class="text-sm text-gray-900 dark:text-white">Inbox</div>
446
- </a>
447
- <a
448
- href="#"
449
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
450
- >
451
- <svg
452
- aria-hidden="true"
453
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
454
- fill="currentColor"
455
- viewBox="0 0 20 20"
456
- xmlns="http://www.w3.org/2000/svg"
457
- >
458
- <path
459
- fill-rule="evenodd"
460
- d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
461
- clip-rule="evenodd"
462
- ></path>
463
- </svg>
464
- <div class="text-sm text-gray-900 dark:text-white">
465
- Profile
466
- </div>
467
- </a>
468
- <a
469
- href="#"
470
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
471
- >
472
- <svg
473
- aria-hidden="true"
474
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
475
- fill="currentColor"
476
- viewBox="0 0 20 20"
477
- xmlns="http://www.w3.org/2000/svg"
478
- >
479
- <path
480
- fill-rule="evenodd"
481
- d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
482
- clip-rule="evenodd"
483
- ></path>
484
- </svg>
485
- <div class="text-sm text-gray-900 dark:text-white">
486
- Settings
487
- </div>
488
- </a>
489
- <a
490
- href="#"
491
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
492
- >
493
- <svg
494
- aria-hidden="true"
495
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
496
- fill="currentColor"
497
- viewBox="0 0 20 20"
498
- xmlns="http://www.w3.org/2000/svg"
499
- >
500
- <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
501
- <path
502
- fill-rule="evenodd"
503
- d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
504
- clip-rule="evenodd"
505
- ></path>
506
- </svg>
507
- <div class="text-sm text-gray-900 dark:text-white">
508
- Products
509
- </div>
510
- </a>
511
- <a
512
- href="#"
513
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
514
- >
515
- <svg
516
- aria-hidden="true"
517
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
518
- fill="currentColor"
519
- viewBox="0 0 20 20"
520
- xmlns="http://www.w3.org/2000/svg"
521
- >
522
- <path
523
- d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"
524
- ></path>
525
- <path
526
- fill-rule="evenodd"
527
- d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
528
- clip-rule="evenodd"
529
- ></path>
530
- </svg>
531
- <div class="text-sm text-gray-900 dark:text-white">
532
- Pricing
533
- </div>
534
- </a>
535
338
  <a
536
339
  href="#"
537
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
340
+ class="block py-2 text-md font-medium text-center text-gray-900 bg-gray-50 hover:bg-gray-100 dark:bg-gray-600 dark:text-white dark:hover:underline"
538
341
  >
539
- <svg
540
- aria-hidden="true"
541
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
542
- fill="currentColor"
543
- viewBox="0 0 20 20"
544
- xmlns="http://www.w3.org/2000/svg"
545
- >
546
- <path
547
- fill-rule="evenodd"
548
- d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"
549
- clip-rule="evenodd"
550
- ></path>
551
- </svg>
552
- <div class="text-sm text-gray-900 dark:text-white">
553
- Billing
554
- </div>
555
- </a>
556
- <a
557
- href="#"
558
- class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
559
- >
560
- <svg
561
- aria-hidden="true"
562
- class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
563
- fill="none"
564
- stroke="currentColor"
565
- viewBox="0 0 24 24"
566
- xmlns="http://www.w3.org/2000/svg"
567
- >
568
- <path
569
- stroke-linecap="round"
570
- stroke-linejoin="round"
571
- stroke-width="2"
572
- d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
573
- ></path>
574
- </svg>
575
- <div class="text-sm text-gray-900 dark:text-white">
576
- Logout
342
+ <div class="inline-flex items-center">
343
+ <svg
344
+ aria-hidden="true"
345
+ class="mr-2 w-4 h-4 text-gray-500 dark:text-gray-200"
346
+ fill="currentColor"
347
+ viewBox="0 0 20 20"
348
+ xmlns="http://www.w3.org/2000/svg"
349
+ >
350
+ <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path>
351
+ <path
352
+ fill-rule="evenodd"
353
+ d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
354
+ clip-rule="evenodd"
355
+ ></path>
356
+ </svg>
357
+ View all
577
358
  </div>
578
359
  </a>
579
360
  </div>
580
361
  </div>
581
- <button
582
- type="button"
583
- class="flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
584
- id="user-menu-dropdown-toggle"
585
- aria-expanded="false"
586
- data-dropdown-toggle="user-menu-dropdown"
587
- >
588
- <span class="sr-only">Open user menu</span>
589
- <img
590
- class="w-8 h-8 rounded-full"
591
- src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gough.png"
592
- alt="user photo"
593
- />
594
- </button>
595
- <!-- Dropdown menu -->
596
- <div
597
- class="hidden z-50 my-4 w-56 text-base list-none bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600 rounded-xl"
598
- id="user-menu-dropdown"
599
- >
600
- <div class="py-3 px-4">
601
- <span
602
- class="block text-sm font-semibold text-gray-900 dark:text-white"
603
- >Neil Sims</span
362
+
363
+ <!-- Apps -->
364
+ <div data-controller="resource-drop-down">
365
+ <button
366
+ type="button"
367
+ data-resource-drop-down-target="trigger"
368
+ class="p-2 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600">
369
+ <span class="sr-only">View notifications</span>
370
+ <!-- Icon -->
371
+ <svg
372
+ class="w-6 h-6"
373
+ fill="currentColor"
374
+ viewBox="0 0 20 20"
375
+ xmlns="http://www.w3.org/2000/svg"
604
376
  >
605
- <span
606
- class="block text-sm text-gray-900 truncate dark:text-white"
607
- >name@flowbite.com</span
377
+ <path
378
+ d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
379
+ ></path>
380
+ </svg>
381
+ </button>
382
+ <!-- Dropdown menu -->
383
+ <div
384
+ class="hidden overflow-hidden z-50 my-4 max-w-sm text-base list-none bg-white divide-y divide-gray-100 shadow-lg dark:bg-gray-700 dark:divide-gray-600 rounded-xl"
385
+ data-resource-drop-down-target="menu">
386
+ <div
387
+ class="block py-2 px-4 text-base font-medium text-center text-gray-700 bg-gray-50 dark:bg-gray-600 dark:text-gray-300"
608
388
  >
609
- </div>
610
- <ul
611
- class="py-1 text-gray-700 dark:text-gray-300"
612
- aria-labelledby="user-menu-dropdown-toggle"
613
- >
614
- <li>
389
+ Apps
390
+ </div>
391
+ <div class="grid grid-cols-3 gap-4 p-4">
392
+ <a
393
+ href="#"
394
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
395
+ >
396
+ <svg
397
+ aria-hidden="true"
398
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
399
+ fill="currentColor"
400
+ viewBox="0 0 20 20"
401
+ xmlns="http://www.w3.org/2000/svg"
402
+ >
403
+ <path
404
+ fill-rule="evenodd"
405
+ d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
406
+ clip-rule="evenodd"
407
+ ></path>
408
+ </svg>
409
+ <div class="text-sm text-gray-900 dark:text-white">Sales</div>
410
+ </a>
615
411
  <a
616
412
  href="#"
617
- class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
618
- >My profile</a
413
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
619
414
  >
620
- </li>
621
- <li>
415
+ <svg
416
+ aria-hidden="true"
417
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
418
+ fill="currentColor"
419
+ viewBox="0 0 20 20"
420
+ xmlns="http://www.w3.org/2000/svg"
421
+ >
422
+ <path
423
+ d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
424
+ ></path>
425
+ </svg>
426
+ <div class="text-sm text-gray-900 dark:text-white">Users</div>
427
+ </a>
622
428
  <a
623
429
  href="#"
624
- class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
625
- >Account settings</a
430
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
626
431
  >
627
- </li>
628
- </ul>
629
- <ul
630
- class="py-1 text-gray-700 dark:text-gray-300"
631
- aria-labelledby="dropdown"
632
- >
633
- <li>
432
+ <svg
433
+ aria-hidden="true"
434
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
435
+ fill="currentColor"
436
+ viewBox="0 0 20 20"
437
+ xmlns="http://www.w3.org/2000/svg"
438
+ >
439
+ <path
440
+ fill-rule="evenodd"
441
+ d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v7h-2l-1 2H8l-1-2H5V5z"
442
+ clip-rule="evenodd"
443
+ ></path>
444
+ </svg>
445
+ <div class="text-sm text-gray-900 dark:text-white">Inbox</div>
446
+ </a>
634
447
  <a
635
448
  href="#"
636
- class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
637
- ><svg
638
- class="mr-2 w-5 h-5 text-gray-400"
449
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
450
+ >
451
+ <svg
452
+ aria-hidden="true"
453
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
639
454
  fill="currentColor"
640
455
  viewBox="0 0 20 20"
641
456
  xmlns="http://www.w3.org/2000/svg"
642
457
  >
643
458
  <path
644
459
  fill-rule="evenodd"
645
- d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
460
+ d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
646
461
  clip-rule="evenodd"
647
462
  ></path>
648
463
  </svg>
649
- My likes</a
464
+ <div class="text-sm text-gray-900 dark:text-white">
465
+ Profile
466
+ </div>
467
+ </a>
468
+ <a
469
+ href="#"
470
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
650
471
  >
651
- </li>
652
- <li>
472
+ <svg
473
+ aria-hidden="true"
474
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
475
+ fill="currentColor"
476
+ viewBox="0 0 20 20"
477
+ xmlns="http://www.w3.org/2000/svg"
478
+ >
479
+ <path
480
+ fill-rule="evenodd"
481
+ d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
482
+ clip-rule="evenodd"
483
+ ></path>
484
+ </svg>
485
+ <div class="text-sm text-gray-900 dark:text-white">
486
+ Settings
487
+ </div>
488
+ </a>
653
489
  <a
654
490
  href="#"
655
- class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
656
- ><svg
657
- class="mr-2 w-5 h-5 text-gray-400"
491
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
492
+ >
493
+ <svg
494
+ aria-hidden="true"
495
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
658
496
  fill="currentColor"
659
497
  viewBox="0 0 20 20"
660
498
  xmlns="http://www.w3.org/2000/svg"
661
499
  >
500
+ <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
662
501
  <path
663
- d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
502
+ fill-rule="evenodd"
503
+ d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
504
+ clip-rule="evenodd"
664
505
  ></path>
665
506
  </svg>
666
- Collections</a
507
+ <div class="text-sm text-gray-900 dark:text-white">
508
+ Products
509
+ </div>
510
+ </a>
511
+ <a
512
+ href="#"
513
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
667
514
  >
668
- </li>
669
- <li>
515
+ <svg
516
+ aria-hidden="true"
517
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
518
+ fill="currentColor"
519
+ viewBox="0 0 20 20"
520
+ xmlns="http://www.w3.org/2000/svg"
521
+ >
522
+ <path
523
+ d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"
524
+ ></path>
525
+ <path
526
+ fill-rule="evenodd"
527
+ d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z"
528
+ clip-rule="evenodd"
529
+ ></path>
530
+ </svg>
531
+ <div class="text-sm text-gray-900 dark:text-white">
532
+ Pricing
533
+ </div>
534
+ </a>
670
535
  <a
671
536
  href="#"
672
- class="flex justify-between items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
537
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
673
538
  >
674
- <span class="flex items-center">
675
- <svg
676
- aria-hidden="true"
677
- class="mr-2 w-5 h-5 text-primary-600 dark:text-primary-500"
678
- fill="currentColor"
679
- viewBox="0 0 20 20"
680
- xmlns="http://www.w3.org/2000/svg"
681
- >
682
- <path
683
- fill-rule="evenodd"
684
- d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
685
- clip-rule="evenodd"
686
- ></path>
687
- </svg>
688
- Pro version
689
- </span>
690
539
  <svg
691
540
  aria-hidden="true"
692
- class="w-5 h-5 text-gray-400"
541
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
693
542
  fill="currentColor"
694
543
  viewBox="0 0 20 20"
695
544
  xmlns="http://www.w3.org/2000/svg"
696
545
  >
697
546
  <path
698
547
  fill-rule="evenodd"
699
- d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
548
+ d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm2.5 3a1.5 1.5 0 100 3 1.5 1.5 0 000-3zm6.207.293a1 1 0 00-1.414 0l-6 6a1 1 0 101.414 1.414l6-6a1 1 0 000-1.414zM12.5 10a1.5 1.5 0 100 3 1.5 1.5 0 000-3z"
700
549
  clip-rule="evenodd"
701
550
  ></path>
702
551
  </svg>
552
+ <div class="text-sm text-gray-900 dark:text-white">
553
+ Billing
554
+ </div>
703
555
  </a>
704
- </li>
705
- </ul>
706
- <ul
707
- class="py-1 text-gray-700 dark:text-gray-300"
708
- aria-labelledby="dropdown"
709
- >
710
- <li>
711
556
  <a
712
557
  href="#"
713
- class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
714
- >Sign out</a
558
+ class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600 group"
715
559
  >
716
- </li>
717
- </ul>
560
+ <svg
561
+ aria-hidden="true"
562
+ class="mx-auto mb-1 w-7 h-7 text-gray-400 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
563
+ fill="none"
564
+ stroke="currentColor"
565
+ viewBox="0 0 24 24"
566
+ xmlns="http://www.w3.org/2000/svg"
567
+ >
568
+ <path
569
+ stroke-linecap="round"
570
+ stroke-linejoin="round"
571
+ stroke-width="2"
572
+ d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
573
+ ></path>
574
+ </svg>
575
+ <div class="text-sm text-gray-900 dark:text-white">
576
+ Logout
577
+ </div>
578
+ </a>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <!-- User -->
584
+ <div data-controller="resource-drop-down">
585
+ <button
586
+ type="button"
587
+ class="flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
588
+ aria-expanded="false"
589
+ data-resource-drop-down-target="trigger">
590
+ <span class="sr-only">Open user menu</span>
591
+ <img
592
+ class="w-8 h-8 rounded-full"
593
+ src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gough.png"
594
+ alt="user photo"
595
+ />
596
+ </button>
597
+ <!-- Dropdown menu -->
598
+ <div
599
+ class="hidden z-50 my-4 w-56 text-base list-none bg-white divide-y divide-gray-100 shadow dark:bg-gray-700 dark:divide-gray-600 rounded-xl"
600
+ data-resource-drop-down-target="menu">
601
+ <div class="py-3 px-4">
602
+ <span
603
+ class="block text-sm font-semibold text-gray-900 dark:text-white"
604
+ >Neil Sims</span
605
+ >
606
+ <span
607
+ class="block text-sm text-gray-900 truncate dark:text-white"
608
+ >name@flowbite.com</span
609
+ >
610
+ </div>
611
+ <ul
612
+ class="py-1 text-gray-700 dark:text-gray-300"
613
+ aria-labelledby="user-menu-dropdown-toggle"
614
+ >
615
+ <li>
616
+ <a
617
+ href="#"
618
+ class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
619
+ >My profile</a
620
+ >
621
+ </li>
622
+ <li>
623
+ <a
624
+ href="#"
625
+ class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
626
+ >Account settings</a
627
+ >
628
+ </li>
629
+ </ul>
630
+ <ul
631
+ class="py-1 text-gray-700 dark:text-gray-300"
632
+ aria-labelledby="dropdown"
633
+ >
634
+ <li>
635
+ <a
636
+ href="#"
637
+ class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
638
+ ><svg
639
+ class="mr-2 w-5 h-5 text-gray-400"
640
+ fill="currentColor"
641
+ viewBox="0 0 20 20"
642
+ xmlns="http://www.w3.org/2000/svg"
643
+ >
644
+ <path
645
+ fill-rule="evenodd"
646
+ d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
647
+ clip-rule="evenodd"
648
+ ></path>
649
+ </svg>
650
+ My likes</a
651
+ >
652
+ </li>
653
+ <li>
654
+ <a
655
+ href="#"
656
+ class="flex items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
657
+ ><svg
658
+ class="mr-2 w-5 h-5 text-gray-400"
659
+ fill="currentColor"
660
+ viewBox="0 0 20 20"
661
+ xmlns="http://www.w3.org/2000/svg"
662
+ >
663
+ <path
664
+ d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"
665
+ ></path>
666
+ </svg>
667
+ Collections</a
668
+ >
669
+ </li>
670
+ <li>
671
+ <a
672
+ href="#"
673
+ class="flex justify-between items-center py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
674
+ >
675
+ <span class="flex items-center">
676
+ <svg
677
+ aria-hidden="true"
678
+ class="mr-2 w-5 h-5 text-primary-600 dark:text-primary-500"
679
+ fill="currentColor"
680
+ viewBox="0 0 20 20"
681
+ xmlns="http://www.w3.org/2000/svg"
682
+ >
683
+ <path
684
+ fill-rule="evenodd"
685
+ d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z"
686
+ clip-rule="evenodd"
687
+ ></path>
688
+ </svg>
689
+ Pro version
690
+ </span>
691
+ <svg
692
+ aria-hidden="true"
693
+ class="w-5 h-5 text-gray-400"
694
+ fill="currentColor"
695
+ viewBox="0 0 20 20"
696
+ xmlns="http://www.w3.org/2000/svg"
697
+ >
698
+ <path
699
+ fill-rule="evenodd"
700
+ d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
701
+ clip-rule="evenodd"
702
+ ></path>
703
+ </svg>
704
+ </a>
705
+ </li>
706
+ </ul>
707
+ <ul
708
+ class="py-1 text-gray-700 dark:text-gray-300"
709
+ aria-labelledby="dropdown"
710
+ >
711
+ <li>
712
+ <a
713
+ href="#"
714
+ class="block py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
715
+ >Sign out</a
716
+ >
717
+ </li>
718
+ </ul>
719
+ </div>
718
720
  </div>
719
721
  </div>
720
722
  </div>