Divide ui seperate component

frontend/contract-ui/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/contract-ui/src/Dapp.jsx

@@ -0,0 +1,29 @@
+//!React
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+
+//!Components
+import { PetItem } from './components/Petitem'
+import { TxError } from './components/TxError'
+import { Navbar } from './components/Navbar'
+
+//*Dapp
+function Dapp() {
+  //return jsx to client
+  return (
+    <>
+      <div className="container">
+        <TxError/>
+        <br />
+        <div className="navbar-container">
+        <Navbar/>
+        </div>
+        <div className="items">
+          <PetItem/>
+        </div>
+      </div>
+      </>
+  )
+}
+
+export default Dapp

frontend/contract-ui/src/components/Navbar.jsx

@@ -0,0 +1,15 @@
+//*Navbar
+export function Navbar(){
+    //return jsx to client
+    return(
+        <>
+            <div className="navbar">
+                <div>Home</div>
+                <div>My Profile</div>
+            </div>
+            <div className="user-account">
+                Welcome 0x231804218745129783742189739131
+            </div>
+        </>
+    )
+}

frontend/contract-ui/src/components/Petitem.jsx

@@ -0,0 +1,38 @@
+//*PetItem
+export function PetItem(){
+    //return jsx to client
+    return (
+        <>
+            <div className="item">
+                <div className="image">
+                    <img
+                        src="https://images.unsplash.com/photo-1537019575197-df34a13f342c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1338&q=40"
+                        alt="">
+                    </img>
+                </div>
+                <div className="info-holder">
+                    <div>
+                        <b>Name:</b> Rocky
+                    </div>
+                    <div>
+                        <b>Age:</b> 3
+                    </div>
+                    <div>
+                        <b>Breed:</b> German Shepherd
+                    </div>
+                    <div>
+                        <b>Location:</b> Burlington, Vermont
+                    </div>
+                    <div>
+                        <b>Description:</b> Rocky is a loyal and obedient German Shepherd
+                        who will do anything to protect his family. He loves to play fetch
+                        and go on long walks.
+                    </div>
+                </div>
+                <div className="action-menu">
+                    <button className="action-button">Adopt</button>
+                </div>
+            </div>
+        </>
+    )
+}

frontend/contract-ui/src/components/TxError.jsx

@@ -0,0 +1,15 @@
+//*TxError
+export function TxError(){
+    //return jsx to client
+    return(
+        <>
+            <div className="message-warning" role="alert">
+                <div>Error sending transaction: Something went wrong...</div>
+                <br />
+                <button type="button dismiss-button" className="close">
+                    <div>Dismiss</div>
+                </button>
+            </div>
+        </>
+    )
+}