-
Notifications
You must be signed in to change notification settings - Fork 0
/
mdi.html.heex
38 lines (37 loc) · 1.38 KB
/
mdi.html.heex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<.dm_breadcrumb class="bg-white h-6 text-slate-400">
<:crumb>Icon</:crumb>
<:crumb>Material Design Icon</:crumb>
</.dm_breadcrumb>
<.dm_card class={[
"w-[100%_!important] h-[calc(100vh-56px-2em)_!important] overflow-auto",
"text-slate-900 bg-slate-50 dark:text-slate-50 dark:bg-slate-900",
]}>
<:title class="flex flex-row justify-center items-center">
<span class="text-4xl text-blue-600 hover:text-blue-400">
Material Design Icons
</span>
</:title>
<.dm_markdown content={"""
## Example
```html
<!-- icon_name is matrial icon name -->
<.dm_mdi name={icon_name} class="w-12 h-12" />
```
"""} />
<div class="flex flex-row mt-4 mb-2">
<.form for={@conn} action={~p"/mdi"} method="get" class={["flex flex-row gap-2"]}>
<.input label="Icon Name" name="filter" value={@filter} />
<.button type="submit">Search</.button>
</.form>
</div>
<div class="flex flex-row flex-wrap gap-4">
<%= for icon_name <- @mdi_icons do %>
<div class="border flex flex-col w-40 h-40 items-center justify-center">
<div class="text-blue-400"><embed><%= icon_name %></embed></div>
<div class="flex items-center justify-center">
<.dm_mdi name={icon_name} class="w-24 h-24" />
</div>
</div>
<% end %>
</div>
</.dm_card>