{-# LANGUAGE GeneralizedNewtypeDeriving #-}
{-# LANGUAGE ExistentialQuantification #-}
{-# LANGUAGE DerivingStrategies #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TypeApplications #-}
{-# LANGUAGE RecordWildCards #-}
{-# LANGUAGE LambdaCase #-}
module Miso.UI.Dialog
(
dialogComponent
) where
import Miso
import Miso.Html hiding (data_)
import Miso.Html.Property hiding (form_, label_)
import Miso.Svg hiding (view_)
import Miso.Svg.Property hiding (path_)
import Miso.Lens
import Control.Monad
import Language.Javascript.JSaddle ((#), jsg)
data Action
= ShowDialog MisoString DOMRef
| CloseDialog
dialogComponent :: Component parent MisoString Action
dialogComponent :: forall parent. Component parent MisoString Action
dialogComponent = MisoString
-> (Action -> Effect parent MisoString Action)
-> (MisoString -> View MisoString Action)
-> Component parent MisoString Action
forall model action parent.
model
-> (action -> Effect parent model action)
-> (model -> View model action)
-> Component parent model action
component MisoString
"" Action -> Effect parent MisoString Action
forall {parent} {action}.
Action
-> RWST
(ComponentInfo parent)
[Sink action -> JSM ()]
MisoString
Identity
()
update_ ((MisoString -> View MisoString Action)
-> Component parent MisoString Action)
-> (MisoString -> View MisoString Action)
-> Component parent MisoString Action
forall a b. (a -> b) -> a -> b
$ \MisoString
_ -> View MisoString Action
forall m. View m Action
view_
where
update_ :: Action
-> RWST
(ComponentInfo parent)
[Sink action -> JSM ()]
MisoString
Identity
()
update_ (ShowDialog MisoString
sel JSVal
domRef) = do
Lens MisoString MisoString
forall a. Lens a a
this Lens MisoString MisoString
-> MisoString
-> RWST
(ComponentInfo parent)
[Sink action -> JSM ()]
MisoString
Identity
()
forall record (m :: * -> *) field.
MonadState record m =>
Lens record field -> field -> m ()
.= MisoString
sel
JSM ()
-> RWST
(ComponentInfo parent)
[Sink action -> JSM ()]
MisoString
Identity
()
forall a parent model action. JSM a -> Effect parent model action
io_ (JSM ()
-> RWST
(ComponentInfo parent)
[Sink action -> JSM ()]
MisoString
Identity
())
-> JSM ()
-> RWST
(ComponentInfo parent)
[Sink action -> JSM ()]
MisoString
Identity
()
forall a b. (a -> b) -> a -> b
$ do
dialogRef <- JSVal -> JSM JSVal
nextSibling JSVal
domRef
void $ dialogRef # ("showModal" :: MisoString) $ ()
update_ Action
CloseDialog = do
sel <- Lens MisoString MisoString
-> RWST
(ComponentInfo parent)
[Sink action -> JSM ()]
MisoString
Identity
MisoString
forall record (m :: * -> *) field.
MonadState record m =>
Lens record field -> m field
use Lens MisoString MisoString
forall a. Lens a a
this
io_ $ do
dialog <- jsg @MisoString "document"
# ("getElementById" :: MisoString)
$ [sel :: MisoString]
void $ dialog # ("close" :: MisoString) $ ()
view_ :: View m Action
view_ :: forall m. View m Action
view_ = [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
section_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"dialog"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"w-full rounded-lg border scroll-mt-14"
]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
header_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_
MisoString
"border-b px-4 py-3 flex items-center justify-between"
]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
h2_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"text-sm font-medium"] [View m Action
"Dialog"]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
a_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
href_ MisoString
"#dialog"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_
MisoString
"text-muted-foreground hover:text-foreground"
, MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
data_ MisoString
"tooltip" MisoString
"See documentation"
, MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
data_ MisoString
"side" MisoString
"left"
]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"size-4"
]
[ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M12 7v14"]
, [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_
MisoString
"M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
]
]
]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"p-4"]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"flex flex-wrap items-center gap-4"
]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"button", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"btn-outline", (JSVal -> Action) -> Attribute Action
forall action. (JSVal -> action) -> Attribute action
onClickWith (MisoString -> JSVal -> Action
ShowDialog MisoString
"demo-dialog-edit-profile") ]
[View m Action
"Edit Profile"]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
dialog_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-dialog-edit-profile"
, Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_
MisoString
"dialog w-full sm:max-w-[425px] max-h-[612px]"
, MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_
MisoString
"labelledby"
MisoString
"demo-dialog-edit-profile-title"
, MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_
MisoString
"describedby"
MisoString
"demo-dialog-edit-profile-description"
]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
[]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
header_
[]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
h2_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-dialog-edit-profile-title"]
[View m Action
"Edit profile"]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-dialog-edit-profile-description"]
[ View m Action
"Make changes to your profile here. Click save when you're done."
]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
section_
[]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
form_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"form grid gap-4"]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"grid gap-3"]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
label_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
for_ MisoString
"demo-dialog-edit-profile-name"]
[View m Action
"Name"]
, [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
input_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"text"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-dialog-edit-profile-name"
]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"grid gap-3"]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
label_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
for_ MisoString
"demo-dialog-edit-profile-username"]
[View m Action
"Username"]
, [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
input_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"text"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"demo-dialog-edit-profile-username"
]
]
]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
footer_
[]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"btn-outline", Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog ] [View m Action
"Cancel"]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"btn", Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog ] [View m Action
"Save changes"]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"button", MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"label" MisoString
"Close dialog", Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog ]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"lucide lucide-x-icon lucide-x"
]
[ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M18 6 6 18"]
, [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"m6 6 12 12"]
]
]
]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"button", MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"btn-outline", (JSVal -> Action) -> Attribute Action
forall action. (JSVal -> action) -> Attribute action
onClickWith (MisoString -> JSVal -> Action
ShowDialog MisoString
"dialog-example") ]
[View m Action
"Scrollable Content"]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
dialog_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"dialog-example"
, Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_
MisoString
"dialog w-full sm:max-w-[425px] max-h-[612px]"
, MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"labelledby" MisoString
"dialog-example-title"
, MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"describedby" MisoString
"dialog-example-description"
]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
[]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
header_
[]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
h2_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"dialog-example-title"]
[View m Action
"Scrollable Content"]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
id_ MisoString
"dialog-example-description"]
[View m Action
"This is a dialog with scrollable content."]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
section_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"overflow-y-auto scrollbar"]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
div_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"space-y-4 text-sm"]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
p_
[]
[ View m Action
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
]
]
]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
footer_
[]
[[Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"btn-outline", Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog ] [View m Action
"Close"] ]
, [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
button_
[MisoString -> Attribute Action
forall action. MisoString -> Attribute action
type_ MisoString
"button", MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
aria_ MisoString
"label" MisoString
"Close dialog", Action -> Attribute Action
forall action. action -> Attribute action
onClick Action
CloseDialog ]
[ [Attribute Action] -> [View m Action] -> View m Action
forall action model.
[Attribute action] -> [View model action] -> View model action
svg_
[ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
xmlns_ MisoString
"http://www.w3.org/2000/svg"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
width_ MisoString
"24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
height_ MisoString
"24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
viewBox_ MisoString
"0 0 24 24"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
fill_ MisoString
"none"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
stroke_ MisoString
"currentColor"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeWidth_ MisoString
"2"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinecap_ MisoString
"round"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
strokeLinejoin_ MisoString
"round"
, MisoString -> Attribute Action
forall action. MisoString -> Attribute action
class_ MisoString
"lucide lucide-x-icon lucide-x"
]
[ [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"M18 6 6 18"]
, [Attribute Action] -> View m Action
forall action model. [Attribute action] -> View model action
path_ [MisoString -> Attribute Action
forall action. MisoString -> Attribute action
d_ MisoString
"m6 6 12 12"]
]
]
]
]
]
]
]