Edge - Second Tab

src/containers/applications/apps/edge.jsx

@@ -8,6 +8,7 @@ export const EdgeMenu = () => {
   const [ierror, setErr] = useState(true);
   const [isTyping, setTyping] = useState(false);
   const [hist, setHist] = useState(["https://bing.com", "https://bing.com"]);
+  const [actualTab, setActualTab] = useState("search");
   const dispatch = useDispatch();
 
   const iframes = {
@@ -94,6 +95,38 @@ export const EdgeMenu = () => {
     setErr(false);
   };
 
+  const pageDocument = () => {
+    if(actualTab === "search"){
+      return (
+        <LazyComponent show={!wnapp.hide}>              
+          <iframe
+            src={!isTyping ? url : hist[0]}
+            id="isite"
+            frameborder="0"
+            className="w-full h-full"
+            title="site"
+          ></iframe>
+        </LazyComponent>
+      )
+    } else {
+      return (
+        <div id="fsite" className="w-full h-full fake_webpage" >
+          <span className="title">Contributors</span>
+          <img src="https://contrib.rocks/image?repo=blueedgetechno/win11React" alt="Contributors" />
+        </div>
+      )
+    }
+  }
+
+  const updateTab = {
+    _search : () => {
+      setActualTab("search")
+    },
+    _contributors : () => {
+      setActualTab("contributors")
+    }
+  }
+
   useEffect(() => {
     if (wnapp.url) {
       setTyping(false);
@@ -124,8 +157,17 @@ export const EdgeMenu = () => {
       <div className="windowScreen flex flex-col">
         <div className="overTool flex">
           <Icon src={wnapp.icon} width={14} margin="0 6px" />
-          <div className="btab">
-            <div>New Tab</div>
+          <div className={`btab ${actualTab === "search" ? "active" : ""}`} onClick={updateTab._search}>
+            <div>Search</div>
+            <Icon
+              fafa="faTimes"
+              click={wnapp.action}
+              payload="close"
+              width={10}
+            />
+          </div>
+          <div className={`btab ${actualTab === "contributors" ? "active" : ""}`} onClick={updateTab._contributors}>
+            <div>Contributors</div>
             <Icon
               fafa="faTimes"
               click={wnapp.action}
@@ -134,6 +176,7 @@ export const EdgeMenu = () => {
             />
           </div>
         </div>
+
         <div className="restWindow flex-grow flex flex-col">
           <div className="addressBar w-full h-10 flex items-center">
             <Icon
@@ -217,15 +260,8 @@ export const EdgeMenu = () => {
             </div>
           </div>
           <div className="siteFrame flex-grow overflow-hidden">
-            <LazyComponent show={!wnapp.hide}>
-              <iframe
-                src={!isTyping ? url : hist[0]}
-                id="isite"
-                frameborder="0"
-                className="w-full h-full"
-                title="site"
-              ></iframe>
-            </LazyComponent>
+
+            {pageDocument()}
 
             <div
               className={`bg-blue-100 w-64 rounded dpShad p-2 absolute bottom-0 right-0 my-4 mx-12 transition-all ${

src/containers/applications/tabs.scss

@@ -121,16 +121,31 @@
   .btab {
     width: 176px;
     height: 100%;
-    margin: 0 4px;
-    background: var(--bg1);
+    // margin: 0 4px;
     color: var(--txt-col);
     border-radius: 4px 4px 0 0;
-    box-shadow: 2px 0 2px var(--shd);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 8px;
-    font-size: 0.72em;
+    font-size: 0.78em;
+
+    &::after{
+      position: absolute;
+      right: 2px;
+      height: 20px;
+      content: "";
+      border-right: 1px solid var(--bg1-hover);
+    }
+
+    &:hover{
+      background: var(--bg1-hover);
+    }
+
+    &.active{
+      background: var(--bg1);
+      box-shadow: 2px 0 2px var(--shd);
+    }
 
     .uicon {
       color: var(--gray-txt);
@@ -147,7 +162,7 @@
 }
 
 .edgeBrowser .overTool {
-  height: 26px;
+  height: 28px;
 }
 
 .addressBar {
@@ -167,6 +182,8 @@
     color: var(--txt-col);
     border-radius: 4px;
     border: solid 1px var(--comp-txt);
+    padding: .85rem 1rem;
+    padding-top: .75rem;
   }
 }
 

src/containers/applications/wnapp.scss

@@ -53,15 +53,39 @@ body[data-theme="dark"] {
 .edgeBrowser {
   --bg0: #e7eaec;
   --bg1: #f7fafc;
+  --bg1-hover: #f7fafc70;
   --ipbar: #fefefe;
   --shd: rgba(80, 80, 80, 0.2);
   background: var(--bg0);
+
+  .fake_webpage{
+    background-color: var(--bg1-hover);
+    color: var(--dark-txt);
+    box-sizing: border-box;
+    padding: 2rem 0;
+
+    .title{
+      display: block;
+      font-size: 3em;
+      text-align: center;
+      padding: 1rem;
+    }
+
+    img{
+      display: block;
+      padding: 1rem;
+      max-width: 800px;
+      width: calc(100% - 2rem);
+      margin: auto;
+    }
+  }
 }
 
 body[data-theme="dark"] .edgeBrowser {
   --bg0: #222228;
   --ipbar: #222228;
   --bg1: rgb(45, 45, 51);
+  --bg1-hover: #2d2d3370;
   --shd: rgba(0, 0, 0, 0.3);
 
   .edgenavicon {