feat: add the browser mockup component from README.md list (#2147)

* feat: add browser mockup component

* docs: add browser mockup component page

* docs: create browser mockup page

* fix: remove the right icon in browser mockup component

* docs: use div instead of anchor tag

README.md

@@ -138,7 +138,7 @@ Tweet about daisyUI: [![][tweet]][tweet-url]
   - [x] Tab
 
 - Mockup
-  - [ ] Browser
+  - [x] Browser
   - [x] Code
   - [x] Phone
   - [x] Window

src/components/styled/mockup.css

@@ -24,7 +24,7 @@
     @apply pt-5 rounded-box;
     &:before {
       content: "";
-      @apply mb-4 block h-3 w-3 rounded-full opacity-30;
+      @apply mb-4 block h-3 aspect-square rounded-full opacity-30;
       box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
     }
   }
@@ -75,4 +75,26 @@
       margin-top: -25px;
     }
   }
+  &-browser {
+    @apply rounded-box;
+    .toolbar {
+      @apply my-3 inline-flex w-full items-center pr-[1.4em];
+      &:before {
+        content: "";
+        @apply mr-[4.8rem] inline-block h-3 aspect-square rounded-full opacity-30;
+        box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
+      }
+      .input {
+        @apply pl-8 relative block w-96 h-7 mx-auto bg-base-200 text-ellipsis whitespace-nowrap overflow-hidden;
+        &:before {
+          content: "";
+          @apply absolute top-1/2 left-2 -translate-y-1/2 h-3 aspect-square rounded-full border-2 border-current opacity-60;
+        }
+        &:after {
+          content: "";
+          @apply absolute top-1/2 left-5 translate-y-1/4 h-2 border border-current -rotate-45 rounded-full opacity-60;
+        }
+      }
+    }
+  }
 }

src/components/unstyled/mockup.css

@@ -17,4 +17,13 @@
       }
     }
   }
+  &-browser {
+    @apply relative overflow-hidden overflow-x-auto;
+    pre[data-prefix] {
+      &:before {
+        content: attr(data-prefix);
+        @apply inline-block text-right;
+      }
+    }
+  }
 }

src/docs/src/lib/data.js

@@ -699,6 +699,13 @@ export let pages = [
     name: "Mockup",
     icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-lime-600"><path d="M8 16.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75z" /><path fill-rule="evenodd" d="M4 4a3 3 0 013-3h6a3 3 0 013 3v12a3 3 0 01-3 3H7a3 3 0 01-3-3V4zm4-1.5v.75c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75V2.5h1A1.5 1.5 0 0114.5 4v12a1.5 1.5 0 01-1.5 1.5H7A1.5 1.5 0 015.5 16V4A1.5 1.5 0 017 2.5h1z" clip-rule="evenodd" /></svg>',
     items: [
+      {
+        name: "Browser",
+        tags: "mockup browser",
+        href: "/components/mockup-browser/",
+        icon: "",
+        badge: "",
+      },
       {
         name: "Code",
         tags: "mockup code",

src/docs/src/routes/components/mockup-browser/+page.svelte.md

@@ -0,0 +1,52 @@
+---
+title: Browser mockup
+desc: Browser mockup shows a box that looks like a browser window.
+published: true
+---
+
+<script>
+  import Component from "@components/Component.svelte"
+  import ClassTable from "@components/ClassTable.svelte"
+  import { prefix } from '$lib/stores';
+  import { replace } from '$lib/actions';
+</script>
+
+<ClassTable
+data="{[
+  { type:'component', class: 'mockup-browser', desc: 'Container element' },
+]}"
+/>
+
+<Component title="browser mockup with border">
+<div class="border mockup-browser border-base-300 w-full">
+  <div class="toolbar">
+    <div class="input border border-base-300">https://daisyui.com</div>
+  </div>
+  <div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$mockup-browser border border-base-300">
+  <div class="toolbar">
+    <div class="input border border-base-300">https://daisyui.com</div>
+  </div>
+  <div class="flex justify-center px-4 py-16 border-t border-base-300">Hello!</div>
+</div>`
+}</pre>
+</Component>
+
+<Component title="browser mockup with background color">
+<div class="border mockup-browser bg-base-300 w-full">
+  <div class="toolbar">
+    <div class="input">https://daisyui.com</div>
+  </div>
+  <div class="flex justify-center px-4 py-16 bg-base-200">Hello!</div>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$mockup-browser border bg-base-300">
+  <div class="toolbar">
+    <div class="input">https://daisyui.com</div>
+  </div>
+  <div class="flex justify-center px-4 py-16 bg-base-200">Hello!</div>
+</div>`
+}</pre>
+</Component>