Design Home-page (services)

kkamara · Nov 23, 2024 · dc45a5e · dc45a5e
1 parent 573af31
commit dc45a5e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 79 deletions.
diff --git a/resources/js/components/pages/HomeComponent.jsx b/resources/js/components/pages/HomeComponent.jsx
@@ -18,74 +18,6 @@ export default function HomeComponent() {
     dispatch(getUsers())
   }, [])
 
-  const handlePageChange = ({ selected, }) => {
-    const newPage = selected + 1
-    if (newPage > state.users.data.meta.lastPage) {
-      return
-    }
-    dispatch(getUsers(newPage))
-  }
-
-  const pagination = () => {
-    if (!state.users.data) {
-        return null
-    }
-
-    return <ReactPaginate
-      onPageChange={handlePageChange}
-      previousLabel="Previous"
-      nextLabel="Next"
-      pageClassName="page-item"
-      pageLinkClassName="page-link"
-      previousClassName="page-item"
-      previousLinkClassName="page-link"
-      nextClassName="page-item"
-      nextLinkClassName="page-link"
-      breakLabel="..."
-      breakClassName="page-item"
-      breakLinkClassName="page-link"
-      pageCount={state.users.data.meta.lastPage}
-      marginPagesDisplayed={2}
-      pageRangeDisplayed={5}
-      containerClassName="pagination"
-      activeClassName="active"
-      forcePage={state.users.data.meta.currentPage - 1}
-    />
-  }
-
-  const paginationDetail = () => {
-    return <div className="text-center">
-      <strong>Page</strong> ({state.users.data.meta.currentPage}),&nbsp;
-      <strong>Page Count</strong> ({state.users.data.meta.lastPage}),&nbsp;
-      <strong>Displayed Items</strong> ({state.users.data.data.length}),&nbsp;
-      <strong>Items</strong> ({state.users.data.meta.total})
-    </div>
-  }
-
-  const parseDate = date => moment(date).format('YYYY-MM-DD hh:mm')
-
-  const renderList = () => {
-    if (!state.users.data) {
-      return null
-    }
-    return (
-      <>
-        {paginationDetail()}
-        <ul className="list-group">
-          {state.users.data.data.map((user, index) => (
-            <li key={index} className='list-group-item home-item'>
-              <strong>name</strong> ({user.name}),&nbsp;
-              <strong>email</strong> ({user.email}),&nbsp;
-              <strong>created_at</strong> ({parseDate(user.created_at)}),&nbsp;
-              <strong>updated_at</strong> ({parseDate(user.updated_at)})
-            </li>
-          ))}
-        </ul>
-        {paginationDetail()}
-      </>
-    )
-  }
-
   if (
     !state.users.loading &&
     typeof state.users.data === 'object' &&
@@ -96,7 +28,7 @@ export default function HomeComponent() {
   if (state.users.loading) {
     return <div className="container home-container text-center">
       <Helmet>
-        <title>Home - {import.meta.env.VITE_APP_NAME}</title>
+        <title>Services - {import.meta.env.VITE_APP_NAME}</title>
       </Helmet>
       <p>Loading...</p>
     </div>
@@ -106,18 +38,65 @@ export default function HomeComponent() {
     <>
       <div className='container home-container'>
         <Helmet>
-          <title>Home - {import.meta.env.VITE_APP_NAME}</title>
+          <title>Services - {import.meta.env.VITE_APP_NAME}</title>
         </Helmet>
-        <div className="text-center">
-          <button className='btn btn-primary home-button'>
-            Test Button
-          </button>
+        <div className="row">
+          <div className="col-md-10 offset-md-1">
+            <h1>Services</h1>
+
+            <div className="card col-md-3 home-card">
+              <div className="card-header">
+                <h3>Hair Styling</h3>
+              </div>
+              <div className="card-body">
+                Laborum incididunt culpa irure cupidatat Lorem pariatur aliquip sint id anim est aute aliqua.
+              </div>
+              <div className="card-footer">
+                <div className="text-end">
+                  <span className="home-card-cost">£50.00</span>
+                  <a className="btn btn-primary" href="#">
+                    Order Online
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div className="card col-md-3 home-card">
+              <div className="card-header">
+                <h3>Hair Coloring</h3>
+              </div>
+              <div className="card-body">
+                Dolor aliquip enim Lorem ipsum id officia veniam.
+              </div>
+              <div className="card-footer">
+                <div className="text-end">
+                  <span className="home-card-cost">£50.00</span>
+                  <a className="btn btn-primary" href="#">
+                    Order Online
+                  </a>
+                </div>
+              </div>
+            </div>
+
+            <div className="card col-md-3 home-card">
+              <div className="card-header">
+                <h3>Hair Treatment</h3>
+              </div>
+              <div className="card-body">
+                Minim sunt minim officia dolore consectetur non deserunt minim id ex.
+              </div>
+              <div className="card-footer">
+                <div className="text-end">
+                  <span className="home-card-cost">£50.00</span>
+                  <a className="btn btn-primary" href="#">
+                    Order Online
+                  </a>
+                </div>
+              </div>
+            </div>
+
+          </div>
         </div>
-        <br />
-        <br />
-        {pagination()}
-        {renderList()}
-        {pagination()}
       </div>
     </>
   )

diff --git a/resources/js/components/pages/HomeComponent.scss b/resources/js/components/pages/HomeComponent.scss
@@ -0,0 +1,8 @@
+.home-card {
+    display: inline-block !important;
+    margin: 20px;
+}
+
+.home-card-cost {
+    margin-right: 10px;
+}