Feat/code block (#495)

* feat: Add codeBlock component with responsive token and theme control

* fix: Minor changes

* fix: Minor fix

* feat: Implement syntax highlighting and utility functions for CodeBlock component

* chore: run prettier

* fix: Adjust zIndex in Sidebar and update CodeBlock

* refactor: Update padding structure in CodeBlock component

* fix: Wrap Tooltip content in a Portal and adjust zIndex

---------

Co-authored-by: Harshvardhan Agarwal <agarwal.harsh2021@gmail.com>

Author: vinitkhandal717

apps/site/src/demos/CodeBlockDemo.tsx

@@ -5,6 +5,7 @@ import {
     Menu as MenuIcon,
     BarChart2,
     Type,
+    Code,
     Calendar as CalendarIcon,
     ListFilter,
     User as UserIcon,
@@ -87,6 +88,7 @@ import KeyValuePairDemo from './KeyValuePairDemo'
 import AllComponentsDemo from './AllComponentsDemo'
 import SearchInputDemo from './SearchInputDemo'
 import VirtualListDemo from './VirtualListDemo'
+import CodeBlockDemo from './CodeBlockDemo'
 
 const SidebarDemo = () => {
     const [activeComponent, setActiveComponent] = useState<
@@ -140,6 +142,7 @@ const SidebarDemo = () => {
         | 'dataRangePicker'
         | 'allComponents'
         | 'virtualList'
+        | 'codeBlock'
     >('dataRangePicker')
 
     const [activeTenant, setActiveTenant] = useState<string>('Juspay')
@@ -392,6 +395,8 @@ const SidebarDemo = () => {
                 return <AllComponentsDemo />
             case 'virtualList':
                 return <VirtualListDemo />
+            case 'codeBlock':
+                return <CodeBlockDemo />
             default:
                 return (
                     <div className="p-8">
@@ -801,6 +806,13 @@ const SidebarDemo = () => {
                     isSelected: activeComponent === 'dataRangePicker',
                     onClick: () => setActiveComponent('dataRangePicker'),
                 },
+                {
+                    label: 'Code Block',
+                    leftSlot: (
+                        <Code style={{ width: '16px', height: '16px' }} />
+                    ),
+                    onClick: () => setActiveComponent('codeBlock'),
+                },
             ],
         },
         {

apps/site/src/demos/SidebarDemo.tsx

@@ -73,8 +73,17 @@
     font-display: swap;
 }
 
+/* Smooth scrolling for the entire app */
+html {
+    scroll-behavior: smooth;
+}
+
+* {
+    scroll-behavior: smooth;
+}
+
 :root {
-    --background: #fcfcfc;
+    --background: #fcfcfd;
     --foreground: #171717;
     font-family: 'InterDisplay', sans-serif;
     line-height: 1.5;