-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Skeleton
  ( -- ** Props
    SkeletonProps (..)
  , defaultSkeletonProps
    -- ** Views
  , skeleton_
    -- ** Samples
  , skeletonSample
  , skeletonCodeSample
  , skeletonPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
-- | Props for 'skeleton_'
data SkeletonProps action
  = SkeletonProps
  { forall action. SkeletonProps action -> Bool
skeletonCircle :: Bool
    -- ^ Round skeleton (e.g. avatar placeholder) instead of rounded rectangle
  , forall action. SkeletonProps action -> [MisoString]
skeletonClasses :: [MisoString]
    -- ^ Size the skeleton with utility classes (e.g. @h-4 w-[150px]@)
  , forall action. SkeletonProps action -> [Attribute action]
skeletonAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: rounded rectangle
defaultSkeletonProps :: SkeletonProps action
defaultSkeletonProps :: forall action. SkeletonProps action
defaultSkeletonProps
  = SkeletonProps
  { skeletonCircle :: Bool
skeletonCircle = Bool
False
  , skeletonClasses :: [MisoString]
skeletonClasses = []
  , skeletonAttrs :: [Attribute action]
skeletonAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/skeleton/ Skeleton>, driven by 'SkeletonProps'
skeleton_ :: SkeletonProps action -> View model action
skeleton_ :: forall action model. SkeletonProps action -> View model action
skeleton_ SkeletonProps {Bool
[MisoString]
[Attribute action]
skeletonCircle :: forall action. SkeletonProps action -> Bool
skeletonClasses :: forall action. SkeletonProps action -> [MisoString]
skeletonAttrs :: forall action. SkeletonProps action -> [Attribute action]
skeletonCircle :: Bool
skeletonClasses :: [MisoString]
skeletonAttrs :: [Attribute action]
..} =
  [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
"bg-accent", MisoString
"animate-pulse" ]
        [MisoString] -> [MisoString] -> [MisoString]
forall a. [a] -> [a] -> [a]
++ [ if Bool
skeletonCircle then MisoString
"rounded-full" else MisoString
"rounded-md" ]
        [MisoString] -> [MisoString] -> [MisoString]
forall a. [a] -> [a] -> [a]
++ [MisoString]
skeletonClasses
      )
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
skeletonAttrs
    ) []
-----------------------------------------------------------------------------
skeletonSample :: View model action
skeletonSample :: forall model action. View model action
skeletonSample =
  [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-4" ]
  [ [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 items-center gap-4" ]
    [ SkeletonProps action -> View model action
forall action model. SkeletonProps action -> View model action
skeleton_ SkeletonProps action
forall action. SkeletonProps action
defaultSkeletonProps
      { skeletonCircle = True
      , skeletonClasses = [ "size-10", "shrink-0" ]
      }
    , [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
"grid gap-2" ]
      [ SkeletonProps action -> View model action
forall action model. SkeletonProps action -> View model action
skeleton_ SkeletonProps action
forall action. SkeletonProps action
defaultSkeletonProps { skeletonClasses = [ "h-4", "w-[150px]" ] }
      , SkeletonProps action -> View model action
forall action model. SkeletonProps action -> View model action
skeleton_ SkeletonProps action
forall action. SkeletonProps action
defaultSkeletonProps { skeletonClasses = [ "h-4", "w-[100px]" ] }
      ]
    ]
  , [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 max-sm:flex-col gap-4 w-full" ]
    [ View model action
forall model action. View model action
skeletonCard, View model action
forall model action. View model action
skeletonCard ]
  ]
  where
    skeletonCard :: View model action
skeletonCard =
      [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
"card w-full @md:w-auto @md:min-w-sm" ]
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.header_ []
        [ SkeletonProps action -> View model action
forall action model. SkeletonProps action -> View model action
skeleton_ SkeletonProps action
forall action. SkeletonProps action
defaultSkeletonProps { skeletonClasses = [ "h-4", "w-2/3" ] }
        , SkeletonProps action -> View model action
forall action model. SkeletonProps action -> View model action
skeleton_ SkeletonProps action
forall action. SkeletonProps action
defaultSkeletonProps { skeletonClasses = [ "h-4", "w-1/2" ] }
        ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.section_ []
        [ SkeletonProps action -> View model action
forall action model. SkeletonProps action -> View model action
skeleton_ SkeletonProps action
forall action. SkeletonProps action
defaultSkeletonProps { skeletonClasses = [ "aspect-square", "w-full" ] }
        ]
      ]
-----------------------------------------------------------------------------
skeletonCodeSample :: View model action
skeletonCodeSample :: forall model action. View model action
skeletonCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MySkeleton (skeletonSample) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Skeleton
  -----------------------------------------------------------------------------
  skeletonSample :: View model action
  skeletonSample =
    H.div_
    [ P.class_ "flex flex-col gap-4" ]
    [ H.div_
      [ P.class_ "flex items-center gap-4" ]
      [ skeleton_ defaultSkeletonProps
        { skeletonCircle = True
        , skeletonClasses = [ "size-10", "shrink-0" ]
        }
      , H.div_
        [ P.class_ "grid gap-2" ]
        [ skeleton_ defaultSkeletonProps { skeletonClasses = [ "h-4", "w-[150px]" ] }
        , skeleton_ defaultSkeletonProps { skeletonClasses = [ "h-4", "w-[100px]" ] }
        ]
      ]
    , H.div_
      [ P.class_ "flex max-sm:flex-col gap-4 w-full" ]
      [ skeletonCard, skeletonCard ]
    ]
    where
      skeletonCard =
        H.div_
        [ P.class_ "card w-full @md:w-auto @md:min-w-sm" ]
        [ H.header_ []
          [ skeleton_ defaultSkeletonProps { skeletonClasses = [ "h-4", "w-2/3" ] }
          , skeleton_ defaultSkeletonProps { skeletonClasses = [ "h-4", "w-1/2" ] }
          ]
        , H.section_ []
          [ skeleton_ defaultSkeletonProps { skeletonClasses = [ "aspect-square", "w-full" ] }
          ]
        ]
  """
-----------------------------------------------------------------------------
skeletonPropsApi :: View model action
skeletonPropsApi :: forall model action. View model action
skeletonPropsApi =
  View model action
"""
  -- | Props for 'skeleton_'
  data SkeletonProps action
    = SkeletonProps
    { skeletonCircle :: Bool
      -- ^ Round skeleton (e.g. avatar placeholder) instead of rounded rectangle
    , skeletonClasses :: [MisoString]
      -- ^ Size the skeleton with utility classes (e.g. @h-4 w-[150px]@)
    , skeletonAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: rounded rectangle
  defaultSkeletonProps :: SkeletonProps action
  defaultSkeletonProps
    = SkeletonProps
    { skeletonCircle = False
    , skeletonClasses = []
    , skeletonAttrs = []
    }
  """
-----------------------------------------------------------------------------