plutonium 0.8.0 → 0.9.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (77) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +7 -0
  3. data/Rakefile +10 -0
  4. data/app/assets/build/plutonium.js +5122 -0
  5. data/app/assets/javascripts/controllers/index.js +34 -0
  6. data/app/assets/javascripts/controllers/resource_dismiss_controller.js +37 -0
  7. data/app/assets/javascripts/controllers/resource_drop_down_controller.js +29 -0
  8. data/app/assets/javascripts/plutonium-app.js +7 -0
  9. data/app/assets/javascripts/plutonium.js +1 -0
  10. data/app/assets/{js → javascripts}/turbo/index.js +1 -1
  11. data/app/views/application/_flash.html.erb +1 -1
  12. data/app/views/application/_flash_alerts.html.erb +51 -7
  13. data/app/views/application/_flash_toasts.html.erb +53 -23
  14. data/app/views/application/_resource_header.html.erb +563 -561
  15. data/app/views/components/form/form_builder.rb +2 -2
  16. data/app/views/components/form/form_component.html.erb +5 -6
  17. data/app/views/components/interactive_action_form/interactive_action_form_component.html.erb +1 -1
  18. data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_component.html.erb +66 -0
  19. data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_component.rb +23 -0
  20. data/app/views/components/nested_resource_form_fields/nested_resource_form_fields_controller.js +64 -0
  21. data/app/views/components/sidebar/sidebar_component.html.erb +61 -63
  22. data/app/views/components/table_search_input/table_search_input_component.html.erb +1 -1
  23. data/app/views/layouts/resource.html copy.erb +0 -2
  24. data/app/views/layouts/resource.html.erb +1 -3
  25. data/app/views/layouts/rodauth.html.erb +0 -1
  26. data/app/views/resource/_interactive_resource_action_form.html.erb +1 -1
  27. data/css.manifest +3 -0
  28. data/esbuild.config.js +44 -0
  29. data/exe/pug +6 -0
  30. data/lib/generators/pu/gen/component/component_generator.rb +14 -5
  31. data/lib/generators/pu/gen/pug/pug_generator.rb +1 -1
  32. data/lib/generators/pu/lib/plutonium_generators/cli.rb +42 -0
  33. data/lib/generators/pu/lib/plutonium_generators/concerns/actions.rb +86 -72
  34. data/lib/generators/pu/lib/plutonium_generators/generator.rb +1 -5
  35. data/lib/generators/pu/lib/plutonium_generators.rb +8 -0
  36. data/lib/generators/pu/rodauth/install_generator.rb +1 -2
  37. data/lib/plutonium/core/actions/collection.rb +1 -1
  38. data/lib/plutonium/core/controllers/authorizable.rb +4 -4
  39. data/lib/plutonium/core/fields/inputs/base.rb +1 -1
  40. data/lib/plutonium/core/fields/inputs/nested_input.rb +57 -0
  41. data/lib/plutonium/core/fields/inputs/noop_input.rb +1 -1
  42. data/lib/plutonium/core/fields/inputs/phone_input.rb +1 -1
  43. data/lib/plutonium/core/fields/inputs/polymorphic_belongs_to_association_input.rb +1 -1
  44. data/lib/plutonium/core/fields/inputs/simple_form_association_input.rb +1 -1
  45. data/lib/plutonium/core/fields/inputs/simple_form_input.rb +1 -1
  46. data/lib/plutonium/pkg/base.rb +0 -4
  47. data/lib/plutonium/railtie.rb +10 -2
  48. data/lib/plutonium/resource/policy.rb +6 -0
  49. data/lib/plutonium/resource/presenter.rb +35 -0
  50. data/lib/plutonium/resource/record.rb +40 -7
  51. data/lib/plutonium/version.rb +1 -1
  52. data/lib/plutonium.rb +17 -14
  53. data/package.json +4 -3
  54. data/postcss.config.js +1 -1
  55. data/public/plutonium-assets/plutonium-app-36KN5FVJ.js +6 -0
  56. data/public/plutonium-assets/plutonium-app-36KN5FVJ.js.map +7 -0
  57. data/public/plutonium-assets/plutonium.50232e35b5495f5ad90d.css +3415 -0
  58. data/tailwind.config.js +11 -12
  59. data/templates/base.rb +8 -0
  60. metadata +28 -21
  61. data/app/assets/js/controllers/application.js +0 -6
  62. data/app/assets/js/controllers/dropdown_controller.js +0 -12
  63. data/app/assets/js/controllers/index.js +0 -21
  64. data/app/assets/js/plutonium.js +0 -2
  65. data/build.js +0 -12
  66. data/lib/generators/pu/gem/pagy/pagy_generator.rb +0 -25
  67. data/lib/generators/pu/gem/pagy/templates/config/initializers/pagy.rb +0 -4
  68. data/lib/generators/pu/gem/rabl/rabl_generator.rb +0 -25
  69. data/lib/generators/pu/gem/rabl/templates/.keep +0 -0
  70. data/lib/generators/pu/gem/rabl/templates/config/initializers/rabl.rb +0 -60
  71. data/lib/generators/pu/gem/simple_form/simple_form_generator.rb +0 -25
  72. data/lib/generators/pu/gem/simple_form/templates/.keep +0 -0
  73. /data/{lib/generators/pu/gem/pagy/templates → app/assets/build}/.keep +0 -0
  74. /data/app/assets/{js → javascripts}/turbo/turbo_actions.js +0 -0
  75. /data/app/assets/{js → javascripts}/turbo/turbo_debug.js +0 -0
  76. /data/app/assets/{js → javascripts}/turbo/turbo_frame_monkey_patch.js +0 -0
  77. /data/app/assets/{css → stylesheets}/plutonium.css +0 -0
data/app/views/application/_resource_header.html.erb CHANGED
@@ -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>