Create basic UI components

shahryarjb commented 1 year ago

To make a dynamic template and later a drag and drop editor, we need to implement a series of basic components. It should be server side rendered and be ordered by Sortable JS.

[x] #18
[x] #73
[x] #19
[x] #20
[x] #24
[x] #51
[x] #33
[x] #80
[x] #25
[x] #22
[x] #23
[x] #26
[x] #81
[x] #82
[x] #83
[x] #84
[x] #85
[ ] #87
[x] #86
[ ] #27
[ ] #28
[ ] #29
[ ] #30
[ ] #31
[ ] #34
[ ] #35
[ ] #36
[ ] #42
[ ] #45
[ ] #46
[ ] #47
[ ] #49
[ ] #50
[ ] #52
[ ] #53
[ ] #21
[ ] #57
[ ] #75

If you want to create a JS{} and copy this for HTML side, use this in your LiveView handle_call:

JS.push("delete", value: %{id: id, type: "dom"})
    |> hide_modal("delete_confirm")
    |> Map.get(:ops)
    |> Jason.encode!()

@MonaAghili

shahryarjb commented 1 year ago

https://user-images.githubusercontent.com/8413604/230317413-e15b0fb0-5d93-4278-b23a-83db4fe800b6.mp4

shahryarjb commented 1 year ago

<h3 class="mb-5 text-lg font-bold text-gray-900">Choose an arrangement:</h3>
        <ul class="grid w-full gap-6 grid-cols-3">
          <li>
            <input type="checkbox" id="react-option" value="" class="hidden peer" required="" />
            <label
              for="react-option"
              class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50"
            >
              <div class="block text-center w-full">
                <Heroicons.adjustments_vertical class="mb-2 w-7 h-7 mx-auto" />
                <div class="w-full text-lg font-semibold text-center">Vertical</div>
              </div>
            </label>
          </li>
          <li>
            <input type="checkbox" id="flowbite-option" value="" class="hidden peer" />
            <label
              for="flowbite-option"
              class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border-2 border-gray-200 rounded-lg cursor-pointer peer-checked:border-blue-600 hover:text-gray-600 dark:peer-checked:text-gray-300 peer-checked:text-gray-600 hover:bg-gray-50"
            >
              <div class="block text-center w-full">
                <Heroicons.adjustments_horizontal class="mb-2 w-7 h-7 mx-auto" />
                <div class="w-full text-lg font-semibold">Horizontal</div>
              </div>
            </label>
          </li>
        </ul>

mishka-group / mishka_template_creator

Create basic UI components #4