Skip to content

Commit

Permalink
Merge branch 'learn-runthrough-edits' of https://github.com/vercel/ne…
Browse files Browse the repository at this point in the history 
…xt-learn into learn-runthrough-edits
  • Loading branch information
@delbaoliveira
delbaoliveira committed Oct 26, 2023
2 parents 58557e9 + ddb2327 commit 8361b58
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 62 deletions.
4 changes: 2 additions & 2 deletions dashboard/starter-example/app/ui/dashboard/cards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,14 @@ const iconMap = {
export default async function Cards() {
return (
<>
<Card title="Collected" value={totalPaidInvoices} type="collected" />
{/* <Card title="Collected" value={totalPaidInvoices} type="collected" />
<Card title="Pending" value={totalPendingInvoices} type="pending" />
<Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
<Card
title="Total Customers"
value={numberOfCustomers}
type="customers"
/>
/> */}
</>
);
}
Expand Down
4 changes: 2 additions & 2 deletions dashboard/starter-example/app/ui/dashboard/latest-invoices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default async function LatestInvoices() {
Latest Invoices
</h2>
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
<div className="bg-white px-6">
{/* <div className="bg-white px-6">
{latestInvoices.map((invoice, i) => {
return (
<div
Expand Down Expand Up @@ -45,7 +45,7 @@ export default async function LatestInvoices() {
</div>
);
})}
</div>
</div> */}
<div className="flex items-center pb-2 pt-6">
<ArrowPathIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
Expand Down
6 changes: 1 addition & 5 deletions dashboard/starter-example/app/ui/dashboard/nav-links.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import {
HomeIcon,
DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import clsx from 'clsx';

// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
Expand All @@ -26,10 +25,7 @@ export default function NavLinks() {
<a
key={link.name}
href={link.href}
className={clsx(
'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
)}
>
className='flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3'>
<LinkIcon className="w-6" />
<p className="hidden md:block">{link.name}</p>
</a>
Expand Down
15 changes: 6 additions & 9 deletions dashboard/starter-example/app/ui/dashboard/revenue-chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,19 @@ import { lusitana } from '@/app/ui/fonts';

export default async function RevenueChart() {
const chartHeight = 350;
const { yAxisLabels, topLabel } = generateYAxis(revenue);
// const { yAxisLabels, topLabel } = generateYAxis(revenue);

if (!revenue || revenue.length === 0) {
return <p className="mt-4 text-gray-400">No data available.</p>;
}
// if (!revenue || revenue.length === 0) {
// return <p className="mt-4 text-gray-400">No data available.</p>;
// }

return (
<div className="w-full md:col-span-4">
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
Recent Revenue
</h2>
<div className="rounded-xl bg-gray-50 p-4">
{/* <div className="rounded-xl bg-gray-50 p-4">
<div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
{/* y-axis */}
<div
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
style={{ height: `${chartHeight}px` }}
Expand All @@ -35,14 +34,12 @@ export default async function RevenueChart() {
{revenue.map((month) => (
<div key={month.month} className="flex flex-col items-center gap-2">
{/* bars */}
<div
className="w-full rounded-md bg-blue-300"
style={{
height: `${(chartHeight / topLabel) * month.revenue}px`,
}}
></div>
{/* x-axis */}
<p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
{month.month}
</p>
Expand All @@ -53,7 +50,7 @@ export default async function RevenueChart() {
<CalendarIcon className="h-5 w-5 text-gray-500" />
<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
</div>
</div>
</div> */}
</div>
);
}
62 changes: 31 additions & 31 deletions dashboard/starter-example/app/ui/invoices/pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,43 @@ import Link from 'next/link';
import { generatePagination } from '@/app/lib/utils';

export default function Pagination({ totalPages }: { totalPages: number }) {
const allPages = generatePagination(currentPage, totalPages);
// const allPages = generatePagination(currentPage, totalPages);

return (
<div className="inline-flex">
<PaginationArrow
direction="left"
href={createPageURL(currentPage - 1)}
isDisabled={currentPage <= 1}
/>
// <div className="inline-flex">
// <PaginationArrow
// direction="left"
// href={createPageURL(currentPage - 1)}
// isDisabled={currentPage <= 1}
// />

<div className="flex -space-x-px">
{allPages.map((page, index) => {
let position: 'first' | 'last' | 'single' | 'middle' | undefined;
// <div className="flex -space-x-px">
// {allPages.map((page, index) => {
// let position: 'first' | 'last' | 'single' | 'middle' | undefined;

if (index === 0) position = 'first';
if (index === allPages.length - 1) position = 'last';
if (allPages.length === 1) position = 'single';
if (page === '...') position = 'middle';
// if (index === 0) position = 'first';
// if (index === allPages.length - 1) position = 'last';
// if (allPages.length === 1) position = 'single';
// if (page === '...') position = 'middle';

return (
<PaginationNumber
key={page}
href={createPageURL(page)}
page={page}
position={position}
isActive={currentPage === page}
/>
);
})}
</div>
// return (
// <PaginationNumber
// key={page}
// href={createPageURL(page)}
// page={page}
// position={position}
// isActive={currentPage === page}
// />
// );
// })}
// </div>

<PaginationArrow
direction="right"
href={createPageURL(currentPage + 1)}
isDisabled={currentPage >= totalPages}
/>
</div>
// <PaginationArrow
// direction="right"
// href={createPageURL(currentPage + 1)}
// isDisabled={currentPage >= totalPages}
// />
// </div>
);
}

Expand Down
26 changes: 13 additions & 13 deletions dashboard/starter-example/app/ui/search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,27 @@

import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import { useDebouncedCallback } from 'use-debounce';
// import { useDebouncedCallback } from 'use-debounce';

export default function Search({ placeholder }: { placeholder: string }) {
const searchParams = useSearchParams();
const { replace } = useRouter();
const pathname = usePathname();

const handleSearch = useDebouncedCallback((term) => {
console.log(`Searching... ${term}`);
// const handleSearch = useDebouncedCallback((term) => {
// console.log(`Searching... ${term}`);

const params = new URLSearchParams(searchParams);
// const params = new URLSearchParams(searchParams);

params.set('page', '1');
// params.set('page', '1');

if (term) {
params.set('query', term);
} else {
params.delete('query');
}
replace(`${pathname}?${params.toString()}`);
}, 300);
// if (term) {
// params.set('query', term);
// } else {
// params.delete('query');
// }
// replace(`${pathname}?${params.toString()}`);
// }, 300);

return (
<div className="relative flex flex-1 flex-shrink-0">
Expand All @@ -33,7 +33,7 @@ export default function Search({ placeholder }: { placeholder: string }) {
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
placeholder={placeholder}
onChange={(e) => {
handleSearch(e.target.value);
// handleSearch(e.target.value);
}}
defaultValue={searchParams.get('query')?.toString()}
/>
Expand Down

0 comments on commit 8361b58

Please sign in to comment.