49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
/**
|
|
* ANNOTATED COPY — every line explained
|
|
* Source: src/app/shop/layout.tsx
|
|
* NOT used by the app — read this to learn how the real file works
|
|
*/
|
|
// Import React — core UI library (components, hooks, JSX)
|
|
import { Suspense } from 'react';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Named export constant — shared config/data imported elsewhere
|
|
export const metadata = {
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
title: 'Shop',
|
|
// Line 5: description:
|
|
description:
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
'Browse premium halal chicken, beef, lamb, and fish. Customized cuts delivered fresh to your door.',
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
};
|
|
// (blank line — separates logical blocks for readability)
|
|
// Default export — main component/page Next.js or other files import
|
|
export default function ShopLayout({
|
|
// Property or array item — trailing comma allowed in TypeScript
|
|
children,
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}: {
|
|
// Line 12: children: React.ReactNode;
|
|
children: React.ReactNode;
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}) {
|
|
// Return value from function
|
|
return <Suspense fallback={<ShopLoading />}>{children}</Suspense>;
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}
|
|
// (blank line — separates logical blocks for readability)
|
|
// Function declaration — reusable logic in this file
|
|
function ShopLoading() {
|
|
// Return JSX — describes UI tree React renders to the DOM
|
|
return (
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="flex min-h-[50vh] items-center justify-center">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-brand-200 border-t-brand-700" />
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// Line 22: );
|
|
);
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}
|