MonsterUI/docs/guides/Layout.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "09a2b6fa",
   "metadata": {},
   "source": [
    "# MonterUI Page Layout Guide \n",
    "\n",
    "This guide will discuss 3 tools for laying out your app pages, Grid, Flexbox, and Columns.  This page will discuss the strengths and when to use each individually, and then a section for how to combine them for more complex layouts at the end.\n",
    "\n",
    "> Note:  This guide is designed to get you started building layouts quickly, not to teach you all the details needed to build every possible custom layout with pixel-perfect control.  To get more detailed and lower-level control, explore the tailwind docs.\n",
    "\n",
    "\n",
    "This guide is for creating flexible layouts you envision, but does not discuss responsiveness to make different layouts that are both mobile and desktop friendly.  Stay tunes for a responsiveness guide that will help with that!"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3bdf365b",
   "metadata": {},
   "source": [
    "# Grid\n",
    "\n",
    "Grids are best for regular predictable layouts with lots of the same shape of things that may need to change a lot for different screen sizes.  I think the best way to see what it can do is to see a bunch of examples, so here they are!"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7d1bc6e0",
   "metadata": {},
   "source": [
    "## Minimal Image Cards\n",
    "\n",
    "This is a minimal example of a grid that just shows image and text.  This is the foundation for many more complex layouts so make sure to understand what's going on here first before moving on!\n",
    "\n",
    "A grid lays things out in a...grid.  As you can see, we have evenly sized cards by default."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "8b6ef3ea",
   "metadata": {
    "scrolled": true
   },
   "outputs": [],
   "source": [
    "def picsum_img(seed): return Img(src=f'https://picsum.photos/300/200?random={seed}')\n",
    "   \n",
    "Grid(*[Card(picsum_img(i),P(f\"Image {i}\")) for i in range(6)])"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c35376e2",
   "metadata": {},
   "source": [
    "## Dashboard Example"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a7c9149c",
   "metadata": {},
   "source": [
    "However, they don't have to be evenly sized!  By providing `row-span-{int}` and `col-span-{int}` we can control how many rows or columns specific grid elements take up.  By doing this, we can create a grid that has lots of different shapes and types of elements.\n",
    "\n",
    "Let's look at a dashboard layout at an examples of this."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 54,
   "id": "5abd8bd1",
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"http://localhost:8000/_WvNL2TY3R0K8wGkaRFZ6GQ\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
       "        let frame = this;\n",
       "        window.addEventListener('message', function(e) {\n",
       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
       "        }, false);\n",
       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 54,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def StatCard(title, value, color='primary'):\n",
    "    \"A card with a statistics.  Since there is no row/col span class it will take up 1 slot\"\n",
    "    return Card(P(title, cls=TextPresets.muted_sm), H3(value, cls=f'text-{color}'),)\n",
    "\n",
    "stats = [StatCard(*data) for data in [\n",
    "                (\"Total Users\", \"1,234\",   \"blue-600\"),\n",
    "                (\"Active Now\",  \"342\",     \"green-600\"),\n",
    "                (\"Revenue\",     \"$45,678\", \"purple-600\"),\n",
    "                (\"Conversion\",  \"2.4%\",    \"amber-600\")]]\n",
    "\n",
    "def ChartCard(title): \n",
    "    \"A card for a chart.  col-span-2 means it will take up 2 columns\"\n",
    "    return Div(cls=\"col-span-2\")( \n",
    "        Card(H3(title),Div(\"Chart Goes Here\", cls=\"h-64 uk-background-muted\")))\n",
    "chart_cards = [ChartCard(title) for title in (\"Monthly Revenue\", \"User Growth\")]\n",
    "\n",
    "\n",
    "sidebar = Form(\n",
    "    H3(\"SideBar\"),\n",
    "    LabelRange(\"Range For Filters\", min=0, max=100),\n",
    "    LabelInput(\"A search Bar\"),\n",
    "    LabelSelect(map(Option, [\"Product Line A\", \"Product Line B\", \"Product Line C\", \"Product Line D\"]),\n",
    "                     label=\"Choose Product Line\"),\n",
    "    LabelCheckboxX(\"Include Inactive Users\"),\n",
    "    LabelCheckboxX(\"Include Users without order\"),\n",
    "    LabelCheckboxX(\"Include Users without email\"),\n",
    "    # This sidebar will take up 2 rows b/c of row-span-2\n",
    "    cls='row-span-2 space-y-5'\n",
    ")\n",
    "\n",
    "Container(Grid(sidebar, *stats, *chart_cards, cols=5))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cc9bb132",
   "metadata": {},
   "source": [
    "# Flexbox"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1dcb8075",
   "metadata": {},
   "source": [
    "Using Grid for the overall layout, and flex for the individual elements is a powerful pattern.  With `MonsterUI` you can do quite a bit without knowing anything about flexbox, which is what will be taught here.  \n",
    "\n",
    "However, flexbox is well worth learning about it in more detail.  You will run into situations where you need more flexbox knowledge than is covered here to build your vision.  Thankfully you can get that knowledge by playing a [fantastic tutorial game called FlexBox Froggy](https://flexboxfroggy.com/)!"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d10557e5",
   "metadata": {},
   "source": [
    "## Forms\n",
    "\n",
    "Often you want to stack things horizontally.  You can use the `DivHStacked` component to do this.\n",
    "\n",
    "`DivHStacked` is a helper function for flexbox and creates a div with these classes by default `cls=(FlexT.block, FlexT.row, FlexT.middle, 'space-x-4')`.  "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 71,
   "id": "eaa39f3a",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"http://localhost:8000/__LtKiA4BQ_mTEOe1cbj0tg\" style=\"width: 100%; height: auto; border: none;\" onload=\"{\n",
       "        let frame = this;\n",
       "        window.addEventListener('message', function(e) {\n",
       "            if (e.source !== frame.contentWindow) return; // Only proceed if the message is from this iframe\n",
       "            if (e.data.height) frame.style.height = (e.data.height+1) + 'px';\n",
       "        }, false);\n",
       "    }\" allow=\"accelerometer; autoplay; camera; clipboard-read; clipboard-write; display-capture; encrypted-media; fullscreen; gamepad; geolocation; gyroscope; hid; identity-credentials-get; idle-detection; magnetometer; microphone; midi; payment; picture-in-picture; publickey-credentials-get; screen-wake-lock; serial; usb; web-share; xr-spatial-tracking\"></iframe> "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 71,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def InputGroup(label, placeholder='', button_text='Submit', cls=''):\n",
    "    # Div H Stacked makes the label and input show up on the same row instead of putting the input on a newline\n",
    "    return DivHStacked(\n",
    "        FormLabel(label, cls='whitespace-nowrap'),\n",
    "        Input(placeholder=placeholder))\n",
    "\n",
    "Container(\n",
    "    H3(\"Form with Input Groups\"),\n",
    "    Form(cls='space-y-4')(\n",
    "        InputGroup(\"Search Users\", \"Enter username...\"),\n",
    "        InputGroup(\"Filter Tags\", \"Add tags...\", \"Add\"),\n",
    "        InputGroup(\"Email List\", \"Enter email...\", \"Subscribe\"),\n",
    "        Div(*(  Button(UkIcon(icon, cls='mr-2'), text) for icon, text in [(\"rocket\", \"Submit\"), (\"circle-x\", \"Cancel\")]), cls='space-x-4')))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "c4afd0d0",
   "metadata": {},
   "source": [
    "## Avatar "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9154ae8f",
   "metadata": {},
   "source": [
    "You can use this same `DivHStacked` to align things like text next to images.  And you can use `DivVStacked` to stack things vertically to create design structures you like.  `DivVStacked` works by using `cls=(FlexT.block,FlexT.column,FlexT.middle)`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 170,
   "id": "f782c6ca",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "```html\n",
       "<div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<span class=\"relative flex h-20 w-20 shrink-0 overflow-hidden rounded-full bg-accent\"><img alt=\"Avatar\" loading=\"lazy\" src=\"https://api.dicebear.com/8.x/lorelei/svg?seed=user\" class=\"aspect-square h-20 w-20\"></span>  <div class=\"uk-flex uk-flex-column uk-flex-middle \">\n",
       "    <p class=\"uk-text-large \">John Doe</p>\n",
       "    <p class=\"uk-text-muted \">john@example.com</p>\n",
       "    <p class=\"uk-text-muted \">+1-123-456-7890</p>\n",
       "  </div>\n",
       "</div>\n",
       "\n",
       "```"
      ],
      "text/plain": [
       "div((span((img((),{'alt': 'Avatar', 'loading': 'lazy', 'src': 'https://api.dicebear.com/8.x/lorelei/svg?seed=user', 'class': 'aspect-square h-20 w-20'}),),{'class': 'relative flex h-20 w-20 shrink-0 overflow-hidden rounded-full bg-accent'}), div((p(('John Doe',),{'class': 'uk-text-large '}), p(('john@example.com',),{'class': 'uk-text-muted '}), p(('+1-123-456-7890',),{'class': 'uk-text-muted '})),{'class': 'uk-flex uk-flex-column uk-flex-middle '})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'})"
      ]
     },
     "execution_count": 170,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# DivHStacked makes the a single row so text is to on same line as avatar\n",
    "DivHStacked(\n",
    "    DiceBearAvatar(\"user\"), \n",
    "    # DivVStacked stacks things vertically together and centers it with flex\n",
    "    DivVStacked(\n",
    "        P(\"John Doe\", cls=TextT.lg),\n",
    "        P(\"john@example.com\", cls=TextT.muted), \n",
    "        P(\"+1-123-456-7890\"), cls=TextT.muted))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6234fdf8",
   "metadata": {},
   "source": [
    "## Pricing Card\n",
    "\n",
    "These can be combined with icons and other styling to create larger components like a pricing card."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 165,
   "id": "f1846dc1",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "```html\n",
       "<div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
       "  <div class=\"uk-card \">\n",
       "    <div class=\"uk-card-body space-y-6\">\n",
       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-1\">\n",
       "        <h2 class=\"uk-h2 \">Pro Plan</h2>\n",
       "        <h3 class=\"uk-h3 text-primary\">$99</h3>\n",
       "        <p class=\"uk-text-muted \">per month</p>\n",
       "      </div>\n",
       "      <ul class=\"space-y-4\">\n",
       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Unlimited users</li>\n",
       "        </div>\n",
       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>24/7 priority support</li>\n",
       "        </div>\n",
       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Custom branding options</li>\n",
       "        </div>\n",
       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Advanced analytics dashboard</li>\n",
       "        </div>\n",
       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Full API access</li>\n",
       "        </div>\n",
       "        <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<uk-icon icon=\"check\" class=\"text-green-500 mr-2\"></uk-icon>          <li>Priority request queue</li>\n",
       "        </div>\n",
       "      </ul>\n",
       "<button type=\"submit\" class=\"uk-btn uk-btn-primary w-full\">Subscribe Now</button>    </div>\n",
       "  </div>\n",
       "</div>\n",
       "\n",
       "```"
      ],
      "text/plain": [
       "div((div((div((div((h2(('Pro Plan',),{'class': 'uk-h2 '}), h3(('$99',),{'class': 'uk-h3 text-primary'}), p(('per month',),{'class': 'uk-text-muted '})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-1'}), ul((div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Unlimited users',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('24/7 priority support',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Custom branding options',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Advanced analytics dashboard',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Full API access',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'}), div((uk-icon((),{'icon': 'check', 'class': 'text-green-500 mr-2'}), li(('Priority request queue',),{})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'})),{'class': 'space-y-4'}), button(('Subscribe Now',),{'type': 'submit', 'class': 'uk-btn uk-btn-primary w-full'})),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}),),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'})"
      ]
     },
     "execution_count": 165,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "features = [\n",
    "    \"Unlimited users\",\n",
    "    \"24/7 priority support\",\n",
    "    \"Custom branding options\", \n",
    "    \"Advanced analytics dashboard\",\n",
    "    \"Full API access\",\n",
    "    \"Priority request queue\"\n",
    "]\n",
    "\n",
    "\n",
    "def PricingCard(plan, price, features):\n",
    "    \"Create a polished pricing card with consistent styling\"\n",
    "    return Card(\n",
    "        DivVStacked( # Center and veritcally stack the plan name and price\n",
    "            H2(plan),\n",
    "            H3(price, cls='text-primary'),\n",
    "            P('per month',cls=TextT.muted),\n",
    "            cls='space-y-1'),\n",
    "        # DivHStacked makes green check and feature Li show up on same row instead of newline\n",
    "        Ul(*[DivHStacked(UkIcon('check', cls='text-green-500 mr-2'), Li(feature)) for feature in features], \n",
    "           cls='space-y-4'),\n",
    "        Button(\"Subscribe Now\", cls=(ButtonT.primary, 'w-full')))\n",
    "\n",
    "DivVStacked(PricingCard(\"Pro Plan\", \"$99\", features))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ddf9cf78",
   "metadata": {},
   "source": [
    "## Footer\n",
    "\n",
    "Or you can combine things to make advanced footers that have titles, organized links, and icons!\n",
    "\n",
    "In this example we add another flex helper function, `DivFullySpaced`.  `DivFullySpaced` is a flex class that puts as much space between items as possible"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 176,
   "id": "ee79e8cf",
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "```html\n",
       "<div class=\"uk-container bg-gray-50 py-12\">\n",
       "  <div class=\"space-y-8\">\n",
       "    <div class=\"uk-flex uk-flex-between uk-flex-middle w-full\">\n",
       "      <h3 class=\"uk-h3 \">Company Name</h3>\n",
       "      <div class=\"uk-flex uk-flex-row uk-flex-middle space-x-4\">\n",
       "<uk-icon icon=\"twitter\" class=\"uk-text-lead\"></uk-icon><uk-icon icon=\"facebook\" class=\"uk-text-lead\"></uk-icon><uk-icon icon=\"github\" class=\"uk-text-lead\"></uk-icon><uk-icon icon=\"linkedin\" class=\"uk-text-lead\"></uk-icon>      </div>\n",
       "    </div>\n",
       "<hr class=\"my-4 h-[2px] w-full bg-secondary\">    <div class=\"uk-flex uk-flex-between uk-flex-middle w-full\">\n",
       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
       "        <h4 class=\"uk-h4 \">Company</h4>\n",
       "<a href=\"#about\" class=\"uk-text-muted\">About</a><a href=\"#blog\" class=\"uk-text-muted\">Blog</a><a href=\"#careers\" class=\"uk-text-muted\">Careers</a><a href=\"#press-kit\" class=\"uk-text-muted\">Press Kit</a>      </div>\n",
       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
       "        <h4 class=\"uk-h4 \">Resources</h4>\n",
       "<a href=\"#documentation\" class=\"uk-text-muted\">Documentation</a><a href=\"#help-center\" class=\"uk-text-muted\">Help Center</a><a href=\"#status\" class=\"uk-text-muted\">Status</a><a href=\"#contact-sales\" class=\"uk-text-muted\">Contact Sales</a>      </div>\n",
       "      <div class=\"uk-flex uk-flex-column uk-flex-middle space-y-4\">\n",
       "        <h4 class=\"uk-h4 \">Legal</h4>\n",
       "<a href=\"#terms-of-service\" class=\"uk-text-muted\">Terms of Service</a><a href=\"#privacy-policy\" class=\"uk-text-muted\">Privacy Policy</a><a href=\"#cookie-settings\" class=\"uk-text-muted\">Cookie Settings</a><a href=\"#accessibility\" class=\"uk-text-muted\">Accessibility</a>      </div>\n",
       "    </div>\n",
       "<hr class=\"my-4 h-[2px] w-full bg-secondary\">    <p class=\"uk-text-small uk-text-lead\">© 2024 Company Name. All rights reserved.</p>\n",
       "  </div>\n",
       "</div>\n",
       "\n",
       "```"
      ],
      "text/plain": [
       "div((div((div((h3(('Company Name',),{'class': 'uk-h3 '}), div((uk-icon((),{'icon': 'twitter', 'class': <TextT.lead: 'uk-text-lead'>}), uk-icon((),{'icon': 'facebook', 'class': <TextT.lead: 'uk-text-lead'>}), uk-icon((),{'icon': 'github', 'class': <TextT.lead: 'uk-text-lead'>}), uk-icon((),{'icon': 'linkedin', 'class': <TextT.lead: 'uk-text-lead'>})),{'class': 'uk-flex uk-flex-row uk-flex-middle space-x-4'})),{'class': 'uk-flex uk-flex-between uk-flex-middle w-full'}), hr((),{'class': 'my-4 h-[2px] w-full bg-secondary'}), div((div((h4(('Company',),{'class': 'uk-h4 '}), a(('About',),{'href': '#about', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Blog',),{'href': '#blog', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Careers',),{'href': '#careers', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Press Kit',),{'href': '#press-kit', 'class': <TextT.muted: 'uk-text-muted'>})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'}), div((h4(('Resources',),{'class': 'uk-h4 '}), a(('Documentation',),{'href': '#documentation', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Help Center',),{'href': '#help-center', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Status',),{'href': '#status', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Contact Sales',),{'href': '#contact-sales', 'class': <TextT.muted: 'uk-text-muted'>})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'}), div((h4(('Legal',),{'class': 'uk-h4 '}), a(('Terms of Service',),{'href': '#terms-of-service', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Privacy Policy',),{'href': '#privacy-policy', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Cookie Settings',),{'href': '#cookie-settings', 'class': <TextT.muted: 'uk-text-muted'>}), a(('Accessibility',),{'href': '#accessibility', 'class': <TextT.muted: 'uk-text-muted'>})),{'class': 'uk-flex uk-flex-column uk-flex-middle space-y-4'})),{'class': 'uk-flex uk-flex-between uk-flex-middle w-full'}), hr((),{'class': 'my-4 h-[2px] w-full bg-secondary'}), p(('© 2024 Company Name. All rights reserved.',),{'class': 'uk-text-small uk-text-lead'})),{'class': 'space-y-8'}),),{'class': 'uk-container bg-gray-50 py-12'})"
      ]
     },
     "execution_count": 176,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "def FooterLinkGroup(title, links):\n",
    "    # DivVStacked centers and makes title and each link stack vertically\n",
    "    return DivVStacked(\n",
    "        H4(title),\n",
    "        *[A(text, href=f\"#{text.lower().replace(' ', '-')}\", cls=TextT.muted)  for text in links])\n",
    "\n",
    "company = [\"About\", \"Blog\", \"Careers\", \"Press Kit\"]\n",
    "resource = [\"Documentation\", \"Help Center\", \"Status\", \"Contact Sales\"]\n",
    "legal = [\"Terms of Service\", \"Privacy Policy\", \"Cookie Settings\", \"Accessibility\"]\n",
    "\n",
    "Container(cls='uk-background-muted py-12')(Div(\n",
    "    # Company Name and social icons will be on the same row with as much sapce between as possible\n",
    "    DivFullySpaced( \n",
    "        H3(\"Company Name\"),\n",
    "        # DivHStacked makes the icons be on the same row in a group\n",
    "        DivHStacked(*[UkIcon(icon, cls=TextT.lead) for icon in \n",
    "                      ['twitter', 'facebook', 'github', 'linkedin']])),\n",
    "    DividerLine(),\n",
    "    DivFullySpaced( # Each child will be spread out as much as possible based on number of children\n",
    "        FooterLinkGroup(\"Company\",   company),\n",
    "        FooterLinkGroup(\"Resources\", resource),\n",
    "        FooterLinkGroup(\"Legal\",     legal)), \n",
    "    DividerLine(),\n",
    "    P(\"© 2024 Company Name. All rights reserved.\", cls=TextT.lead+TextT.sm),\n",
    "    cls='space-y-8 p-8'))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "bb311899",
   "metadata": {},
   "source": [
    "## Dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "1e29f9de",
   "metadata": {},
   "outputs": [],
   "source": [
    "def StatsCard(label, value, change):\n",
    "    color = 'green' if change[0] == '+' else 'red'\n",
    "    return Card(DivVStacked( # Stacks vertically and centers all elements\n",
    "        P(label, cls=TextPresets.muted_sm),\n",
    "        H3(value),\n",
    "        P(f\"{change}% from last month\", cls=f\"text-{color}-600 text-sm\")))\n",
    "    \n",
    "def RecentActivity(user, action, time):\n",
    "    return DivHStacked( # Makes Avatar and text be on same row\n",
    "        DiceBearAvatar(user, h=8, w=8),\n",
    "        P(f\"{user} {action}\", cls=\"flex-1\"),\n",
    "        P(time, cls=TextPresets.muted_sm))\n",
    "    \n",
    "DivVStacked( # Centers the entire dashboard layout\n",
    "    # Page header\n",
    "    DivVStacked( # Stacks vertically and centers the title/subtitle\n",
    "        H2(\"Welcome back, Isaac!\"),\n",
    "        P(\"Here's what's happening with your projects today.\",cls=TextT.muted)),\n",
    "\n",
    "    # DivHStacked puts all the stats cards on the same row\n",
    "    DivHStacked(*(StatsCard(label, value, change)\n",
    "        for label, value, change in [\n",
    "            (\"Total Projects\", \"12\", \"+2.5\"),\n",
    "            (\"Hours Logged\", \"164\", \"+12.3\"),\n",
    "            (\"Tasks Complete\", \"64%\", \"-4.1\"),\n",
    "            (\"Team Velocity\", \"23\", \"+8.4\")]\n",
    "    )),\n",
    "\n",
    "    # Recent activity\n",
    "    Card(*(RecentActivity(user, action, time) \n",
    "        for user, action, time in [\n",
    "            (\"Sarah Chen\", \"completed Project Alpha deployment\", \"2h ago\"),\n",
    "            (\"James Wilson\", \"commented on Project Beta\", \"4h ago\"),\n",
    "            (\"Maria Garcia\", \"uploaded new design files\", \"6h ago\"),\n",
    "            (\"Alex Kumar\", \"started Sprint Planning\", \"8h ago\")]),\n",
    "        header=H3(\"Recent Activity\"),\n",
    "    ),\n",
    "    cls=\"space-y-6\"\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "edd8dc07",
   "metadata": {},
   "source": [
    "## Columns\n",
    "\n",
    "Columns are a great for sections that have a lot of text."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 181,
   "id": "6dfbd634",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "```html\n",
       "<div class=\"uk-container mt-5 uk-container-xlarge\">\n",
       "  <h1 class=\"uk-h1 text-center mb-8\">Lorem Ipsum</h1>\n",
       "  <div class=\"columns-2 gap-12\">\n",
       "    <p class=\"uk-paragraph \">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do \n",
       "        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \n",
       "        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \n",
       "        ex ea commodo consequat.</p>\n",
       "    <div class=\"uk-flex uk-flex-column uk-flex-middle uk-flex-center mt-8\">\n",
       "      <p class=\"uk-text-large uk-text-bold uk-text-center uk-text-italic text-primary\">Duis aute irure dolor in reprehenderit in voluptate velit esse \n",
       "            cillum dolore eu fugiat nulla pariatur.</p>\n",
       "    </div>\n",
       "    <p class=\"uk-paragraph \">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui \n",
       "        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde \n",
       "        omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>\n",
       "    <p class=\"uk-paragraph \">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit \n",
       "        aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem \n",
       "        sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.</p>\n",
       "  </div>\n",
       "</div>\n",
       "\n",
       "```"
      ],
      "text/plain": [
       "div((h1(('Lorem Ipsum',),{'class': 'uk-h1 text-center mb-8'}), div((p(('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do \\n        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \\n        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \\n        ex ea commodo consequat.',),{'class': 'uk-paragraph '}), div((p(('Duis aute irure dolor in reprehenderit in voluptate velit esse \\n            cillum dolore eu fugiat nulla pariatur.',),{'class': 'uk-text-large uk-text-bold uk-text-center uk-text-italic text-primary'}),),{'class': 'uk-flex uk-flex-column uk-flex-middle uk-flex-center mt-8'}), p(('Excepteur sint occaecat cupidatat non proident, sunt in culpa qui \\n        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde \\n        omnis iste natus error sit voluptatem accusantium doloremque laudantium.',),{'class': 'uk-paragraph '}), p(('Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit \\n        aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem \\n        sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.',),{'class': 'uk-paragraph '})),{'class': 'columns-2 gap-12'})),{'class': 'uk-container mt-5 uk-container-xlarge'})"
      ]
     },
     "execution_count": 181,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "Container(\n",
    "    H1(\"Lorem Ipsum\", cls=\"text-center mb-8\"),\n",
    "\n",
    "    # Use 2 columns for the main content\n",
    "    Div(cls=\"columns-2 gap-12\")(\n",
    "        P(\"\"\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do \n",
    "        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad \n",
    "        minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \n",
    "        ex ea commodo consequat.\"\"\"),\n",
    "\n",
    "        DivCentered(cls='mt-8')(\n",
    "            P(\"\"\"Duis aute irure dolor in reprehenderit in voluptate velit esse \n",
    "            cillum dolore eu fugiat nulla pariatur.\"\"\", \n",
    "                   cls=(TextT.lg, TextT.bold, TextT.center, TextT.italic, \"text-primary\"))),\n",
    "\n",
    "        P(\"\"\"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui \n",
    "        officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde \n",
    "        omnis iste natus error sit voluptatem accusantium doloremque laudantium.\"\"\"),\n",
    "\n",
    "        P(\"\"\"Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit \n",
    "        aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem \n",
    "        sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor.\"\"\")))"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}