diff --git a/apps/www/content/blog/next-js-getting-started.mdx b/apps/www/content/blog/next-js-getting-started.mdx index d2eaa3791..47435a771 100644 --- a/apps/www/content/blog/next-js-getting-started.mdx +++ b/apps/www/content/blog/next-js-getting-started.mdx @@ -143,12 +143,12 @@ And that's literally all it takes. You've just created the `/about` route. Now, // app/about/page.tsx export default function AboutPage() { return ( +
-

About Us

-

This is the about page for our first Next.js app!

+

About Us

+

This is the about page for our first Next.js app!

-); -} +); } With that code in place, Next.js handles the rest. Fire up your browser and navigate to `localhost:3000/about`, and you'll see your new component rendered on the screen. @@ -225,19 +225,19 @@ export default async function ProductsPage() { const data = await getProducts(); return ( +
-

Our Products

-
-{data.products.map((product) => ( -
-

{product.title}

-

{product.description}

-
-))} -
+

Our Products

+
+ {data.products.map((product) => ( +
+

{product.title}

+

{product.description}

+
+ ))} +
-); -} +); } Did you catch it? `ProductsPage` is an `async` function. That one keyword lets you `await` the `getProducts()` call right before returning your JSX. It’s an incredibly clean and direct way to handle what used to be a much more complicated task. diff --git a/apps/www/public/llms-full.txt b/apps/www/public/llms-full.txt index 528ffc5dd..2f63f45fd 100644 --- a/apps/www/public/llms-full.txt +++ b/apps/www/public/llms-full.txt @@ -6619,8 +6619,8 @@ export const FlickeringGrid: React.FC = ({ canvas.height = height * dpr canvas.style.width = `${width}px` canvas.style.height = `${height}px` - const cols = Math.floor(width / (squareSize + gridGap)) - const rows = Math.floor(height / (squareSize + gridGap)) + const cols = Math.ceil(width / (squareSize + gridGap)) + const rows = Math.ceil(height / (squareSize + gridGap)) const squares = new Float32Array(cols * rows) for (let i = 0; i < squares.length; i++) { diff --git a/apps/www/public/r/flickering-grid.json b/apps/www/public/r/flickering-grid.json index fecf6a2b2..9c414e73a 100644 --- a/apps/www/public/r/flickering-grid.json +++ b/apps/www/public/r/flickering-grid.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/magicui/flickering-grid.tsx", - "content": "\"use client\"\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface FlickeringGridProps extends React.HTMLAttributes {\n squareSize?: number\n gridGap?: number\n flickerChance?: number\n color?: string\n width?: number\n height?: number\n className?: string\n maxOpacity?: number\n}\n\nexport const FlickeringGrid: React.FC = ({\n squareSize = 4,\n gridGap = 6,\n flickerChance = 0.3,\n color = \"rgb(0, 0, 0)\",\n width,\n height,\n className,\n maxOpacity = 0.3,\n ...props\n}) => {\n const canvasRef = useRef(null)\n const containerRef = useRef(null)\n const [isInView, setIsInView] = useState(false)\n const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })\n\n const memoizedColor = useMemo(() => {\n const toRGBA = (color: string) => {\n if (typeof window === \"undefined\") {\n return `rgba(0, 0, 0,`\n }\n const canvas = document.createElement(\"canvas\")\n canvas.width = canvas.height = 1\n const ctx = canvas.getContext(\"2d\")\n if (!ctx) return \"rgba(255, 0, 0,\"\n ctx.fillStyle = color\n ctx.fillRect(0, 0, 1, 1)\n const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)\n return `rgba(${r}, ${g}, ${b},`\n }\n return toRGBA(color)\n }, [color])\n\n const setupCanvas = useCallback(\n (canvas: HTMLCanvasElement, width: number, height: number) => {\n const dpr = window.devicePixelRatio || 1\n canvas.width = width * dpr\n canvas.height = height * dpr\n canvas.style.width = `${width}px`\n canvas.style.height = `${height}px`\n const cols = Math.floor(width / (squareSize + gridGap))\n const rows = Math.floor(height / (squareSize + gridGap))\n\n const squares = new Float32Array(cols * rows)\n for (let i = 0; i < squares.length; i++) {\n squares[i] = Math.random() * maxOpacity\n }\n\n return { cols, rows, squares, dpr }\n },\n [squareSize, gridGap, maxOpacity]\n )\n\n const updateSquares = useCallback(\n (squares: Float32Array, deltaTime: number) => {\n for (let i = 0; i < squares.length; i++) {\n if (Math.random() < flickerChance * deltaTime) {\n squares[i] = Math.random() * maxOpacity\n }\n }\n },\n [flickerChance, maxOpacity]\n )\n\n const drawGrid = useCallback(\n (\n ctx: CanvasRenderingContext2D,\n width: number,\n height: number,\n cols: number,\n rows: number,\n squares: Float32Array,\n dpr: number\n ) => {\n ctx.clearRect(0, 0, width, height)\n ctx.fillStyle = \"transparent\"\n ctx.fillRect(0, 0, width, height)\n\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n const opacity = squares[i * rows + j]\n ctx.fillStyle = `${memoizedColor}${opacity})`\n ctx.fillRect(\n i * (squareSize + gridGap) * dpr,\n j * (squareSize + gridGap) * dpr,\n squareSize * dpr,\n squareSize * dpr\n )\n }\n }\n },\n [memoizedColor, squareSize, gridGap]\n )\n\n useEffect(() => {\n const canvas = canvasRef.current\n const container = containerRef.current\n if (!canvas || !container) return\n\n const ctx = canvas.getContext(\"2d\")\n if (!ctx) return\n\n let animationFrameId: number\n let gridParams: ReturnType\n\n const updateCanvasSize = () => {\n const newWidth = width || container.clientWidth\n const newHeight = height || container.clientHeight\n setCanvasSize({ width: newWidth, height: newHeight })\n gridParams = setupCanvas(canvas, newWidth, newHeight)\n }\n\n updateCanvasSize()\n\n let lastTime = 0\n const animate = (time: number) => {\n if (!isInView) return\n\n const deltaTime = (time - lastTime) / 1000\n lastTime = time\n\n updateSquares(gridParams.squares, deltaTime)\n drawGrid(\n ctx,\n canvas.width,\n canvas.height,\n gridParams.cols,\n gridParams.rows,\n gridParams.squares,\n gridParams.dpr\n )\n animationFrameId = requestAnimationFrame(animate)\n }\n\n const resizeObserver = new ResizeObserver(() => {\n updateCanvasSize()\n })\n\n resizeObserver.observe(container)\n\n const intersectionObserver = new IntersectionObserver(\n ([entry]) => {\n setIsInView(entry.isIntersecting)\n },\n { threshold: 0 }\n )\n\n intersectionObserver.observe(canvas)\n\n if (isInView) {\n animationFrameId = requestAnimationFrame(animate)\n }\n\n return () => {\n cancelAnimationFrame(animationFrameId)\n resizeObserver.disconnect()\n intersectionObserver.disconnect()\n }\n }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n return (\n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface FlickeringGridProps extends React.HTMLAttributes {\n squareSize?: number\n gridGap?: number\n flickerChance?: number\n color?: string\n width?: number\n height?: number\n className?: string\n maxOpacity?: number\n}\n\nexport const FlickeringGrid: React.FC = ({\n squareSize = 4,\n gridGap = 6,\n flickerChance = 0.3,\n color = \"rgb(0, 0, 0)\",\n width,\n height,\n className,\n maxOpacity = 0.3,\n ...props\n}) => {\n const canvasRef = useRef(null)\n const containerRef = useRef(null)\n const [isInView, setIsInView] = useState(false)\n const [canvasSize, setCanvasSize] = useState({ width: 0, height: 0 })\n\n const memoizedColor = useMemo(() => {\n const toRGBA = (color: string) => {\n if (typeof window === \"undefined\") {\n return `rgba(0, 0, 0,`\n }\n const canvas = document.createElement(\"canvas\")\n canvas.width = canvas.height = 1\n const ctx = canvas.getContext(\"2d\")\n if (!ctx) return \"rgba(255, 0, 0,\"\n ctx.fillStyle = color\n ctx.fillRect(0, 0, 1, 1)\n const [r, g, b] = Array.from(ctx.getImageData(0, 0, 1, 1).data)\n return `rgba(${r}, ${g}, ${b},`\n }\n return toRGBA(color)\n }, [color])\n\n const setupCanvas = useCallback(\n (canvas: HTMLCanvasElement, width: number, height: number) => {\n const dpr = window.devicePixelRatio || 1\n canvas.width = width * dpr\n canvas.height = height * dpr\n canvas.style.width = `${width}px`\n canvas.style.height = `${height}px`\n const cols = Math.ceil(width / (squareSize + gridGap))\n const rows = Math.ceil(height / (squareSize + gridGap))\n\n const squares = new Float32Array(cols * rows)\n for (let i = 0; i < squares.length; i++) {\n squares[i] = Math.random() * maxOpacity\n }\n\n return { cols, rows, squares, dpr }\n },\n [squareSize, gridGap, maxOpacity]\n )\n\n const updateSquares = useCallback(\n (squares: Float32Array, deltaTime: number) => {\n for (let i = 0; i < squares.length; i++) {\n if (Math.random() < flickerChance * deltaTime) {\n squares[i] = Math.random() * maxOpacity\n }\n }\n },\n [flickerChance, maxOpacity]\n )\n\n const drawGrid = useCallback(\n (\n ctx: CanvasRenderingContext2D,\n width: number,\n height: number,\n cols: number,\n rows: number,\n squares: Float32Array,\n dpr: number\n ) => {\n ctx.clearRect(0, 0, width, height)\n ctx.fillStyle = \"transparent\"\n ctx.fillRect(0, 0, width, height)\n\n for (let i = 0; i < cols; i++) {\n for (let j = 0; j < rows; j++) {\n const opacity = squares[i * rows + j]\n ctx.fillStyle = `${memoizedColor}${opacity})`\n ctx.fillRect(\n i * (squareSize + gridGap) * dpr,\n j * (squareSize + gridGap) * dpr,\n squareSize * dpr,\n squareSize * dpr\n )\n }\n }\n },\n [memoizedColor, squareSize, gridGap]\n )\n\n useEffect(() => {\n const canvas = canvasRef.current\n const container = containerRef.current\n if (!canvas || !container) return\n\n const ctx = canvas.getContext(\"2d\")\n if (!ctx) return\n\n let animationFrameId: number\n let gridParams: ReturnType\n\n const updateCanvasSize = () => {\n const newWidth = width || container.clientWidth\n const newHeight = height || container.clientHeight\n setCanvasSize({ width: newWidth, height: newHeight })\n gridParams = setupCanvas(canvas, newWidth, newHeight)\n }\n\n updateCanvasSize()\n\n let lastTime = 0\n const animate = (time: number) => {\n if (!isInView) return\n\n const deltaTime = (time - lastTime) / 1000\n lastTime = time\n\n updateSquares(gridParams.squares, deltaTime)\n drawGrid(\n ctx,\n canvas.width,\n canvas.height,\n gridParams.cols,\n gridParams.rows,\n gridParams.squares,\n gridParams.dpr\n )\n animationFrameId = requestAnimationFrame(animate)\n }\n\n const resizeObserver = new ResizeObserver(() => {\n updateCanvasSize()\n })\n\n resizeObserver.observe(container)\n\n const intersectionObserver = new IntersectionObserver(\n ([entry]) => {\n setIsInView(entry.isIntersecting)\n },\n { threshold: 0 }\n )\n\n intersectionObserver.observe(canvas)\n\n if (isInView) {\n animationFrameId = requestAnimationFrame(animate)\n }\n\n return () => {\n cancelAnimationFrame(animationFrameId)\n resizeObserver.disconnect()\n intersectionObserver.disconnect()\n }\n }, [setupCanvas, updateSquares, drawGrid, width, height, isInView])\n\n return (\n \n \n \n )\n}\n", "type": "registry:ui" } ] diff --git a/apps/www/registry/magicui/flickering-grid.tsx b/apps/www/registry/magicui/flickering-grid.tsx index 73e35ee67..17bb6750d 100644 --- a/apps/www/registry/magicui/flickering-grid.tsx +++ b/apps/www/registry/magicui/flickering-grid.tsx @@ -55,8 +55,8 @@ export const FlickeringGrid: React.FC = ({ canvas.height = height * dpr canvas.style.width = `${width}px` canvas.style.height = `${height}px` - const cols = Math.floor(width / (squareSize + gridGap)) - const rows = Math.floor(height / (squareSize + gridGap)) + const cols = Math.ceil(width / (squareSize + gridGap)) + const rows = Math.ceil(height / (squareSize + gridGap)) const squares = new Float32Array(cols * rows) for (let i = 0; i < squares.length; i++) {