-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
)
}
diff --git a/src/components-grid.ts b/src/components-grid.ts
index 5734db1..d798b93 100644
--- a/src/components-grid.ts
+++ b/src/components-grid.ts
@@ -20,21 +20,21 @@ export const NAV_CATEGORIES: NavSection[] = [
{
title: "Inputs",
items: [
- { title: "Button", slug: "button", breakpoints: { xl: 3, md: 2, xs: 1 } },
+ { title: "Button", slug: "button", breakpoints: { xl: 3, lg: 2, xs: 1 } },
{
title: "Button Group",
slug: "button-group",
- breakpoints: { xxl: 3, md: 2, sm: 1, xs: 1 },
+ breakpoints: { xxl: 3, lg: 2, sm: 1, xs: 1 },
},
{
title: "Checkbox",
slug: "checkbox",
- breakpoints: { md: 2, sm: 2, xs: 1 },
+ breakpoints: { lg: 2, xs: 1 },
},
{
title: "Combobox",
slug: "combobox",
- breakpoints: { xl: 3, lg: 3, md: 2, sm: 1, xs: 1 },
+ breakpoints: { xl: 3, lg: 2, xs: 1 },
},
{
title: "Command",
diff --git a/src/components/animation/TechOrbit.tsx b/src/components/animation/TechOrbit.tsx
index 8a0d019..641b4c9 100644
--- a/src/components/animation/TechOrbit.tsx
+++ b/src/components/animation/TechOrbit.tsx
@@ -97,7 +97,6 @@ export default function TechOrbit() {
className="text-muted-foreground"
/>
- {/* shadcn */}
}
/>
- {/* Tailwind 2 */}
}
/>
- {/* Code/Slash (//) */}
}
/>
+
+
}
+ />
+
+
}
+ />
+
+
}
+ />
{/* Orbit 2 (Middle - radius ~240px) */}
@@ -146,7 +164,7 @@ export default function TechOrbit() {
{/* React */}
}
@@ -159,6 +177,20 @@ export default function TechOrbit() {
orbitDirection="counter-clockwise"
icon={
}
/>
+
+
}
+ />
+
+
}
+ />
{/* Orbit 1 (Inner - radius ~140px) */}
diff --git a/src/components/block-item.tsx b/src/components/block-item.tsx
index fb6b00f..b1fcadb 100644
--- a/src/components/block-item.tsx
+++ b/src/components/block-item.tsx
@@ -2,28 +2,13 @@
import {
memo,
+ SyntheticEvent,
useCallback,
useEffect,
useRef,
useState,
- type SyntheticEvent,
} from "react"
-// assets
-import {
- ArrowUpRight,
- Code,
- Copy,
- Monitor,
- RotateCw,
- Smartphone,
- SquareCheckBig,
- Tablet,
- Terminal,
-} from "lucide-react"
-// third party
-import { codeToHtml, type BundledLanguage } from "shiki"
-import { cn } from "@/lib/utils"
// shadcn
import { Button, buttonVariants } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
@@ -40,8 +25,27 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip"
+
+// third party
+import { type BundledLanguage, codeToHtml } from "shiki"
+
// project
import Loader from "@/components/Loader"
+import { cn } from "@/lib/utils"
+
+// assets
+import {
+ ArrowUpRight,
+ Code,
+ Copy,
+ Loader2,
+ Monitor,
+ RotateCw,
+ Smartphone,
+ SquareCheckBig,
+ Terminal,
+ Tablet,
+} from "lucide-react"
export interface Item {
name: string
@@ -55,15 +59,35 @@ export interface Item {
const CodeBlock = memo(
({ children, lang }: { children: string; lang: BundledLanguage }) => {
const [html, setHtml] = useState
("")
+ const [isLoading, setIsLoading] = useState(true)
+
+ const [prevProps, setPrevProps] = useState({ children, lang })
+ if (prevProps.children !== children || prevProps.lang !== lang) {
+ setPrevProps({ children, lang })
+ setIsLoading(true)
+ }
+
useEffect(() => {
let mounted = true
+ setIsLoading(true)
codeToHtml(children, { lang, theme: "one-dark-pro" }).then((res) => {
- if (mounted) setHtml(res)
+ if (mounted) {
+ setHtml(res)
+ setIsLoading(false)
+ }
})
return () => {
mounted = false
}
}, [children, lang])
+
+ if (isLoading) {
+ return (
+
+
+
+ )
+ }
return (
Copy code
-