55 lines
2.5 KiB
Elixir
55 lines
2.5 KiB
Elixir
defmodule OutlookWeb.DarkModeComponent do
|
|
@moduledoc """
|
|
Provides components for showing and listing artikel and autoren.
|
|
"""
|
|
use Phoenix.Component
|
|
import Phoenix.HTML
|
|
|
|
# alias Phoenix.LiveView.JS
|
|
|
|
def dark_mode_widget(assigns) do
|
|
~H"""
|
|
<div id="dark-mode-widget" class="relative flex w-full justify-between p-0" phx-hook="dark_mode_widget">
|
|
<div class="flex"></div>
|
|
<div class="flex">
|
|
<button class="p-2" type="button">
|
|
<span class="dark:hidden">
|
|
<Heroicons.sun class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
|
|
</span>
|
|
<span class="hidden dark:inline">
|
|
<Heroicons.moon class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
|
|
</span>
|
|
</button>
|
|
<ul class="hidden absolute z-50 top right-2 bg-white rounded-lg ring-1 ring-slate-900/10 shadow-lg overflow-hidden w-36 py-1 text-sm text-slate-700 font-semibold dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300 mt-8" aria-labelledby="headlessui-listbox-label-3" aria-orientation="vertical" id="headlessui-listbox-options-5" role="listbox" tabindex="0" data-headlessui-state="open">
|
|
<li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-1" role="option" tabindex="-1">
|
|
<Heroicons.sun class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
|
|
Light
|
|
</li>
|
|
<li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-2" role="option" tabindex="-1">
|
|
<Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
|
|
Dark
|
|
</li>
|
|
<li class="py-1 px-2 flex items-center cursor-pointer text-slate-700 dark:text-slate-300" id="selector-option-3" role="option" tabindex="-1" aria-selected="true" data-headlessui-state="selected">
|
|
<Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
|
|
System
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
"""
|
|
end
|
|
|
|
def breakpoint_indicator(assigns) do
|
|
~H"""
|
|
<div class="absolute mt-5 ml-40 bg-white text-black dark:bg-black dark:text-white">
|
|
<span class="sm:hidden">xs</span>
|
|
<span class="hidden sm:inline md:hidden">sm</span>
|
|
<span class="hidden md:inline lg:hidden">md</span>
|
|
<span class="hidden lg:inline xl:hidden">lg</span>
|
|
<span class="hidden xl:inline 2xl:hidden">xl</span>
|
|
<span class="hidden 2xl:inline">2xl</span>
|
|
</div>
|
|
"""
|
|
end
|
|
end
|