1  module Widget (card, error, spinner, link) where
 2  
 3  import Common.Route (FrontendRoute (..))
 4  import Data.Text (Text)
 5  import qualified Data.Text as T
 6  import Obelisk.Route (R)
 7  import Obelisk.Route.Frontend
 8    ( RouteToUrl,
 9      Routed,
10      SetRoute,
11      askRoute,
12      routeLinkDynAttr,
13    )
14  import Reflex.Dom.Core hiding (link)
15  import qualified Widget.Icon as Icon
16  import Prelude hiding (error)
17  
18  spinner :: DomBuilder t m => m ()
19  spinner =
20    elClass
21      "div"
22      ( T.unwords
23          [ "absolute",
24            "right-1/2",
25            "bottom-1/2",
26            "transform",
27            "translate-x-1/2",
28            "translate-y-1/2"
29          ]
30      )
31      $ elClass
32        "div"
33        ( T.unwords
34            [ "border-t-transparent",
35              "border-solid",
36              "animate-spin",
37              "rounded-full",
38              "border-primary",
39              "border-4",
40              "h-8",
41              "w-8"
42            ]
43        )
44        blank
45  
46  error ::
47    ( RouteToUrl (R FrontendRoute) m,
48      SetRoute t (R FrontendRoute) m,
49      DomBuilder t m,
50      Prerender t m,
51      Routed t (R FrontendRoute) m,
52      PostBuild t m
53    ) =>
54    Text ->
55    m ()
56  error msg = do
57    route <- askRoute
58    elClass "div" "p-4" $
59      elClass "div" (T.unwords ["alert", "alert-error", "shadow-lg"]) $
60        do
61          el "div" $ do
62            Icon.iconClass Icon.infoName mempty
63            el "div" $ do
64              elClass "h3" "font-bold" $ text "An error occurred "
65              elClass "div" "text-xs" $ text msg
66          el "div" $
67            routeLinkDynAttr (constDyn $ "class" =: "link") route $
68              text "try again"
69  
70  card :: DomBuilder t m => m a -> m a
71  card =
72    elClass "div" "flex items-start md:h-full md:pt-[20vh]"
73      . elClass
74        "div"
75        ( T.unwords
76            [ "flex",
77              "flex-col",
78              "md:rounded-lg",
79              "md:bg-base-200",
80              "md:max-w-md",
81              "md:shadow",
82              "w-screen",
83              "w-full",
84              "mx-auto",
85              "gap-4",
86              "p-4"
87            ]
88        )
89  
90  link :: DomBuilder t m => Text -> m () -> m ()
91  link url = elAttr "a" ("class" =: "link" <> "href" =: url)