summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/clients/api_client.ts2
-rw-r--r--src/clients/loaders.ts2
-rw-r--r--src/components/company_details.tsx36
-rw-r--r--src/components/navbar.tsx2
-rw-r--r--src/components/product_listing.tsx32
-rw-r--r--src/components/review.tsx2
-rw-r--r--src/components/stylesheets/company_details.css8
-rw-r--r--src/components/stylesheets/shared.css4
-rw-r--r--src/main.tsx6
-rw-r--r--src/routes/companies/companies.tsx23
-rw-r--r--src/routes/companies/company_products.tsx0
11 files changed, 87 insertions, 30 deletions
diff --git a/src/clients/api_client.ts b/src/clients/api_client.ts
index 0e96c36..9a0d3f5 100644
--- a/src/clients/api_client.ts
+++ b/src/clients/api_client.ts
@@ -3,7 +3,7 @@ import axios from "axios";
export class ApiClient {
readonly url = "http://localhost:3000/api";
- async get(path: string) {
+ async get(path: string, params?: URLSearchParams) {
const request_url = `${ this.url }${ path }`;
const response = await this.makeRequest(request_url);
diff --git a/src/clients/loaders.ts b/src/clients/loaders.ts
index 43c1581..334f8aa 100644
--- a/src/clients/loaders.ts
+++ b/src/clients/loaders.ts
@@ -3,7 +3,7 @@ import { ApiClient } from "./api_client";
export async function loader({ request }) {
const client = new ApiClient();
const url = new URL(request.url)
- const response = await client.get(url.pathname);
+ const response = await client.get(`${url.pathname}${url.search}`);
return response;
}
diff --git a/src/components/company_details.tsx b/src/components/company_details.tsx
new file mode 100644
index 0000000..9b70c39
--- /dev/null
+++ b/src/components/company_details.tsx
@@ -0,0 +1,36 @@
+import countryList from "react-select-country-list";
+import "./stylesheets/company_details.css";
+import { Link } from "react-router-dom";
+
+export default function CompanyDetails({ company }) {
+ return(
+ <>
+ <div className="flex w-3/5 my-4">
+ <img className="mx-2 company-logo" src={company.attributes.logo}/>
+ <div className="relative overflow-x-auto">
+ <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+ <thead>
+ <tr>
+ <th scope="col" className="company-details-text font-bold text-2xl px-6 py-4 hover:text-neutral-700">
+ <Link to={`/products?company=${company.attributes.short_name}`}>
+ {company.attributes.name}
+ </Link>
+ </th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+ <th scope="row" className="px-6 py-4 font-medium company-details-text whitespace-nowrap dark:text-white">
+ País
+ </th>
+ <td className="px-6 py-4">
+ {countryList().getLabel(company.attributes.country)}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </>
+ );
+} \ No newline at end of file
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 2fd650d..dd8ca25 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -23,7 +23,7 @@ export default function Navbar() {
<li className="mb-4 lg:mb-0 lg:pr-2">
<a className="navbar-elements-text hover:text-neutral-700 focus:text-neutral-700 disabled:text-black/30 dark:text-neutral-200 dark:hover:text-neutral-300 dark:focus:text-neutral-300 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-zinc-400"
- href="/products">
+ href="/companies">
Proveedores
</a>
</li>
diff --git a/src/components/product_listing.tsx b/src/components/product_listing.tsx
index d9c5488..1da96c3 100644
--- a/src/components/product_listing.tsx
+++ b/src/components/product_listing.tsx
@@ -1,13 +1,13 @@
-import { Collapse, Ripple, initTE} from "tw-elements";
import { Link } from "react-router-dom";
+import { Dropdown } from "flowbite-react";
import "./stylesheets/shared.css"
-import "./stylesheets/product_listing.css"
+import "./stylesheets/product_listing.css";
export default function ProductListing({ product }) {
- const collapseMenu = `collapse${product.id}`
- const collapseTarget = `#${collapseMenu}`
const categories = product.attributes.categories.map(category =>
- <li>{category}</li>
+ <Dropdown.Item>
+ {category}
+ </Dropdown.Item>
);
return (
@@ -44,25 +44,9 @@ export default function ProductListing({ product }) {
</tbody>
</table>
<div className="my-2">
- <button
- className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
- type="button"
- data-te-collapse-init
- data-te-ripple-init
- data-te-ripple-color="light"
- data-te-target={collapseTarget}
- aria-expanded="false"
- aria-controls={collapseMenu}>
- Categorías
- </button>
- <div className="!visible hidden" id={collapseMenu} data-te-collapse-item>
- <div
- className="flex rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 dark:text-neutral-50">
- <ul>
- {categories}
- </ul>
- </div>
- </div>
+ <Dropdown label="Categorías" dismissOnClick={false} color="dark">
+ {categories}
+ </Dropdown>
</div>
</div>
</div>
diff --git a/src/components/review.tsx b/src/components/review.tsx
index e3f34df..153c202 100644
--- a/src/components/review.tsx
+++ b/src/components/review.tsx
@@ -9,7 +9,7 @@ export default function Review({ review }) {
<>
<div className="grid grid-cols-10 w-3/5 my-4">
<div className="flex flex-col col-span- justify-center mx-2">
- <div>
+ <div className="text-black">
{review.attributes.author_name}
</div>
<div>
diff --git a/src/components/stylesheets/company_details.css b/src/components/stylesheets/company_details.css
new file mode 100644
index 0000000..438eef1
--- /dev/null
+++ b/src/components/stylesheets/company_details.css
@@ -0,0 +1,8 @@
+.company-logo {
+ width: 128px;
+ height: auto;
+}
+
+.company-details-text {
+ color: #394490;
+} \ No newline at end of file
diff --git a/src/components/stylesheets/shared.css b/src/components/stylesheets/shared.css
index 2cda15b..5f410c7 100644
--- a/src/components/stylesheets/shared.css
+++ b/src/components/stylesheets/shared.css
@@ -3,7 +3,7 @@
display: flex;
position: relative;
top: 80px;
- left: 10%;
+ left: 50%;
}
.button {
@@ -12,7 +12,7 @@
.main-view {
width: 80%;
- margin: auto;
+ margin-left: auto;
}
.listing-image {
diff --git a/src/main.tsx b/src/main.tsx
index 45f5fd6..7b21b2a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
import Products from "./routes/products/products";
import Product from "./routes/products/product";
+import Companies from "./routes/companies/companies";
import Layout from "./components/layout";
import { loader, productLoader } from "./clients/loaders";
import './index.css';
@@ -19,6 +20,11 @@ const routes = [
element: <Product/>
},
{
+ path: "/companies",
+ loader: loader,
+ element: <Companies/>
+ },
+ {
path: '/',
element: <Navigate to='/products'/>
}
diff --git a/src/routes/companies/companies.tsx b/src/routes/companies/companies.tsx
new file mode 100644
index 0000000..7912b80
--- /dev/null
+++ b/src/routes/companies/companies.tsx
@@ -0,0 +1,23 @@
+import { useLoaderData } from "react-router-dom";
+import CompanyDetails from "../../components/company_details";
+import MainContentLayout from "../../components/main_content_layout";
+import SearchBar from "../../components/search_bar";
+
+export default function Companies(){
+ const companies = useLoaderData().data.data.map(company =>
+ <li key={company.id}>
+ <CompanyDetails company={company}/>
+ </li>
+ );
+
+ return(
+ <>
+ <MainContentLayout>
+ <SearchBar path="/companies"/>
+ <ul>
+ {companies}
+ </ul>
+ </MainContentLayout>
+ </>
+ );
+} \ No newline at end of file
diff --git a/src/routes/companies/company_products.tsx b/src/routes/companies/company_products.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/routes/companies/company_products.tsx
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-22 17:38:08 +0000