{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings #-}
{-# LANGUAGE RecordWildCards #-}
module Miso.UI.Badge
(
BadgeProps (..)
, defaultBadgeProps
, badge_
, badgeClass
, badgeSample
, badgeCodeSample
, badgePropsApi
) where
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import Miso.UI.Types
data BadgeProps action
= BadgeProps
{ forall action. BadgeProps action -> Variant
badgeVariant :: Variant
, forall action. BadgeProps action -> Bool
badgeRounded :: Bool
, forall action. BadgeProps action -> Maybe MisoString
badgeHref :: Maybe MisoString
, forall action. BadgeProps action -> [MisoString]
badgeClasses :: [MisoString]
, forall action. BadgeProps action -> [Attribute action]
badgeAttrs :: [Attribute action]
}
defaultBadgeProps :: BadgeProps action
defaultBadgeProps :: forall action. BadgeProps action
defaultBadgeProps
= BadgeProps
{ badgeVariant :: Variant
badgeVariant = Variant
Primary
, badgeRounded :: Bool
badgeRounded = Bool
False
, badgeHref :: Maybe MisoString
badgeHref = Maybe MisoString
forall a. Maybe a
Nothing
, badgeClasses :: [MisoString]
badgeClasses = []
, badgeAttrs :: [Attribute action]
badgeAttrs = []
}
badgeClass :: BadgeProps action -> MisoString
badgeClass :: forall action. BadgeProps action -> MisoString
badgeClass BadgeProps {Bool
[MisoString]
[Attribute action]
Maybe MisoString
Variant
badgeVariant :: forall action. BadgeProps action -> Variant
badgeRounded :: forall action. BadgeProps action -> Bool
badgeHref :: forall action. BadgeProps action -> Maybe MisoString
badgeClasses :: forall action. BadgeProps action -> [MisoString]
badgeAttrs :: forall action. BadgeProps action -> [Attribute action]
badgeVariant :: Variant
badgeRounded :: Bool
badgeHref :: Maybe MisoString
badgeClasses :: [MisoString]
badgeAttrs :: [Attribute action]
..} =
case Variant
badgeVariant of
Variant
Primary -> MisoString
"badge"
Variant
v -> MisoString
"badge-" MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> Variant -> MisoString
variantSuffix Variant
v
badge_
:: BadgeProps action
-> [View model action]
-> View model action
badge_ :: forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
cfg [View model action]
kids = [Attribute action] -> [View model action] -> View model action
forall {action} {model}.
[Attribute action] -> [View model action] -> View model action
element [Attribute action]
attrs [View model action]
kids
where
element :: [Attribute action] -> [View model action] -> View model action
element =
case BadgeProps action -> Maybe MisoString
forall action. BadgeProps action -> Maybe MisoString
badgeHref BadgeProps action
cfg of
Just MisoString
_ -> [Attribute action] -> [View model action] -> View model action
forall {action} {model}.
[Attribute action] -> [View model action] -> View model action
H.a_
Maybe MisoString
Nothing -> [Attribute action] -> [View model action] -> View model action
forall {action} {model}.
[Attribute action] -> [View model action] -> View model action
H.span_
attrs :: [Attribute action]
attrs = [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
[ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ ([MisoString] -> Attribute action)
-> [MisoString] -> Attribute action
forall a b. (a -> b) -> a -> b
$ [[MisoString]] -> [MisoString]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
[ [ BadgeProps action -> MisoString
forall action. BadgeProps action -> MisoString
badgeClass BadgeProps action
cfg ]
, [ MisoString
"rounded-full min-w-5 px-1" | BadgeProps action -> Bool
forall action. BadgeProps action -> Bool
badgeRounded BadgeProps action
cfg ]
, BadgeProps action -> [MisoString]
forall action. BadgeProps action -> [MisoString]
badgeClasses BadgeProps action
cfg
]
]
, [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.href_ MisoString
h | Just MisoString
h <- [BadgeProps action -> Maybe MisoString
forall action. BadgeProps action -> Maybe MisoString
badgeHref BadgeProps action
cfg] ]
, BadgeProps action -> [Attribute action]
forall action. BadgeProps action -> [Attribute action]
badgeAttrs BadgeProps action
cfg
]
badgeSample :: View model action
badgeSample :: forall model action. View model action
badgeSample =
[Attribute action] -> [View model action] -> View model action
forall {action} {model}.
[Attribute action] -> [View model action] -> View model action
H.div_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex flex-col gap-2" ]
[ [Attribute action] -> [View model action] -> View model action
forall {action} {model}.
[Attribute action] -> [View model action] -> View model action
H.div_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex flex-wrap items-center gap-2 md:flex-row" ]
[ BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps [ View model action
"Primary" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeVariant = Secondary } [ View model action
"Secondary" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeVariant = Outline } [ View model action
"Outline" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeVariant = Destructive } [ View model action
"Destructive" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeRounded = True } [ View model action
"8" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeRounded = True, badgeVariant = Destructive } [ View model action
"99" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps
{ badgeRounded = True
, badgeVariant = Outline
, badgeClasses = [ "font-mono", "tabular-nums" ]
}
[ View model action
"20+" ]
]
, [Attribute action] -> [View model action] -> View model action
forall {action} {model}.
[Attribute action] -> [View model action] -> View model action
H.div_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex flex-wrap items-center gap-2 md:flex-row" ]
[ BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeHref = Just "#" } [ View model action
"Link" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeHref = Just "#", badgeVariant = Secondary } [ View model action
"Link" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeHref = Just "#", badgeVariant = Destructive } [ View model action
"Link" ]
, BadgeProps action -> [View model action] -> View model action
forall action model.
BadgeProps action -> [View model action] -> View model action
badge_ BadgeProps action
forall action. BadgeProps action
defaultBadgeProps { badgeHref = Just "#", badgeVariant = Outline } [ View model action
"Link" ]
]
]
badgeCodeSample :: View model action
badgeCodeSample :: forall model action. View model action
badgeCodeSample =
View model action
"""
-----------------------------------------------------------------------------
module MyBadge (badgeSample) where
-----------------------------------------------------------------------------
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import Miso.UI.Types
import Miso.UI.Badge
-----------------------------------------------------------------------------
badgeSample :: View model action
badgeSample =
H.div_
[ P.class_ "flex flex-col gap-2" ]
[ H.div_
[ P.class_ "flex flex-wrap items-center gap-2 md:flex-row" ]
[ badge_ defaultBadgeProps [ "Primary" ]
, badge_ defaultBadgeProps { badgeVariant = Secondary } [ "Secondary" ]
, badge_ defaultBadgeProps { badgeVariant = Outline } [ "Outline" ]
, badge_ defaultBadgeProps { badgeVariant = Destructive } [ "Destructive" ]
, badge_ defaultBadgeProps { badgeRounded = True } [ "8" ]
, badge_ defaultBadgeProps { badgeRounded = True, badgeVariant = Destructive } [ "99" ]
, badge_ defaultBadgeProps
{ badgeRounded = True
, badgeVariant = Outline
, badgeClasses = [ "font-mono", "tabular-nums" ]
}
[ "20+" ]
]
, H.div_
[ P.class_ "flex flex-wrap items-center gap-2 md:flex-row" ]
[ badge_ defaultBadgeProps { badgeHref = Just "#" } [ "Link" ]
, badge_ defaultBadgeProps { badgeHref = Just "#", badgeVariant = Secondary } [ "Link" ]
, badge_ defaultBadgeProps { badgeHref = Just "#", badgeVariant = Destructive } [ "Link" ]
, badge_ defaultBadgeProps { badgeHref = Just "#", badgeVariant = Outline } [ "Link" ]
]
]
"""
badgePropsApi :: View model action
badgePropsApi :: forall model action. View model action
badgePropsApi =
View model action
"""
-- | Props for 'badge_'
data BadgeProps action
= BadgeProps
{ badgeVariant :: Variant
-- ^ 'Primary', 'Secondary', 'Destructive' or 'Outline'
, badgeRounded :: Bool
-- ^ Pill badge (@rounded-full@), typically for counters
, badgeHref :: Maybe MisoString
-- ^ When set, renders as a link (an anchor element)
, badgeClasses :: [MisoString]
-- ^ Extra classes appended to the computed basecoat class
, badgeAttrs :: [Attribute action]
}
-----------------------------------------------------------------------------
-- | Smart constructor: primary variant, not rounded
defaultBadgeProps :: BadgeProps action
defaultBadgeProps
= BadgeProps
{ badgeVariant = Primary
, badgeRounded = False
, badgeHref = Nothing
, badgeClasses = []
, badgeAttrs = []
}
"""