From d52c64c102d37e7ed6096ae518711f31b3a00013 Mon Sep 17 00:00:00 2001
From: EliAlarcon <EliAlarcon@users.noreply.github.com>
Date: Mon, 5 Feb 2024 18:09:33 -0500
Subject: [PATCH] Componente BuscarProducto

---
 .../dashboard/project/ProjectDashboardApp.tsx |  5 --
 src/app/main/producto/Producto.tsx            |  3 +-
 src/app/main/producto/ProductoRender.tsx      | 13 +++
 .../main/producto/widgets/BuscarProducto.tsx  | 81 +++++++++++++++++++
 4 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 src/app/main/producto/ProductoRender.tsx
 create mode 100644 src/app/main/producto/widgets/BuscarProducto.tsx

diff --git a/src/app/main/dashboard/project/ProjectDashboardApp.tsx b/src/app/main/dashboard/project/ProjectDashboardApp.tsx
index 3ddc9e5..f8e6515 100644
--- a/src/app/main/dashboard/project/ProjectDashboardApp.tsx
+++ b/src/app/main/dashboard/project/ProjectDashboardApp.tsx
@@ -1,15 +1,10 @@
 import FusePageSimple from '@fuse/core/FusePageSimple';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
 import { useState } from 'react';
-import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 import FuseLoading from '@fuse/core/FuseLoading';
 import ProjectDashboardAppHeader from './ProjectDashboardAppHeader';
 import HomeTab from './tabs/home/HomeTab';
-import TeamTab from './tabs/team/TeamTab';
-import BudgetTab from './tabs/budget/BudgetTab';
 import { useGetProjectDashboardWidgetsQuery } from './ProjectDashboardApi';
 
 const Root = styled(FusePageSimple)(({ theme }) => ({
diff --git a/src/app/main/producto/Producto.tsx b/src/app/main/producto/Producto.tsx
index d79e9f9..9d759ae 100644
--- a/src/app/main/producto/Producto.tsx
+++ b/src/app/main/producto/Producto.tsx
@@ -3,6 +3,7 @@ import FusePageSimple from '@fuse/core/FusePageSimple';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
 import ListDetalleProductoRender from './widgets/DetalleProductoRender';
+import ProductoRender from './ProductoRender';
 
 const Root = styled(FusePageSimple)(({ theme }) => ({
 	'& .FusePageSimple-header': {
@@ -27,7 +28,7 @@ function Producto() {
 				</div>
 			}
 			content={
-				<ListDetalleProductoRender/>
+				<ProductoRender></ProductoRender>
 			}
 		/>
 	)
diff --git a/src/app/main/producto/ProductoRender.tsx b/src/app/main/producto/ProductoRender.tsx
new file mode 100644
index 0000000..58e987c
--- /dev/null
+++ b/src/app/main/producto/ProductoRender.tsx
@@ -0,0 +1,13 @@
+import BuscarProducto from "./widgets/BuscarProducto";
+import ListDetalleProductoRender from "./widgets/DetalleProductoRender";
+
+function ProductoRender() {
+    return(
+        <div className="w-full p-12 pt-16 sm:pt-24 lg:ltr:pr-0 lg:rtl:pl-0">
+            <BuscarProducto></BuscarProducto>
+            <ListDetalleProductoRender></ListDetalleProductoRender>
+        </div>
+    )
+}
+
+export default ProductoRender;
\ No newline at end of file
diff --git a/src/app/main/producto/widgets/BuscarProducto.tsx b/src/app/main/producto/widgets/BuscarProducto.tsx
new file mode 100644
index 0000000..56447f5
--- /dev/null
+++ b/src/app/main/producto/widgets/BuscarProducto.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import InputBase from '@mui/material/InputBase';
+import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
+import FuseSearch from '@fuse/core/FuseSearch';
+import { Card } from '@mui/material';
+import { color } from '@mui/system';
+
+const Search = styled('div')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: theme.shape.borderRadius,
+  backgroundColor: alpha(theme.palette.common.black, 0.06),
+  '&:hover': {
+    /* backgroundColor: alpha(theme.palette.common.white, 0.25), */
+  },
+  width: '100%',
+  [theme.breakpoints.up('sm')]: {
+    /* marginLeft: theme.spacing(), */
+    width: 'auto',
+  },
+}));
+
+const SearchIconWrapper = styled('div')(({ theme }) => ({
+  padding: theme.spacing(0, 2),
+  height: '100%',
+  position: 'absolute',
+  pointerEvents: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
+const StyledInputBase = styled(InputBase)(({ theme }) => ({
+  color: 'inherit',
+  width: '100%',
+  '& .MuiInputBase-input': {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+    transition: theme.transitions.create('width'),
+  },
+}));
+
+function BuscarProducto() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <div
+      className='bg-white'>
+      <Typography className="text-lg font-medium tracking-tight leading-6 truncate"
+      paddingTop={1}
+      paddingLeft={3}
+      >
+            {("Buscar producto")}
+      </Typography>
+        <Toolbar>
+          <Search>
+            <SearchIconWrapper>
+            <FuseSvgIcon
+                className="text-48 text-black"
+                size={24}
+                color="action"
+              >
+                heroicons-outline:search
+              </FuseSvgIcon>
+            </SearchIconWrapper>
+            <StyledInputBase
+              placeholder="Buscar Producto"
+              inputProps={{ 'aria-label': 'search' }}
+            />
+          </Search>
+        </Toolbar>
+      </div>
+    </Box>
+  );
+}
+
+export default BuscarProducto;
\ No newline at end of file