Skip to content

Commit b331ae8

Browse files
Riley1101wangshu24TheOrcDevBIT-zhaoyang
authored
Feature/ shiki added syntax highlight (#196)
* added syntax highlight * Feat/drawer (#195) * setting up 8bit version of the drawer component, setting up the template for the drawer page and example from shadcn * made drawer component for content, trigger, footer and header into 8bit pixel style * added example of drawer component, metadata graph image and ran registry build * fix issue with dark mode button border not yellow * reran registry build * rewrite content component to make use of vaul primitive drawer content and modify drawer handle * reran registry build * remove top side for drawer content * reran registry build * refactor: update drawer and sheet components styling and positioning * feat(drawer) change example code --------- Co-authored-by: OrcDev <urosmiric88@gmail.com> * chore: add GitHub Sponsors funding configuration file (#197) * docs: add GitHub sponsor badge to README (#198) * refactor: update React.ElementRef to React.ComponentRef in UI components for better type safety (#199) * Feat/toast (#200) * feat(registry) add toast * refactor(toast) change to 8-bit toast * feat(installation-commands) replace sonner with 8-bit toast (#201) * chore: latest dependencies (#202) * Feat navigation menu (#203) * feat: navigation menu * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - create better, more consistent border behavior - fix broken links in demo * feat: navigation menu fix code rabbit ai comments * feat: navigation menu - Address review comment * feat: navigation menu - update registry file * feat(nav-items) add new tag to navigation menu (#204) * Feat/themes (#205) * feat(app) add themes page * feat(themes) add all retro themes * feat: add theme copy dialog and refactor theme management with TypeScript enums * style: update calendar sizing, code snippet layout and theme selector text colors * style: update theme selector UI and adjust accent color values across themes * style: adjust accent and muted color values in dark and light themes * feat(themes) add metadata (#206) * chore: add semicolons and consistent formatting across components (#207) * chore: latest dependencies (#208) * feat(button) add local font for react support (#209) * refactor: replace custom font with Google Fonts for Press Start 2P (#210) * refactor: move retro font to external CSS and simplify button styling (#211) * refactor(app) make all components work on react (#212) * style: add type prefix to VariantProps imports across components (#213) * refactor: remove new badges from nav items (#214) * refactor: remove new badge from mobile navigation items (#215) * fix: adjust YAxis width from 45 to 46 pixels in chart component (#216) * feat(registry) add bar chart component (#217) * feat: add authentication and charts blocks pages with example components (#218) * added syntax highlight * Removed unused code * re added Max height control --------- Co-authored-by: Elias Tran <trandinhphuc1997@gmail.com> Co-authored-by: OrcDev <urosmiric88@gmail.com> Co-authored-by: YangZhao <bit.zhaoyang512@gmail.com>
1 parent 8568d83 commit b331ae8

File tree

5 files changed

+1493
-500
lines changed

5 files changed

+1493
-500
lines changed

‎app/docs/components/code-snippet.tsx‎

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,17 @@
33
import { useState } from "react";
44

55
import { Check, Clipboard } from "lucide-react";
6+
import ShikiHighlighter from "react-shiki";
67
import { toast } from "sonner";
78

9+
import { cn } from "@/lib/utils";
10+
811
import { Button } from "@/components/ui/button";
12+
import { ScrollArea } from "@/components/ui/scroll-area";
13+
14+
function countLines(code: string) {
15+
return code.split("\n").length;
16+
}
917

1018
export default function CodeSnippet({
1119
children,
@@ -26,20 +34,38 @@ export default function CodeSnippet({
2634
};
2735

2836
return (
29-
<div className="bg-[#121212] rounded-lg overflow-hidden border border-zinc-800 break-all max-h-[400px] overflow-y-scroll overflow-x-auto">
30-
<div className="text-white flex justify-between px-2 pl-4 py-2">
31-
<pre className="text-sm flex items-center">
32-
<code className="text-white text-nowrap">{children}</code>
33-
</pre>
34-
35-
<Button variant="ghost" size="icon" onClick={handleCopy}>
36-
{copied ? (
37-
<Check className="size-3" />
38-
) : (
39-
<Clipboard className="size-3" />
40-
)}
41-
</Button>
42-
</div>
43-
</div>
37+
<ScrollArea
38+
className={cn(
39+
"relative",
40+
countLines(children?.toString() || "") > 10 && "h-[400px]"
41+
)}
42+
>
43+
<ShikiHighlighter
44+
addDefaultStyles={false}
45+
language="jsx"
46+
showLanguage={false}
47+
theme={{
48+
light: "laserwave",
49+
dark: "laserwave",
50+
}}
51+
as="div"
52+
className="w-full text-sm [&>pre]:p-4"
53+
>
54+
{children?.toString().trim() || ""}
55+
</ShikiHighlighter>
56+
57+
<Button
58+
variant="secondary"
59+
size="icon"
60+
onClick={handleCopy}
61+
className="absolute z-10 top-2 right-2"
62+
>
63+
{copied ? (
64+
<Check className="size-3" />
65+
) : (
66+
<Clipboard className="size-3" />
67+
)}
68+
</Button>
69+
</ScrollArea>
4470
);
4571
}

‎app/docs/components/installation-commands.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ export default function InstallationCommands({
3232

3333
return (
3434
<div className="rounded-lg overflow-hidden border border-zinc-800">
35-
<div className="bg-[#121212] text-white">
35+
<div className="bg-[#27212e] text-white">
3636
<Tabs defaultValue="pnpm">
37-
<TabsList className="bg-[#121212] border-b border-zinc-800 rounded-none h-12 px-2 w-full justify-between">
37+
<TabsList className="bg-[#27212e] border-b border-zinc-800 rounded-none h-12 px-2 w-full justify-between">
3838
<div>
3939
<TabsTrigger
4040
value="pnpm"

‎components/ui/scroll-area.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
5+
6+
import { cn } from "@/lib/utils"
7+
8+
function ScrollArea({
9+
className,
10+
children,
11+
...props
12+
}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
13+
return (
14+
<ScrollAreaPrimitive.Root
15+
data-slot="scroll-area"
16+
className={cn("relative", className)}
17+
{...props}
18+
>
19+
<ScrollAreaPrimitive.Viewport
20+
data-slot="scroll-area-viewport"
21+
className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
22+
>
23+
{children}
24+
</ScrollAreaPrimitive.Viewport>
25+
<ScrollBar />
26+
<ScrollAreaPrimitive.Corner />
27+
</ScrollAreaPrimitive.Root>
28+
)
29+
}
30+
31+
function ScrollBar({
32+
className,
33+
orientation = "vertical",
34+
...props
35+
}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
36+
return (
37+
<ScrollAreaPrimitive.ScrollAreaScrollbar
38+
data-slot="scroll-area-scrollbar"
39+
orientation={orientation}
40+
className={cn(
41+
"flex touch-none p-px transition-colors select-none",
42+
orientation === "vertical" &&
43+
"h-full w-2.5 border-l border-l-transparent",
44+
orientation === "horizontal" &&
45+
"h-2.5 flex-col border-t border-t-transparent",
46+
className
47+
)}
48+
{...props}
49+
>
50+
<ScrollAreaPrimitive.ScrollAreaThumb
51+
data-slot="scroll-area-thumb"
52+
className="bg-border relative flex-1 rounded-full"
53+
/>
54+
</ScrollAreaPrimitive.ScrollAreaScrollbar>
55+
)
56+
}
57+
58+
export { ScrollArea, ScrollBar }

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
"react-day-picker": "8.10.1",
5151
"react-dom": "^19.1.0",
5252
"react-resizable-panels": "^3.0.2",
53+
"react-shiki": "^0.6.0",
5354
"recharts": "^2.15.3",
5455
"shadcn": "2.6.0",
5556
"sonner": "^2.0.3",

0 commit comments

Comments
 (0)