Skip to content

Instantly share code, notes, and snippets.

View codigoconjuan's full-sized avatar

Juan Pablo De la torre Valdez codigoconjuan

View GitHub Profile
@codigoconjuan
codigoconjuan / UploadProductImage.tsx
Last active November 16, 2024 20:40
Subir Imágenes react-dropzone
<div className="space-y-1">
<label className="block text-sm font-medium leading-6 text-gray-900">
Imagen Producto
</label>
<div {...getRootProps({
className: `
py-20 border-2 border-dashed text-center
${isDragActive ? 'border-gray-900 text-gray-900 bg-gray-200 ' : 'border-gray-400 text-gray-400 bg-white'}
${isDragReject ? 'border-none bg-white' : 'cursor-not-allowed'}
`})}>
@codigoconjuan
codigoconjuan / schemas.ts
Last active November 16, 2024 20:39
Schema de Validación para Productos en Next.js
export const ProductFormSchema = z.object({
name: z.string()
.min(1, {message: 'El Nombre del Producto no puede ir vacio'}),
price: z.coerce.number({message: 'Precio no válido'})
.min(1, {message: 'El Precio debe ser mayor a 0'}),
inventory: z.coerce.number({message: 'Inventario no válido'})
.min(1, {message: 'El inventario debe ser mayor a 0'}),
categoryId: z.coerce.number({message: 'La Categoria no es válida'})
})
@codigoconjuan
codigoconjuan / ProductForm.tsx
Last active November 16, 2024 20:39
Formulario para crear Productos en Next.js y NestJS
export default async function ProductForm() {
return (
<>
<div className="space-y-2 ">
<label
htmlFor="name"
className="block"
@codigoconjuan
codigoconjuan / utils.ts
Last active November 16, 2024 20:35
Revisar si la página es válida o no
export function isValidPage(value: number) {
if (value == null) {
return false;
}
if (typeof value !== 'number' && isNaN(value)) {
return false;
}
if (value <= 0) {
@codigoconjuan
codigoconjuan / ProductsTable.tsx
Last active November 16, 2024 20:35
Tabla de Products para POS en Nest y Next.js
export default function ProductsTable() {
const products = []
return (
<div className="px-4 sm:px-6 lg:px-8 mt-10">
<div className="mt-8 flow-root ">
<div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8 bg-white p-5 ">
<table className="min-w-full divide-y divide-gray-300 ">
@codigoconjuan
codigoconjuan / TransactionSummary.tsx
Last active November 16, 2024 20:34
Mostrar Detalles de Venta
export default function TransactionSummary() {
const transaction = {
contents: []
}
return (
<>
<div className='mt-6 text-sm font-medium text-gray-500 border border-gray-200'>
<p className='text-sm font-black text-gray-900 p-2 bg-gray-200 '>ID: </p>
@codigoconjuan
codigoconjuan / schemas.ts
Last active November 16, 2024 20:33
Schema de Ventas
export const ContentsSchema = z.object({
id: z.number(),
quantity: z.number(),
price: z.string(),
product: ProductSchema
})
export const TransactionResponseSchema = z.object({
id: z.number(),
total: z.string(),
@codigoconjuan
codigoconjuan / providers.tsx
Last active November 16, 2024 20:31
Configurar React-Query con Next 15
'use client'
import {
isServer,
QueryClient,
QueryClientProvider,
} from '@tanstack/react-query'
function makeQueryClient() {
return new QueryClient({
@codigoconjuan
codigoconjuan / 1) layout.tsx
Last active November 16, 2024 20:31
Panel de Administración Next.js POS
import ToastNotification from "@/components/ui/ToastNotification";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
<div className="lg:min-h-screen container mx-auto mt-10 px-10 lg:px-0">
@codigoconjuan
codigoconjuan / ToastNotification.tsx
Last active November 16, 2024 20:30
Notificaciones Toast en Next.js
"use client"
import "react-toastify/dist/ReactToastify.min.css"
import { ToastContainer } from 'react-toastify'
export default function ToastNotification() {
return (
<ToastContainer />
)
}