-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Avatar
  ( -- ** Props
    AvatarProps (..)
  , defaultAvatarProps
    -- ** Views
  , avatar_
  , avatarFallback_
  , avatarGroup_
    -- ** Samples
  , avatarSample
  , avatarCodeSample
  , avatarPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
import           Miso.UI.Types
-----------------------------------------------------------------------------
-- | Props for 'avatar_'
data AvatarProps action
  = AvatarProps
  { forall action. AvatarProps action -> MisoString
avatarSrc :: MisoString
  , forall action. AvatarProps action -> MisoString
avatarAlt :: MisoString
  , forall action. AvatarProps action -> Size
avatarSize :: Size
    -- ^ 'DefaultSize' (@size-8@) or 'Large' (@size-12@)
  , forall action. AvatarProps action -> Bool
avatarSquare :: Bool
    -- ^ @rounded-lg@ instead of @rounded-full@
  , forall action. AvatarProps action -> [MisoString]
avatarClasses :: [MisoString]
    -- ^ Extra classes appended to the @img@
  , forall action. AvatarProps action -> [Attribute action]
avatarAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: small round avatar
defaultAvatarProps :: AvatarProps action
defaultAvatarProps :: forall action. AvatarProps action
defaultAvatarProps
  = AvatarProps
  { avatarSrc :: MisoString
avatarSrc = MisoString
""
  , avatarAlt :: MisoString
avatarAlt = MisoString
""
  , avatarSize :: Size
avatarSize = Size
DefaultSize
  , avatarSquare :: Bool
avatarSquare = Bool
False
  , avatarClasses :: [MisoString]
avatarClasses = []
  , avatarAttrs :: [Attribute action]
avatarAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/avatar/ Avatar>, driven by 'AvatarProps'
avatar_ :: AvatarProps action -> View model action
avatar_ :: forall action model. AvatarProps action -> View model action
avatar_ AvatarProps {Bool
[MisoString]
[Attribute action]
MisoString
Size
avatarSrc :: forall action. AvatarProps action -> MisoString
avatarAlt :: forall action. AvatarProps action -> MisoString
avatarSize :: forall action. AvatarProps action -> Size
avatarSquare :: forall action. AvatarProps action -> Bool
avatarClasses :: forall action. AvatarProps action -> [MisoString]
avatarAttrs :: forall action. AvatarProps action -> [Attribute action]
avatarSrc :: MisoString
avatarAlt :: MisoString
avatarSize :: Size
avatarSquare :: Bool
avatarClasses :: [MisoString]
avatarAttrs :: [Attribute action]
..} = [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.img_ ([Attribute action] -> View model action)
-> [Attribute action] -> View model action
forall a b. (a -> b) -> a -> b
$ [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
  [ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.src_ MisoString
avatarSrc
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.alt_ MisoString
avatarAlt
    , [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
      [ [ if Size
avatarSize Size -> Size -> Bool
forall a. Eq a => a -> a -> Bool
== Size
Large then MisoString
"size-12" else MisoString
"size-8" ]
      , [ MisoString
"shrink-0", MisoString
"object-cover" ]
      , [ if Bool
avatarSquare then MisoString
"rounded-lg" else MisoString
"rounded-full" ]
      , [MisoString]
avatarClasses
      ]
    ]
  , [Attribute action]
avatarAttrs
  ]
-----------------------------------------------------------------------------
-- | Initials fallback when no image is available
avatarFallback_
  :: [Attribute action]
  -> [View model action]
  -> View model action
avatarFallback_ :: forall action model.
[Attribute action] -> [View model action] -> View model action
avatarFallback_ [Attribute action]
attrs [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.span_
    ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"size-8 shrink-0 bg-muted flex items-center justify-center rounded-full"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    ) [View model action]
kids
-----------------------------------------------------------------------------
-- | Overlapping stack of avatars. Children should be plain @img_@ views
-- (the group styles them via @[&_img]@ selectors).
avatarGroup_
  :: Size
  -> [Attribute action]
  -> [View model action]
  -> View model action
avatarGroup_ :: forall action model.
Size
-> [Attribute action] -> [View model action] -> View model action
avatarGroup_ Size
size [Attribute action]
attrs [View model action]
kids =
  [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.classes_
      [ MisoString
"flex"
      , MisoString
"-space-x-2"
      , MisoString
"[&_img]:ring-background"
      , MisoString
"[&_img]:ring-2"
      , MisoString
"[&_img]:grayscale"
      , if Size
size Size -> Size -> Bool
forall a. Eq a => a -> a -> Bool
== Size
Large then MisoString
"[&_img]:size-12" else MisoString
"[&_img]:size-8"
      , MisoString
"[&_img]:shrink-0"
      , MisoString
"[&_img]:object-cover"
      , MisoString
"[&_img]:rounded-full"
      ]
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    ) [View model action]
kids
-----------------------------------------------------------------------------
avatarSample :: View model action
avatarSample :: forall model action. View model action
avatarSample =
  [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-row flex-wrap items-center gap-4" ]
  [ AvatarProps action -> View model action
forall action model. AvatarProps action -> View model action
avatar_ AvatarProps action
forall action. AvatarProps action
defaultAvatarProps
    { avatarSrc = "https://github.com/dmjio.png"
    , avatarAlt = "@dmjio"
    }
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
avatarFallback_ [] [ View model action
"CN" ]
  , AvatarProps action -> View model action
forall action model. AvatarProps action -> View model action
avatar_ AvatarProps action
forall action. AvatarProps action
defaultAvatarProps
    { avatarSrc = "https://github.com/dmjio.png"
    , avatarAlt = "@dmjio"
    , avatarSize = Large
    }
  , AvatarProps action -> View model action
forall action model. AvatarProps action -> View model action
avatar_ AvatarProps action
forall action. AvatarProps action
defaultAvatarProps
    { avatarSrc = "https://github.com/dmjio.png"
    , avatarAlt = "@dmjio"
    , avatarSquare = True
    }
  , Size
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Size
-> [Attribute action] -> [View model action] -> View model action
avatarGroup_ Size
DefaultSize [] [View model action]
forall {model} {action}. [View model action]
members
  , Size
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Size
-> [Attribute action] -> [View model action] -> View model action
avatarGroup_ Size
Large [] [View model action]
forall {model} {action}. [View model action]
members
  , Size
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Size
-> [Attribute action] -> [View model action] -> View model action
avatarGroup_ Size
Large
    [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"hover:space-x-1 [&_img]:transition-all [&_img]:ease-in-out [&_img]:duration-300" ]
    [View model action]
forall {model} {action}. [View model action]
members
  ]
  where
    members :: [View model action]
members =
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.img_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.src_ (MisoString
"https://github.com/" MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
user MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
".png"), MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.alt_ (MisoString
"@" MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
user) ]
      | MisoString
user <- [ MisoString
"dmjio", MisoString
"shadcn", MisoString
"adamwathan", MisoString
"hunvreus" ]
      ]
-----------------------------------------------------------------------------
avatarCodeSample :: View model action
avatarCodeSample :: forall model action. View model action
avatarCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyAvatar (avatarSample) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Types
  import           Miso.UI.Avatar
  -----------------------------------------------------------------------------
  avatarSample :: View model action
  avatarSample =
    H.div_
    [ P.class_ "flex flex-row flex-wrap items-center gap-4" ]
    [ avatar_ defaultAvatarProps
      { avatarSrc = "https://github.com/dmjio.png"
      , avatarAlt = "@dmjio"
      }
    , avatarFallback_ [] [ "CN" ]
    , avatar_ defaultAvatarProps
      { avatarSrc = "https://github.com/dmjio.png"
      , avatarAlt = "@dmjio"
      , avatarSize = Large
      }
    , avatar_ defaultAvatarProps
      { avatarSrc = "https://github.com/dmjio.png"
      , avatarAlt = "@dmjio"
      , avatarSquare = True
      }
    , avatarGroup_ DefaultSize [] members
    , avatarGroup_ Large [] members
    , avatarGroup_ Large
      [ P.class_ "hover:space-x-1 [&_img]:transition-all [&_img]:ease-in-out [&_img]:duration-300" ]
      members
    ]
    where
      members =
        [ H.img_ [ P.src_ ("https://github.com/" <> user <> ".png"), P.alt_ ("@" <> user) ]
        | user <- [ "dmjio", "shadcn", "adamwathan", "hunvreus" ]
        ]
  """
-----------------------------------------------------------------------------
avatarPropsApi :: View model action
avatarPropsApi :: forall model action. View model action
avatarPropsApi =
  View model action
"""
  -- | Props for 'avatar_'
  data AvatarProps action
    = AvatarProps
    { avatarSrc :: MisoString
    , avatarAlt :: MisoString
    , avatarSize :: Size
      -- ^ 'DefaultSize' (@size-8@) or 'Large' (@size-12@)
    , avatarSquare :: Bool
      -- ^ @rounded-lg@ instead of @rounded-full@
    , avatarClasses :: [MisoString]
      -- ^ Extra classes appended to the @img@
    , avatarAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: small round avatar
  defaultAvatarProps :: AvatarProps action
  defaultAvatarProps
    = AvatarProps
    { avatarSrc = ""
    , avatarAlt = ""
    , avatarSize = DefaultSize
    , avatarSquare = False
    , avatarClasses = []
    , avatarAttrs = []
    }
  """
-----------------------------------------------------------------------------