From 127e6bd99cbc31b9b11f993d26d56880b92e5093 Mon Sep 17 00:00:00 2001 From: sphinxrave <62570796+sphinxrave@users.noreply.github.com> Date: Sun, 1 Oct 2023 14:00:47 -0700 Subject: [PATCH] some frame stuff, looks nice right? --- packages/react/package-lock.json | 14 +- packages/react/package.json | 4 +- .../react/src/components/layout/Frame.tsx | 9 +- .../react/src/components/layout/useFrame.ts | 5 +- .../react/src/components/sidebar/sidebar.tsx | 120 ++++++++++++++++++ packages/react/src/shadcn/ui/button.tsx | 57 +++++++++ packages/react/src/shadcn/ui/scroll-area.tsx | 51 ++++++++ 7 files changed, 247 insertions(+), 13 deletions(-) create mode 100644 packages/react/src/components/sidebar/sidebar.tsx create mode 100644 packages/react/src/shadcn/ui/button.tsx create mode 100644 packages/react/src/shadcn/ui/scroll-area.tsx diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json index dcb3f6538..f0b986801 100644 --- a/packages/react/package-lock.json +++ b/packages/react/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.1", "dependencies": { "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-slot": "^1.0.2", "@radix-ui/themes": "^1.1.2", "@tanstack/react-query": "^4.35.0", "class-variance-authority": "^0.7.0", @@ -1864,9 +1866,9 @@ } }, "node_modules/@radix-ui/react-scroll-area": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.4.tgz", - "integrity": "sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz", + "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==", "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/number": "1.0.1", @@ -9010,9 +9012,9 @@ } }, "@radix-ui/react-scroll-area": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.4.tgz", - "integrity": "sha512-OIClwBkwPG+FKvC4OMTRaa/3cfD069nkKFFL/TQzRzaO42Ce5ivKU9VMKgT7UU6UIkjcQqKBrDOIzWtPGw6e6w==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz", + "integrity": "sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==", "requires": { "@babel/runtime": "^7.13.10", "@radix-ui/number": "1.0.1", diff --git a/packages/react/package.json b/packages/react/package.json index 77ee39a74..76a332088 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -11,6 +11,8 @@ }, "dependencies": { "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-scroll-area": "^1.0.5", + "@radix-ui/react-slot": "^1.0.2", "@radix-ui/themes": "^1.1.2", "@tanstack/react-query": "^4.35.0", "class-variance-authority": "^0.7.0", @@ -65,4 +67,4 @@ "vite": "^4.4.9", "windy-radix-palette": "^1.0.0-rc.0" } -} \ No newline at end of file +} diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx index 7effee14b..25f2c4a31 100644 --- a/packages/react/src/components/layout/Frame.tsx +++ b/packages/react/src/components/layout/Frame.tsx @@ -6,6 +6,7 @@ import { frameContext } from './useFrame' import { useSnapshot } from 'valtio' import { useEffect } from 'react' import classNames from 'classnames' +import { Sidebar } from '../sidebar/sidebar' export function Frame() { @@ -30,10 +31,10 @@ export function Frame() { return (
Header diff --git a/packages/react/src/components/layout/useFrame.ts b/packages/react/src/components/layout/useFrame.ts index 7383ddbc3..e220dc87a 100644 --- a/packages/react/src/components/layout/useFrame.ts +++ b/packages/react/src/components/layout/useFrame.ts @@ -1,9 +1,10 @@ import { proxyWithPersist } from '@/valtio-persist'; +import { proxy } from 'valtio'; const MobileSizeBreak = 768; const FooterSizeBreak = 500; -export const frameContext = proxyWithPersist('page_pref', { +export const frameContext = proxy({ pageIsFullscreen: false, siteIsSmall: window.innerWidth < MobileSizeBreak, sidebarShouldBeFullscreen: window.innerWidth < FooterSizeBreak, @@ -57,5 +58,5 @@ export const frameContext = proxyWithPersist('page_pref', { frameContext.sidebarOpen = true; frameContext.sidebarPrefOpen = frameContext.sidebarOpen; } -}, ['sidebarPrefOpen']) +}) diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx new file mode 100644 index 000000000..a5e6412e7 --- /dev/null +++ b/packages/react/src/components/sidebar/sidebar.tsx @@ -0,0 +1,120 @@ +import { cn } from "@/lib/utils" +import { Button } from "@/shadcn/ui/button" +import { ScrollArea } from "@/shadcn/ui/scroll-area" +import { HiOutlineHome, HiUserGroup } from "react-icons/hi" +import { HiRectangleGroup, HiOutlineQueueList } from "react-icons/hi2" + +interface SidebarProps extends React.HTMLAttributes { +} + +export function Sidebar({ className }: SidebarProps) { + return ( +
+
+
+

+ Hololive +

+
+ + + {/* */} +
+
+
+

+ Holodex +

+
+ + + + + +
+
+
+

+ Playlists +

+ +
+ {/* {playlists?.map((playlist, i) => ( + + ))} */} +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx new file mode 100644 index 000000000..19871c490 --- /dev/null +++ b/packages/react/src/shadcn/ui/button.tsx @@ -0,0 +1,57 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const buttonVariants = cva( + "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: + "bg-primary text-primary-foreground shadow hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + outline: + "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-9 px-4 py-2 gap-2", + sm: "h-8 rounded-md px-3 text-xs gap-1.5", + lg: "h-10 rounded-md px-8 gap-3", + icon: "h-9 w-9", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } +) + +export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/packages/react/src/shadcn/ui/scroll-area.tsx b/packages/react/src/shadcn/ui/scroll-area.tsx new file mode 100644 index 000000000..648b04d0d --- /dev/null +++ b/packages/react/src/shadcn/ui/scroll-area.tsx @@ -0,0 +1,51 @@ +import * as React from "react" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" + +import { cn } from "@/lib/utils" + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar }