diff --git a/apps/www/app/global.css b/apps/www/app/global.css index 7e4c53f..c493916 100644 --- a/apps/www/app/global.css +++ b/apps/www/app/global.css @@ -18,6 +18,10 @@ --headless-color: 250 80% 54%; --mdx-color: 0 0% 9%; --ui-color: 220deg 91% 54%; + --shiki-light: #4c4f69; + --shiki-dark: #cdd6f4; + --shiki-light-bg: #eff1f5; + --shiki-dark-bg: #0f0f0f !important; } .dark { @@ -49,8 +53,12 @@ --card: 230 40% 26.3% !important; } +/* #nd-docs-layout { + background: var(--popover); +} */ + .words_width_animat { - animation: words_width_animation 4s normal; + animation: words_width_animation 2.5s normal; } .words_width_lens_body { @@ -66,11 +74,11 @@ } .words_interfaces::after { - animation: words_interfaces_after_animation 3.5s normal; + animation: words_interfaces_after_animation 1.5s normal; } .words_interfaces::before { - animation: words_interfaces_before_animation 3.5s normal; + animation: words_interfaces_before_animation 1.5s normal; } @keyframes words_width_animation { @@ -82,6 +90,10 @@ top: -28px; opacity: 0.5; } + 75% { + top: -28px; + opacity: 1; + } 100% { top: -28px; opacity: 1; @@ -126,10 +138,10 @@ width: 0; opacity: 0; } - 65% { + /* 65% { width: 205px; opacity: 0.5; - } + } */ 100% { width: 205px; opacity: 1; @@ -141,10 +153,10 @@ height: 0; opacity: 0; } - 65% { + /* 65% { height: 60px; opacity: 0.5; - } + } */ 100% { height: 60px; opacity: 1; diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx index e3b27f6..5656366 100644 --- a/apps/www/app/layout.tsx +++ b/apps/www/app/layout.tsx @@ -6,7 +6,9 @@ import { GeistSans } from "geist/font/sans"; import type { ReactNode } from "react"; import { RuruProvider } from "ruru-ui/provider"; import "fumadocs-ui/style.css"; +import "fumadocs-ui/twoslash.css"; import { ScrollArea } from "@/components/scroll-area"; +import { Analytics } from "@vercel/analytics/react"; export const metadata = createMetadata({ title: { @@ -29,8 +31,9 @@ export default function Layout({ children }: { children: ReactNode }) { return ( + - + {children} diff --git a/apps/www/app/playground/page.tsx b/apps/www/app/playground/page.tsx new file mode 100644 index 0000000..0aed718 --- /dev/null +++ b/apps/www/app/playground/page.tsx @@ -0,0 +1,565 @@ +"use client"; + +import React from "react"; +import Card from "@/components/ui/card"; +import { ModeToggle } from "@/components/ui/ModeToggle"; +import { + ArrowLeftIcon, + ArrowRightIcon, + CubeIcon, + PersonIcon, +} from "@radix-ui/react-icons"; +import { Button } from "ruru-ui/components/button"; +import { Spinner } from "ruru-ui/components/spinner"; +import { + Avatar, + AvatarGroup, + AvatarWithBadge, +} from "ruru-ui/components/avatar"; +import { Badge } from "ruru-ui/components/badge"; +import { Checkbox } from "ruru-ui/components/checkbox"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "ruru-ui/components/tooltip"; +import { Input, SearchInput } from "ruru-ui/components/input"; +import { Textarea } from "ruru-ui/components/textarea"; +import { Tabs, Tab } from "ruru-ui/components/tabs"; +import { Switch } from "ruru-ui/components/switch"; +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, + SelectSeparator, +} from "ruru-ui/components/select"; +import AnimationToggle from "@/components/animationToggle"; + +const Playground = () => { + return ( +
+ + + + + + + + + + {/* +

+ Types +

*/} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* + + Click here + + */} + + {/* + + */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ }> + gray + + }> + gray + + }> + gray + + + }> + gray-subtle + + }> + gray-subtle + + }> + gray-subtle + +
+ +
+ }> + blue + + }> + blue + + }> + blue + + + }> + blue-subtle + + }> + blue-subtle + + }> + blue-subtle + +
+ +
+ }> + purple + + }> + purple + + }> + purple + + + }> + purple-subtle + + }> + purple-subtle + + }> + purple-subtle + +
+ +
+ }> + amber + + }> + amber + + }> + amber + + + }> + amber-subtle + + }> + amber-subtle + + }> + amber-subtle + +
+ +
+ }> + red + + }> + red + + }> + red + + + }> + red-subtle + + }> + red-subtle + + }> + red-subtle + +
+ +
+ }> + pink + + }> + pink + + }> + pink + + + }> + pink-subtle + + }> + pink-subtle + + }> + pink-subtle + +
+ +
+ }> + green + + }> + green + + }> + green + + + }> + green-subtle + + }> + green-subtle + + }> + green-subtle + +
+ +
+ }> + teal + + }> + teal + + }> + teal + + + }> + teal-subtle + + }> + teal-subtle + + }> + teal-subtle + +
+ +
+ }> + inverted + + }> + inverted + + }> + inverted + +
+
+ + + + + sm + + + md + + + lg + + + + + + + + +
+ + + + {/* */} + @ruru + + +

author of ruru UI

+ + + +
+ + +
+
+
+ + } placeholder="Enter your name" /> + } placeholder="Enter your name" /> + } + suffix={} + placeholder="Enter your name" + /> + + + + + + + + +
+ + + + + + +
+