fix:adding copy/paste for raw md and skeleon loading (#154)

* fix:adding copy/paste for raw md

* feat: adding loading skeleton on team page

* fix: some params fix

* fix: trail comp drop

* aligning up the items

apps/www/src/app/(app)/dashboard/settings/[...slug]/page.tsx

@@ -140,7 +140,7 @@ const Setting = async ({ params }: { params: { slug: string[] } }) => {
                             }
                         </CardFooter>
                     </Card>
-                    <div className=" mt-6 flex-col md:flex-row flex items-center gap-8 pb-4">
+                    <div className=" mt-6 flex-col md:flex-row flex justify-start items-start gap-8 pb-4">
                         <PricingCard tier={PLANS[0]} user={{
                             ...user,
                             portalUrl

apps/www/src/app/(app)/dashboard/team/loading.tsx

@@ -0,0 +1,31 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { DataTableSkeleton } from "@/components/table-skeleton";
+
+const Page = async () => {
+  return (
+    <section className=" space-y-8">
+      <HeaderSkeleton />
+
+      <Card className=" bg-gradient-to-tr from-white/80 to-white dark:from-stone-900/30 dark:to-black">
+        <CardContent>
+          <DataTableSkeleton columnCount={4} />
+        </CardContent>
+      </Card>
+    </section>
+  );
+};
+
+export default Page;
+
+export const HeaderSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-6 mt-10">
+      <Skeleton className="rouneded-xl p-5 w-72" />
+      <div className="flex w-full gap-5">
+        <Skeleton className="rounded-xl p-10 w-3/4" />
+        <Skeleton className="rounded-xl p-10 w-1/4" />
+      </div>
+    </div>
+  );
+};

apps/www/src/components/code-blocks.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, CopyIcon, Terminal } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface CodeBlockProps extends React.HTMLProps<HTMLPreElement> {
+    // set by `rehype-pretty-code`
+    "data-language"?: string
+    // set by `rehype-pretty-code`
+    "data-theme"?: string
+}
+
+export function CodeBlock({ children, ...props }: CodeBlockProps) {
+
+    const ref = React.useRef<HTMLSpanElement>(null)
+    const [isCopied, setIsCopied] = React.useState(false)
+
+    return (
+        <pre
+            className="my-10  relative flex items-center gap-2 rounded-2xl border-l-[2px] bg-gradient-to-r from-[rgba(17,17,17,0)] via-stone-900/50 to-[rgba(17,17,17,0)]  px-0 py-2.5 font-mono text-sm font-light text-muted-foreground"
+            {...props}
+        >
+            <ScrollArea
+                className="flex-1 py-2"
+            >
+                <span ref={ref}>{children}</span>
+            </ScrollArea>
+            <Button
+                variant="link"
+                // @ts-ignore
+                size="icon"
+                className="size-4 w-4 h-4 absolute right-3 top-2 bg-transparent text-muted-foreground  hover:text-zinc-50 "
+                onClick={() => {
+                    if (typeof window === "undefined") return
+                    setIsCopied(true)
+                    void window.navigator.clipboard.writeText(
+                        ref.current?.innerText ?? ""
+                    )
+                    setTimeout(() => setIsCopied(false), 2000)
+                }}
+            >
+                {isCopied ? (
+
+                    <CheckIcon className="size-3" aria-hidden="true" />
+
+                ) : (
+
+                    <CopyIcon className="size-3" aria-hidden="true" />
+
+
+                )}
+                <span className="sr-only">
+                    {isCopied ? "Copied" : "Copy to clipboard"}
+                </span>
+            </Button>
+
+        </pre>
+    )
+}

apps/www/src/components/mdx-components.tsx

@@ -8,6 +8,7 @@ import { MdxCard } from "@/components/mdx-card";
 import { cn } from "@/lib/utils";
 import { Steps } from "nextra-theme-docs";
 import { MdxTab, MdxTabs } from "./mdx-tab";
+import { CodeBlock } from "./code-blocks";
 
 export const components = {
     h1: ({ className, ...props }) => (
@@ -100,12 +101,7 @@ export const components = {
             {...props}
         />
     ),
-    pre: ({ className, ...props }) => (
-        <pre
-            className={cn("mb-4 mt-6 overflow-x-auto rounded-lg border bg-black py-4", className)}
-            {...props}
-        />
-    ),
+    pre:CodeBlock,
     code: ({ className, ...props }) => {
         return (
             <div className=" flex items-center justify-between px-4">

apps/www/src/components/table-skeleton.tsx

@@ -0,0 +1,93 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+
+interface DataTableSkeletonProps {
+  columnCount: number
+  rowCount?: number
+
+}
+
+export function DataTableSkeleton({
+  columnCount,
+  rowCount = 2,
+
+}: DataTableSkeletonProps) {
+  return (
+    <div className="w-full space-y-3 overflow-auto">
+      <div className="flex mt-10 flex-1 items-center space-x-2">
+            <Skeleton className="h-10 w-[150px] lg:w-[445px]" />
+            <Skeleton className="h-10 w-[450px] lg:w-[70px]" />
+
+
+
+        </div>
+      <div className="flex w-full items-center justify-between space-x-2 overflow-auto p-1">
+
+        <div className="flex mt-10 flex-1 items-center space-x-2">
+            <Skeleton className="h-10 w-[150px] lg:w-[445px]" />
+
+
+        </div>
+        <div className="flex items-end gap-2 space-x-2">
+
+            <Skeleton className="h-10 w-[100px]" />
+            <Skeleton className="h-10 w-[100px]" />
+
+        </div>
+      </div>
+      <div className="rounded-md border">
+        <Table className="min-w-[640px]">
+          <TableHeader>
+            {Array.from({ length: 1 }).map((_, i) => (
+              <TableRow key={i} className="hover:bg-transparent">
+                {Array.from({ length: columnCount }).map((_, i) => (
+                  <TableHead key={i}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {Array.from({ length: rowCount }).map((_, i) => (
+              <TableRow key={i} className="hover:bg-transparent">
+                {Array.from({ length: columnCount }).map((_, j) => (
+                  <TableCell key={j}>
+                    <Skeleton className="h-6 w-full" />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8">
+        <div className="flex-1">
+          <Skeleton className="h-8 w-40" />
+        </div>
+        <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8">
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-8 w-24" />
+            <Skeleton className="h-8 w-[70px]" />
+          </div>
+          <div className="flex w-[100px] items-center justify-center text-sm font-medium">
+            <Skeleton className="h-8 w-20" />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Skeleton className="hidden size-8 lg:block" />
+            <Skeleton className="size-8" />
+            <Skeleton className="size-8" />
+            <Skeleton className="hidden size-8 lg:block" />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}