Add new Card component

package.json

@@ -13,7 +13,7 @@
     "start:unisonLocal": "webpack serve --mode development --port 1234 --config webpack.unisonLocal.dev.js",
     "start:unisonShare": "webpack serve --mode development --port 1234 --config webpack.unisonShare.dev.js",
     "test": "elm-test",
-    "review": "elm-review  --ignore-files src/UnisonShare/Page/Catalog.elm"
+    "review": "elm-review  --ignore-files src/UI/Card.elm"
   },
   "bugs": {
     "url": "https://github.com/unisonweb/codebase-ui/issues"

src/UI/Card.elm

@@ -0,0 +1,44 @@
+module UI.Card exposing (..)
+
+import Html exposing (Html, div, text)
+import Html.Attributes exposing (class)
+
+
+type alias Card msg =
+    { title : Maybe String, items : List (Html msg) }
+
+
+card : List (Html msg) -> Card msg
+card items =
+    { title = Nothing, items = items }
+
+
+titled : String -> List (Html msg) -> Card msg
+titled title items =
+    { title = Just title, items = items }
+
+
+withTitle : String -> Card msg -> Card msg
+withTitle title card_ =
+    { card_ | title = Just title }
+
+
+withItems : List (Html msg) -> Card msg -> Card msg
+withItems items card_ =
+    { card_ | items = items }
+
+
+withItem : Html msg -> Card msg -> Card msg
+withItem item card_ =
+    { card_ | items = card_.items ++ [ item ] }
+
+
+view : Card msg -> Html msg
+view card_ =
+    let
+        items =
+            case card_.title of
+                Just t ->
+                    h3 [ class "card-title" ] [ text t ] :: card_.items
+    in
+    div [ class "card" ] items

src/UnisonShare/Page/Catalog.elm

@@ -4,13 +4,11 @@ import Api
 import Dict exposing (Dict)
 import Env exposing (Env)
 import Html exposing (Html, div, text)
-import Html.Attributes exposing (class)
 import Http
 import Project exposing (ProjectListing)
 import RemoteData exposing (RemoteData(..), WebData)
-import UI
 import UI.AppHeader exposing (AppHeader)
-import UI.Page as Page exposing (Page)
+import UI.Page as Page
 
 
 

src/css/card.css

@@ -0,0 +1,15 @@
+.card {
+  padding: 1rem 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  color: var(--color-card-fg);
+  border-radius: var(--border-radius-base);
+  background: var(--color-card-bg);
+}
+
+.card .card-title {
+  color: var(--color-card-title);
+  text-transform: uppercase;
+  font-size: var(--font-size-medium);
+}

src/css/themes/unison/light.css

@@ -208,7 +208,12 @@
   --color-button-danger-hover-fg: var(--color-gray-lighten-100);
   --color-button-danger-hover-bg: var(--color-pink-2);
 
-  /* Badges */
+  /* Card */
+  --color-card-bg: var(--color-gray-lighten-100);
+  --color-card-fg: var(--color-gray-darken-30);
+  --color-card-title: var(--color-gray-lighten-30);
+
+  /* Badge */
   --color-badge-fg: var(--color-gray-base);
   --color-badge-bg: var(--color-gray-lighten-60);
   --color-badge-border: var(--color-gray-lighten-50);
@@ -220,7 +225,7 @@
   --color-option-badge-bg: var(--color-gray-darken-30);
   --color-option-badge-border: var(--color-transparent);
 
-  /* Tooltips */
+  /* Tooltip */
   --color-tooltip-fg: var(--color-gray-lighten-60);
   --color-tooltip-subtle-fg: var(--color-gray-lighten-20);
   --color-tooltip-bg: var(--color-gray-darken-30);