RubyGems - tailwind_dsl - Versions diffs - 0.0.3 → 0.0.4 - Mend

tailwind_dsl 0.0.3 → 0.0.4

Files changed (2168) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 574d3ce7e5298a88097270102327b55a5b89be6193e250cea95b4dafcf0ec2db
-  data.tar.gz: e81ab5eea249499d2ee91069b07ea92527ae75a0d08f6932ed93ed8b8e68ee99
+  metadata.gz: 44930845db5a1a2455e4401ba03525dfba9c8efb554c4b418f8d2d874749b893
+  data.tar.gz: 86218cc6d27c4eb84d795c3563664724509409df9ea9119aa99627771a829e3c
 SHA512:
-  metadata.gz: ca1aefbfee42b2608c0753768b993d5705fd2590412719c1a87ff54bdeb207b2591f3d0dabb0b86d1306e097f7035b3aa72543400289b166f092b5f16726443a
-  data.tar.gz: 4a080c5b6f8e825489d9571ae3e324d8876869ae8900dfa28f19876af478a1cc2fc46254fcc23bf50817fde2d17adc9af8819b89091bee98026fa0c9989ae658
+  metadata.gz: cfe75290f65ce50885faf30eaeedc5b534ee085c9d0d73fbe56a115a9f922d66e0a084c9b8e783384933b33a280c9d4beb25f6917a063487cfb7ef8db6577fbe
+  data.tar.gz: 4f5a103b7b1de5e665b8d7a35ce70771478c3d2aeb29fc879e551e8c33ca98fa654e67d0e0dc8885150ed78c9e417361035229913f8d60d6fcd420df400fb445

data/.builders/.templates/basic/all-components.txt ADDED Viewed

@@ -0,0 +1,6 @@
+{{#each groups}}
+{{name}}
+{{#each files}}
+  {{file_name_only}}
+{{/each}}
+{{/each}}

data/.builders/.templates/basic/data_shape_dsl.rb ADDED Viewed

@@ -0,0 +1,23 @@
+def action
+{{#each components}}
+  # {{titleize ./component_name}}
+  DataShape
+    .init(:{{./component_name}})
+    .data do
+{{dsl_content}}
+      image                 "https://images.unsplash.com/photo-1606660265514-358ebbadc80d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1575&q=80"
+      brand                 "Brand"
+      welcome_back_message  "Welcome Back"
+      google_label          "Sign in with Google"
+      alternate_label       "or login with email"
+      email_label           "Email Address"
+      password_label        "Password"
+      forgot_password_label "Forget Password?"
+      submit_label          "Login"
+      signup_label          "or sign up"
+    end
+{{/each}}
+end

data/.builders/.templates/basic/tailwind-collections-menu.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tailwind Menu</title>
+</head>
+<body>
+  {{#each groups}}
+    <a href="{{name}}/all.html">{{titleize name}}</a><br>
+  {{/each}}
+</body>
+</html>

data/.builders/blueprint/tailwind.rb CHANGED Viewed

@@ -9,10 +9,11 @@ KManager.model :tailwind, namespace: %i[domain] do
   # endFill=1,0
   table :collections do
-    fields %i[key description default_themes]
+    fields %i[key description default_themes source]
-    row :devdojo, 'DevDojo', %w[blue red green]
-    row :merikui, 'Merikui', %w[black white]
+    row :devdojo    , 'DevDojo'   , %w[blue red green]
+    row :merakiui   , 'Merakiui'  , %w[black white]       , 'https://github.com/merakiui/merakiui'
+    row :start_kit  , 'start_kit' , %w[black white]
   end
   table :component_groups do

data/.builders/boot.rb CHANGED Viewed

@@ -6,39 +6,10 @@ CONFIG_KEY = :tailwind_dsl
 log.kv 'working folder', Dir.pwd
-Handlebars::Helpers.configure do |config|
-  config.helper_config_file = File.join(Gem.loaded_specs['handlebars-helpers'].full_gem_path, '.handlebars_helpers.json')
-  config.string_formatter_config_file = File.join(Gem.loaded_specs['handlebars-helpers'].full_gem_path, '.handlebars_string_formatters.json')
-end
-def camel
-  require 'handlebars/helpers/string_formatting/camel'
-  Handlebars::Helpers::StringFormatting::Camel.new
-end
-def snake
-  require 'handlebars/helpers/string_formatting/snake'
-  Handlebars::Helpers::StringFormatting::Snake.new
-end
-def titleize
-  require 'handlebars/helpers/string_formatting/titleize'
-  Handlebars::Helpers::StringFormatting::Titleize.new
-end
-def pluralize
-  require 'handlebars/helpers/inflection/pluralize'
-  Handlebars::Helpers::Inflection::Pluralize.new
-end
+require_relative '../lib/tailwind_dsl'
-def singularize
-  require 'handlebars/helpers/inflection/singularize'
-  Handlebars::Helpers::Inflection::Singularize.new
-end
-def dasherize
-  require 'handlebars/helpers/string_formatting/dasherize'
-  Handlebars::Helpers::StringFormatting::Dasherize.new
+KConfig.configure do |config|
+  config.handlebars.defaults.add_all_defaults
 end
 def k_builder
@@ -58,6 +29,12 @@ KConfig.configure(CONFIG_KEY) do |config|
   config.target_folders.add(:spec                 , :app, 'spec', 'tailwind_dsl')
   config.target_folders.add(:docs                 , :app, 'docs')
   config.target_folders.add(:builder              , builder_folder)
+  config.target_folders.add(:data                 , base_folder, '.data')
+  config.target_folders.add(:components           , base_folder, '.components')
+  config.target_folders.add(:template_merakiui    , global_template, 'tailwind', 'merakiui')
+  config.target_folders.add(:template_devdojo     , global_template, 'tailwind', 'devdojo')
+  config.target_folders.add(:template_tui         , global_template, 'tailwind', 'tui')
 end
 KConfig.configuration(CONFIG_KEY).debug

data/.builders/generators/domain-model-to-code.rb CHANGED Viewed

@@ -1,3 +1,7 @@
+def snake
+  Cmdlet::Case::Snake.new
+end
 KManager.action :domain_model_to_code do
   action do
     director = KDirector::Dsls::RubyGemDsl
@@ -12,22 +16,26 @@ KManager.action :domain_model_to_code do
         active: true,
         name: :build_domain,
         description: 'Build the domain classes and tests based on the domain model',
-        on_exist: :skip) do
+        on_exist: :overwrite) do
-        domain_model_list = domain_model.take(11)
+        domain_model_list = domain_model #.take(1)
         domain_model_list.each do |code_block|
           if code_block[:block_type] == 'klass'
             klass = code_block[:items].select { |item| item[:type] == 'class' }.first
-            namespaces = snake.parse(klass[:namespace]).to_s.split('::')
+            namespace_parts = (klass[:namespace] || '').to_s.split('::')
+            namespaces = namespace_parts.map { |part|snake.call(part) }
             model = {
               name: klass[:name],
               description: klass[:description],
               namespaces: [:tailwind_dsl] + namespaces,
-              fields: code_block[:items].select { |item| item[:type] == 'field' }.map { |item| { name: item[:name], type: item[:type] } },
+              dry_struct: klass[:dry_struct] || false,
+              fields: code_block[:items].select { |item| item[:type] == 'field' }.map { |item| { name: item[:name], type: item[:type], return_type: item[:return_type] } },
               methods: code_block[:items].select { |item| item[:type] == 'method' }.map { |item| { name: item[:name], type: item[:type] } }
             }
+            puts JSON.pretty_generate(model)
             cd(:lib)
             add(output_file_name(namespaces, klass[:name]), template_file: 'class.rb', model: model)
             cd(:spec)
@@ -37,15 +45,16 @@ KManager.action :domain_model_to_code do
         require_paths = domain_model_list.map { |code_block|
           klass = code_block[:items].select { |item| item[:type] == 'class' }.first
-          namespaces = snake.parse(klass[:namespace]).to_s.split('::')
-          full_namespace = [:tailwind_dsl] + namespaces + [snake.parse(klass[:name])]
+          next if klass.nil?
+          namespaces = snake.call(klass[:namespace]).to_s.split('::')
+          full_namespace = [:tailwind_dsl] + namespaces + [snake.call(klass[:name])]
           full_namespace.join('/')
-        }
+        }.compact
         cd(:lib)
         add('../_.rb', template_file: 'requires.rb', require_paths: require_paths)
-        run_command('rubocop -a')
+        run_command('rubocop -A')
         # puts JSON.pretty_generate(domain_model)
         # add('.gitignore')
@@ -79,7 +88,7 @@ def domain_model
 end
 def output_file_name(namespaces, name, suffix: '', extension: 'rb')
-  name = snake.parse(name)
+  name = snake.call(name)
   file_name = "#{name}#{suffix}.#{extension}"
   file_parts = namespaces.reject(&:empty?)

data/.builders/generators/domain-model.rb CHANGED Viewed

@@ -11,18 +11,19 @@ KManager.action :domain_model do
         group(title: 'Configuration', theme: :style_01)
-        klass(:a1, w: 200, description: 'Configuration container for the Tailwind DSL') do
+        klass(:a1, w: 200) do
           format
-            .header('Configuration', namespace: :config)
+            .header('Configuration', namespace: :config, description: 'Configuration container for the Tailwind DSL')
             .field(:collections       , type: :Collections)      # winter, summer
             .field(:themes            , type: :Themes)           # light, dark, red, blue
             .field(:data_shapes       , type: :DataShapes)       # obj, heading_paragraph_list, image_heading_paragraph_list
             .field(:component_groups  , type: :ComponentGroups)  # nav, footer, header, hero, price
         end
-        klass(:a2, w: 200, description: 'Configuration for collection', note: 'other words could be - brands / set / design / collection') do
+        # A Collection would be better named as a UIKit or DesignSystem
+        klass(:a2, w: 200) do
           format
-            .header('Collection', namespace: :config)
+            .header('Collection', namespace: :config, description: 'Configuration for collection of Tailwind components. AKA uikit / brands / set / design')
             .field(:name, type: :String)
             .field(:description, type: :String)
             .field(:component_groups  , type: :ComponentGroups)  # winter, summer
@@ -45,9 +46,9 @@ KManager.action :domain_model do
             .field(:description, type: :String)
         end
-        klass(:a5, w: 200, description: 'Configuration for component group', note: 'nav, , footer, header, hero, price') do
+        klass(:a5, w: 200) do
           format
-            .header('ComponentGroup', namespace: :config)
+            .header('ComponentGroup', namespace: :config, description: 'Configuration for component group. [nav, footer, header, hero, price]')
             .field(:key, type: :Symbol)
             .field(:name, type: :String)
             .field(:description, type: :String)
@@ -156,6 +157,71 @@ KManager.action :domain_model do
             .method(:data)
             .method(:data_instance)
         end
+        temp_suffix = 'X' # turn this on when generating code to avoid folder name collision
+        # Transformers
+        klass(:c1, w: 200) do
+          format
+            .header('Root'                , namespace: "#{temp_suffix}Transformers::RawComponents",
+                                            description: 'Root container for normalizing the raw Tailwind html in component data structures',
+                                            dry_struct: false)
+            .field(:design_systems        , type: "Types::Strict::Array.of(DesignSystem)")
+        end
+        klass(:c2, w: 200) do
+          format
+            .header('DesignSystem', namespace: "#{temp_suffix}Transformers::RawComponents",
+                                            description: 'DesignSystem represents a collection of Tailwind CSS components that follow a specific design system',
+                                            dry_struct: false)
+            .field(:name                  , type: 'Types::Strict::String')
+            .field(:path                  , type: 'Types::Strict::String')
+            .field(:stats                 , type: 'Types::Strict::Hash')
+            .field(:groups                , type: "Types::Strict::Array.of(Group)")
+        end
+        klass(:c3, w: 200) do
+          format
+            .header('Group'               , namespace: "#{temp_suffix}Transformers::RawComponents",
+                                            description: 'Group represents a collection of Tailwind CSS components withing a named group or category',
+                                            dry_struct: false)
+            .field(:key                   , type: 'Types::Strict::String')
+            .field(:type                  , type: 'Types::Strict::String')
+            .field(:folder                , type: 'Types::Strict::String')
+            .field(:sub_keys              , type: "Types::Array.of(Types::Strict:'Types::Strict::String')")
+            .field(:files                 , type: "Types::Strict::Array.of(SourceFile)")
+        end
+        klass(:c4, w: 200) do
+          format
+            .header('SourceFile'          , namespace: "#{temp_suffix}Transformers::RawComponents",
+                                            description: 'SourceFile represents a list of source files that contain raw Tailwind CSS components',
+                                            dry_struct: false)
+            .field(:name                  , type: 'Types::Strict::String')
+            .field(:file_name             , type: 'Types::Strict::String')
+            .field(:file_name_only        , type: 'Types::Strict::String')
+            .field(:absolute_file         , type: 'Types::Strict::String')
+            .field(:file                  , type: 'Types::Strict::String')
+            .field(:target                , type: "TailwindDsl::#{temp_suffix}Transformers::RawComponents::TargetFile")
+        end
+        klass(:c5, w: 200) do
+          format
+            .header('TargetFile'          , namespace: "#{temp_suffix}Transformers::RawComponents",
+                                            description: 'TargetFile represents each sub_file that can be built from a source file, such as HTML Component, Tailwind Config, Settings and Data Structure',
+                                            dry_struct: false)
+            .field(:html_file             , type: 'Types::Strict::String')
+            .field(:clean_html_file       , type: 'Types::Strict::String')
+            .field(:tailwind_config_file  , type: 'Types::Strict::String')
+            .field(:settings_file         , type: 'Types::Strict::String')
+            .field(:data_file             , type: 'Types::Strict::String')
+            .field(:astro_file            , type: 'Types::Strict::String')
+        end
+        solid(source: :c1, target: :c2, exit_point: :e, entry_point: :w, waypoint: :orthogonal_curved)
+        solid(source: :c2, target: :c3, exit_point: :e, entry_point: :w, waypoint: :orthogonal_curved)
+        solid(source: :c3, target: :c4, exit_point: :e, entry_point: :w, waypoint: :orthogonal_curved)
+        solid(source: :c4, target: :c5, exit_point: :e, entry_point: :w, waypoint: :orthogonal_curved)
       end
       .cd(:docs)
       .save('domain-model.drawio')

data/.builders/generators/project-plan.rb CHANGED Viewed

@@ -10,7 +10,18 @@ KManager.action :project_plan do
         grid_layout(y: 90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
-        todo(title: 'build a or addapt the existing RubyDsl so that it can write classes and specs based on tailwind domain model')
+        # Goals for Tailwind DSL
+        #   Should be able to ask for a component by type and name and get back a data structure
+        #   *Data structure should have the template HTML plus other meta data such as front matter
+        #   Should be able to construct a page with sequential list of components
+        #   Any component should support nested components
+        #   Any component should support a data structure
+        #   Should be able to construct a website with a bunch of pages
+        #   Should be able to construct navigation structures that can provide data into components
+        todo(title: 'use a domain model generator to build base classes and unit tests')
+        todo(title: 'restart the application so that I can figure out the issues with RuboCop')
+        todo(title: 'build a sample DSL to test how this can be used')
       end
       .page('To Do', theme: :style_02, margin_left: 0, margin_top: 0) do
@@ -26,6 +37,9 @@ KManager.action :project_plan do
         grid_layout(y:90, direction: :horizontal, grid_h: 80, grid_w: 320, wrap_at: 3, grid: 0)
+        todo(title: 'build file reader for raw design system files')
+        todo(title: 'use the design system file reader to generate a component graph in ./builder/utilities.rb')
       end
       .cd(:docs)
       .save('project-plan/project.drawio')

data/.builders/generators/utilities.rb ADDED Viewed

@@ -0,0 +1,57 @@
+KManager.action :utilities do
+  helpers = self
+  action do
+    KDirector::Dsls::BasicDsl
+      .init(k_builder,
+        template_folder:            '',
+        on_exist:                   :write,                      # %i[skip write compare]
+        on_action:                  :execute)                    # %i[queue execute]
+      .blueprint(name: :build_design_system) do
+        cd(:data)
+        design_systems = helpers.build_design_systems
+        json = JSON.pretty_generate(design_systems.to_h)
+        add('design_system.json', content: json)
+        component_folder = k_builder.target_folders.get(:components)
+        # helpers.generate_components(graph, component_folder, reset_root_path: false) # HAVE NOT TESTED THIS YET
+        # Goals
+        #   - Generate a Tailwind component complete design system so that I can see both the component plus the original source code
+        #     There should be a deep hierarchy of folders and files in a menu structure
+        #     When you click on a menu item, there should be a preview of the component
+        #     The menus should be collapsible
+        #     The menus should be searchable
+        #     The component should have link to the original Tailwind component
+        #     The component should show tailwind config if it exists
+        #     The component should show the data shape if it exists
+        #     The component should show the Astro component if it exists
+        #   - Generate a Data Structure JSON file for each component (one at a time, so just the next component using GPT3)
+        #   - Bulk training of GPT3 to generate a Data Structure JSON file after every 5 to 10 new components
+      end
+  end
+  def build_design_systems
+    source_path = File.expand_path('~/dev/kgems/k_templates/templates/tailwind')
+    director = TailwindDsl::Etl::RawComponents::Director.new
+    director.add_design_system(File.join(source_path, 'tui'))
+    # director.add_design_system(File.join(source_path, 'codepen'))
+    # director.add_design_system(File.join(source_path, 'devdojo'))
+    # director.add_design_system(File.join(source_path, 'merakiui'))
+    # director.add_design_system(File.join(source_path, 'noq'))
+    # director.add_design_system(File.join(source_path, 'starter-kit'))
+    director.design_systems
+  end
+  def generate_components(graph, target_folder, reset_root_path: false)
+    generator = TailwindDsl::RawComponents::GenerateComponentStructures.new(graph, target_folder, reset_root_path: reset_root_path)
+    generator.generate
+  end
+end
+KManager.opts.sleep = 2

data/.components/tui/application-ui/application-shells/multi-column/01.clean.html ADDED Viewed

@@ -0,0 +1,170 @@
+<div class="flex h-full">
+  <div class="relative z-40 lg:hidden" role="dialog" aria-modal="true">
+    <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
+    <div class="fixed inset-0 z-40 flex">
+      <div class="relative flex w-full max-w-xs flex-1 flex-col bg-white focus:outline-none">
+        <div class="absolute top-0 right-0 -mr-12 pt-2">
+          <button type="button" class="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+            <span class="sr-only">Close sidebar</span>
+            <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="h-0 flex-1 overflow-y-auto pt-5 pb-4">
+          <div class="flex flex-shrink-0 items-center px-4">
+            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
+          </div>
+          <nav aria-label="Sidebar" class="mt-5">
+            <div class="space-y-1 px-2">
+              <a href="#" class="bg-gray-100 text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md">
+                <svg class="text-gray-500 mr-4 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+                </svg>
+                Dashboard
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-4 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+                </svg>
+                Calendar
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-4 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+                </svg>
+                Teams
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-4 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Directory
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-4 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
+                </svg>
+                Announcements
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-base font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-4 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
+                </svg>
+                Office Map
+              </a>
+            </div>
+          </nav>
+        </div>
+        <div class="flex flex-shrink-0 border-t border-gray-200 p-4">
+          <a href="#" class="group block flex-shrink-0">
+            <div class="flex items-center">
+              <div>
+                <img class="inline-block h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
+              </div>
+              <div class="ml-3">
+                <p class="text-base font-medium text-gray-700 group-hover:text-gray-900">Whitney Francis</p>
+                <p class="text-sm font-medium text-gray-500 group-hover:text-gray-700">View profile</p>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div class="w-14 flex-shrink-0" aria-hidden="true">
+      </div>
+    </div>
+  </div>
+  <div class="hidden lg:flex lg:flex-shrink-0">
+    <div class="flex w-64 flex-col">
+      <div class="flex min-h-0 flex-1 flex-col border-r border-gray-200 bg-gray-100">
+        <div class="flex flex-1 flex-col overflow-y-auto pt-5 pb-4">
+          <div class="flex flex-shrink-0 items-center px-4">
+            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
+          </div>
+          <nav class="mt-5 flex-1" aria-label="Sidebar">
+            <div class="space-y-1 px-2">
+              <a href="#" class="bg-gray-200 text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+                <svg class="text-gray-500 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+                </svg>
+                Dashboard
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
+                </svg>
+                Calendar
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+                </svg>
+                Teams
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Directory
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46" />
+                </svg>
+                Announcements
+              </a>
+              <a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-2 py-2 text-sm font-medium rounded-md">
+                <svg class="text-gray-400 group-hover:text-gray-500 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 6.75V15m6-6v8.25m.503 3.498l4.875-2.437c.381-.19.622-.58.622-1.006V4.82c0-.836-.88-1.38-1.628-1.006l-3.869 1.934c-.317.159-.69.159-1.006 0L9.503 3.252a1.125 1.125 0 00-1.006 0L3.622 5.689C3.24 5.88 3 6.27 3 6.695V19.18c0 .836.88 1.38 1.628 1.006l3.869-1.934c.317-.159.69-.159 1.006 0l4.994 2.497c.317.158.69.158 1.006 0z" />
+                </svg>
+                Office Map
+              </a>
+            </div>
+          </nav>
+        </div>
+        <div class="flex flex-shrink-0 border-t border-gray-200 p-4">
+          <a href="#" class="group block w-full flex-shrink-0">
+            <div class="flex items-center">
+              <div>
+                <img class="inline-block h-9 w-9 rounded-full" src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80" alt="">
+              </div>
+              <div class="ml-3">
+                <p class="text-sm font-medium text-gray-700 group-hover:text-gray-900">Whitney Francis</p>
+                <p class="text-xs font-medium text-gray-500 group-hover:text-gray-700">View profile</p>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+    <div class="lg:hidden">
+      <div class="flex items-center justify-between border-b border-gray-200 bg-gray-50 px-4 py-1.5">
+        <div>
+          <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
+        </div>
+        <div>
+          <button type="button" class="-mr-3 inline-flex h-12 w-12 items-center justify-center rounded-md text-gray-500 hover:text-gray-900">
+            <span class="sr-only">Open sidebar</span>
+            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="relative z-0 flex flex-1 overflow-hidden">
+      <main class="relative z-0 flex-1 overflow-y-auto focus:outline-none xl:order-last">
+        <div class="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
+          <div class="h-full rounded-lg border-2 border-dashed border-gray-200"></div>
+        </div>
+      </main>
+      <aside class="relative hidden w-96 flex-shrink-0 overflow-y-auto border-r border-gray-200 xl:order-first xl:flex xl:flex-col">
+        <div class="absolute inset-0 py-6 px-4 sm:px-6 lg:px-8">
+          <div class="h-full rounded-lg border-2 border-dashed border-gray-200"></div>
+        </div>
+      </aside>
+    </div>
+  </div>
+</div>