We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
items = [
%{
description: "Est eveniet cupiditate et nisi quasi iure animi adipisci a sit sed delectus blanditiis laborum et veritatis consequatur minima nesciunt atque praesentium totam omnis ex voluptatem ex laborum delectus porro quos inventore ex id blanditiis sint dolorum perspiciatis maxime consectetur",
title: "Voluptate et error repellat magni"
},
%{
description: "Aspernatur non aspernatur consequatur maiores sunt qui et commodi voluptates non sit consequatur sed dignissimos quis et in molestiae maiores eligendi illum repudiandae harum maxime veniam laboriosam totam in possimus mollitia excepturi ex veniam consequatur vitae ipsa est vel vitae",
title: "Iste inventore debitis nisi eaque"
},
%{
description: "Tempora quia rem accusantium voluptatem nihil magni eum aut libero fugit ab commodi amet aspernatur repudiandae molestias dolores molestiae ut reiciendis voluptatum iusto minus repudiandae sed placeat dolore iste voluptatem in soluta non accusantium sapiente consequuntur facere officia enim eum",
title: "Assumenda dolores quam incidunt odio"
},
%{
description: "Qui tempore ex vero qui rerum ea assumenda ipsa repellendus maiores tempore quia et reiciendis est et rerum commodi maiores delectus ut aut sapiente architecto quis pariatur quis possimus quia quis suscipit aperiam sit illum voluptatem accusamus cum commodi consectetur",
title: "Distinctio libero neque necessitatibus in"
},
%{
description: "Totam ducimus voluptas deserunt illum quos eius aperiam eos tenetur nemo aut vel est nemo aut hic est aspernatur est eaque occaecati non accusamus qui corrupti omnis voluptas perferendis voluptatem temporibus non quos repudiandae excepturi et occaecati exercitationem molestiae tenetur",
title: "Quam sit voluptas adipisci quasi"
}
]
<.phx_ui_accordion_2 items={@items} />
defmodule PHXUIWeb.Components.Restricted do
use Phoenix.Component
import PHXUIWeb.CoreComponents
@moduledoc """
PHX UI sample component
"""
attr :rest, :global
attr :class, :string, default: ""
attr :type, :string, default: "info", values: ["info", "success", "warning", "danger"]
attr :size, :string, default: "md"
slot(:inner_block)
def phx_ui_sample_component(assigns) do
~H"""
<div
@rest
class={[
"w-full flex items-center justify-start",
@bg_color,
size_classes(@size),
@class
]}
>
<div>
<h1>Didn't melt fairer keepsakes since Fellowship elsewhere.</h1>
<p>Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?</p>
<h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>
<p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.</p>
<h3>North valor overflowing sort Iáve mister kingly money?</h3>
<p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>
<ul>
<li>Adamant.</li>
<li>Southfarthing!</li>
<li>Witch-king.</li>
<li>Precious.</li>
<li>Gaffer's!</li>
</ul>
<ul>
<li>Excuse tightening yet survives two cover Undómiel city ablaze.</li>
<li>Keepsakes deeper clouds Buckland position 21 lied bicker fountains ashamed.</li>
<li>Women rippling cold steps rules Thengel finer.</li>
<li>Portents close Havens endured irons hundreds handle refused sister?</li>
<li>Harbor Grubbs fellas riddles afar!</li>
</ul>
<h3>Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.</h3>
<p>Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.</p>
<ol>
<li>Narsil.</li>
<li>Elros.</li>
<li>Arwen Evenstar.</li>
<li>Maggot's?</li>
<li>Bagginses?</li>
</ol>
</div>
"""
end
defp size_classes(size) do
case size do
"lg" -> "p-4"
"md" -> "p-3"
"sm" -> "p-2"
end
end
end
items = [
%{
description: "Est eveniet cupiditate et nisi quasi iure animi adipisci a sit sed delectus blanditiis laborum et veritatis consequatur minima nesciunt atque praesentium totam omnis ex voluptatem ex laborum delectus porro quos inventore ex id blanditiis sint dolorum perspiciatis maxime consectetur",
title: "Voluptate et error repellat magni"
},
%{
description: "Aspernatur non aspernatur consequatur maiores sunt qui et commodi voluptates non sit consequatur sed dignissimos quis et in molestiae maiores eligendi illum repudiandae harum maxime veniam laboriosam totam in possimus mollitia excepturi ex veniam consequatur vitae ipsa est vel vitae",
title: "Iste inventore debitis nisi eaque"
},
%{
description: "Tempora quia rem accusantium voluptatem nihil magni eum aut libero fugit ab commodi amet aspernatur repudiandae molestias dolores molestiae ut reiciendis voluptatum iusto minus repudiandae sed placeat dolore iste voluptatem in soluta non accusantium sapiente consequuntur facere officia enim eum",
title: "Assumenda dolores quam incidunt odio"
},
%{
description: "Qui tempore ex vero qui rerum ea assumenda ipsa repellendus maiores tempore quia et reiciendis est et rerum commodi maiores delectus ut aut sapiente architecto quis pariatur quis possimus quia quis suscipit aperiam sit illum voluptatem accusamus cum commodi consectetur",
title: "Distinctio libero neque necessitatibus in"
},
%{
description: "Totam ducimus voluptas deserunt illum quos eius aperiam eos tenetur nemo aut vel est nemo aut hic est aspernatur est eaque occaecati non accusamus qui corrupti omnis voluptas perferendis voluptatem temporibus non quos repudiandae excepturi et occaecati exercitationem molestiae tenetur",
title: "Quam sit voluptas adipisci quasi"
}
]
<.phx_ui_accordion_1 items={@items} />
defmodule PHXUIWeb.Components.Accordions do
use Phoenix.Component
import PHXUIWeb.CoreComponents
@moduledoc """
PHX UI accordions component
"""
attr :rest, :global
attr :class, :string, default: ""
attr :items, :list, default: []
def phx_ui_accordion_1(assigns) do
~H"""
<div class={["w-full", @class]} {@rest}>
<details :for={item <- @items} class="bg-white open:bg-white open:ring-black/5 p-0.5">
<summary class="text-sm leading-6 text-slate-900 font-semibold select-none cursor-pointer list-disc list-inside py-2.5">
<%= item.title %>
</summary>
<div class="px-5 py-2.5 text-sm leading-6 text-slate-600">
<p>
<%= item.description %>
</p>
</div>
</details>
</div>
"""
end
attr :rest, :global
attr :class, :string, default: ""
attr :items, :list, default: []
def phx_ui_accordion_2(assigns) do
~H"""
<div class={["w-full", @class]} {@rest}>
<details :for={item <- @items} class="bg-white open:bg-white open:ring-black/5 border-b border-slate-200 last:border-none hover:bg-slate-50 group p-2">
<summary class="text-sm leading-6 text-slate-900 font-semibold select-none cursor-pointer list-none py-2.5 relative">
<span>
<%= item.title %>
</span>
<.icon name="hero-chevron-right" class="h-4 w-4 absolute right-[1rem] top-[1rem] rotate-0 transition-all group-open:rotate-90" />
</summary>
<div class="py-2.5 text-sm leading-6 text-slate-600">
<p>
<%= item.description %>
</p>
</div>
</details>
</div>
"""
end
end
items = [
%{
description: "Est eveniet cupiditate et nisi quasi iure animi adipisci a sit sed delectus blanditiis laborum et veritatis consequatur minima nesciunt atque praesentium totam omnis ex voluptatem ex laborum delectus porro quos inventore ex id blanditiis sint dolorum perspiciatis maxime consectetur",
title: "Voluptate et error repellat magni"
},
%{
description: "Aspernatur non aspernatur consequatur maiores sunt qui et commodi voluptates non sit consequatur sed dignissimos quis et in molestiae maiores eligendi illum repudiandae harum maxime veniam laboriosam totam in possimus mollitia excepturi ex veniam consequatur vitae ipsa est vel vitae",
title: "Iste inventore debitis nisi eaque"
},
%{
description: "Tempora quia rem accusantium voluptatem nihil magni eum aut libero fugit ab commodi amet aspernatur repudiandae molestias dolores molestiae ut reiciendis voluptatum iusto minus repudiandae sed placeat dolore iste voluptatem in soluta non accusantium sapiente consequuntur facere officia enim eum",
title: "Assumenda dolores quam incidunt odio"
},
%{
description: "Qui tempore ex vero qui rerum ea assumenda ipsa repellendus maiores tempore quia et reiciendis est et rerum commodi maiores delectus ut aut sapiente architecto quis pariatur quis possimus quia quis suscipit aperiam sit illum voluptatem accusamus cum commodi consectetur",
title: "Distinctio libero neque necessitatibus in"
},
%{
description: "Totam ducimus voluptas deserunt illum quos eius aperiam eos tenetur nemo aut vel est nemo aut hic est aspernatur est eaque occaecati non accusamus qui corrupti omnis voluptas perferendis voluptatem temporibus non quos repudiandae excepturi et occaecati exercitationem molestiae tenetur",
title: "Quam sit voluptas adipisci quasi"
}
]
<.phx_ui_accordion_2 items={@items} />
defmodule PHXUIWeb.Components.Restricted do
use Phoenix.Component
import PHXUIWeb.CoreComponents
@moduledoc """
PHX UI sample component
"""
attr :rest, :global
attr :class, :string, default: ""
attr :type, :string, default: "info", values: ["info", "success", "warning", "danger"]
attr :size, :string, default: "md"
slot(:inner_block)
def phx_ui_sample_component(assigns) do
~H"""
<div
@rest
class={[
"w-full flex items-center justify-start",
@bg_color,
size_classes(@size),
@class
]}
>
<div>
<h1>Didn't melt fairer keepsakes since Fellowship elsewhere.</h1>
<p>Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?</p>
<h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>
<p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.</p>
<h3>North valor overflowing sort Iáve mister kingly money?</h3>
<p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>
<ul>
<li>Adamant.</li>
<li>Southfarthing!</li>
<li>Witch-king.</li>
<li>Precious.</li>
<li>Gaffer's!</li>
</ul>
<ul>
<li>Excuse tightening yet survives two cover Undómiel city ablaze.</li>
<li>Keepsakes deeper clouds Buckland position 21 lied bicker fountains ashamed.</li>
<li>Women rippling cold steps rules Thengel finer.</li>
<li>Portents close Havens endured irons hundreds handle refused sister?</li>
<li>Harbor Grubbs fellas riddles afar!</li>
</ul>
<h3>Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.</h3>
<p>Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.</p>
<ol>
<li>Narsil.</li>
<li>Elros.</li>
<li>Arwen Evenstar.</li>
<li>Maggot's?</li>
<li>Bagginses?</li>
</ol>
</div>
"""
end
defp size_classes(size) do
case size do
"lg" -> "p-4"
"md" -> "p-3"
"sm" -> "p-2"
end
end
end
items = [
%{
description: "Est eveniet cupiditate et nisi quasi iure animi adipisci a sit sed delectus blanditiis laborum et veritatis consequatur minima nesciunt atque praesentium totam omnis ex voluptatem ex laborum delectus porro quos inventore ex id blanditiis sint dolorum perspiciatis maxime consectetur",
title: "Voluptate et error repellat magni"
},
%{
description: "Aspernatur non aspernatur consequatur maiores sunt qui et commodi voluptates non sit consequatur sed dignissimos quis et in molestiae maiores eligendi illum repudiandae harum maxime veniam laboriosam totam in possimus mollitia excepturi ex veniam consequatur vitae ipsa est vel vitae",
title: "Iste inventore debitis nisi eaque"
},
%{
description: "Tempora quia rem accusantium voluptatem nihil magni eum aut libero fugit ab commodi amet aspernatur repudiandae molestias dolores molestiae ut reiciendis voluptatum iusto minus repudiandae sed placeat dolore iste voluptatem in soluta non accusantium sapiente consequuntur facere officia enim eum",
title: "Assumenda dolores quam incidunt odio"
},
%{
description: "Qui tempore ex vero qui rerum ea assumenda ipsa repellendus maiores tempore quia et reiciendis est et rerum commodi maiores delectus ut aut sapiente architecto quis pariatur quis possimus quia quis suscipit aperiam sit illum voluptatem accusamus cum commodi consectetur",
title: "Distinctio libero neque necessitatibus in"
},
%{
description: "Totam ducimus voluptas deserunt illum quos eius aperiam eos tenetur nemo aut vel est nemo aut hic est aspernatur est eaque occaecati non accusamus qui corrupti omnis voluptas perferendis voluptatem temporibus non quos repudiandae excepturi et occaecati exercitationem molestiae tenetur",
title: "Quam sit voluptas adipisci quasi"
}
]
<.phx_ui_accordion_2 items={@items} />
defmodule PHXUIWeb.Components.Restricted do
use Phoenix.Component
import PHXUIWeb.CoreComponents
@moduledoc """
PHX UI sample component
"""
attr :rest, :global
attr :class, :string, default: ""
attr :type, :string, default: "info", values: ["info", "success", "warning", "danger"]
attr :size, :string, default: "md"
slot(:inner_block)
def phx_ui_sample_component(assigns) do
~H"""
<div
@rest
class={[
"w-full flex items-center justify-start",
@bg_color,
size_classes(@size),
@class
]}
>
<div>
<h1>Didn't melt fairer keepsakes since Fellowship elsewhere.</h1>
<p>Woodlands payment Osgiliath tightening. Barad-dur follow belly comforts tender tough bell? Many that live deserve death. Some that die deserve life. Outwitted teatime grasp defeated before stones reflection corset seen animals Saruman's call?</p>
<h2>Tad survive ensnare joy mistake courtesy Bagshot Row.</h2>
<p>Ligulas step drops both? You shall not pass! Tender respectable success Valar impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony trouble'll sleeping during jump Narsil.</p>
<h3>North valor overflowing sort Iáve mister kingly money?</h3>
<p>Curse you and all the halflings! Deserted anytime Lake-town burned caves balls. Smoked lthilien forbids Thrain?</p>
<ul>
<li>Adamant.</li>
<li>Southfarthing!</li>
<li>Witch-king.</li>
<li>Precious.</li>
<li>Gaffer's!</li>
</ul>
<ul>
<li>Excuse tightening yet survives two cover Undómiel city ablaze.</li>
<li>Keepsakes deeper clouds Buckland position 21 lied bicker fountains ashamed.</li>
<li>Women rippling cold steps rules Thengel finer.</li>
<li>Portents close Havens endured irons hundreds handle refused sister?</li>
<li>Harbor Grubbs fellas riddles afar!</li>
</ul>
<h3>Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf.</h3>
<p>Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum surprise baby season ranks. I bid you all a very fond farewell.</p>
<ol>
<li>Narsil.</li>
<li>Elros.</li>
<li>Arwen Evenstar.</li>
<li>Maggot's?</li>
<li>Bagginses?</li>
</ol>
</div>
"""
end
defp size_classes(size) do
case size do
"lg" -> "p-4"
"md" -> "p-3"
"sm" -> "p-2"
end
end
end