Skip to content

Commit

Permalink
some frame stuff, looks nice right?
Browse files Browse the repository at this point in the history
  • Loading branch information
sphinxrave committed Oct 1, 2023
1 parent 181bc3f commit 127e6bd
Show file tree
Hide file tree
Showing 7 changed files with 247 additions and 13 deletions.
14 changes: 8 additions & 6 deletions packages/react/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -65,4 +67,4 @@
"vite": "^4.4.9",
"windy-radix-palette": "^1.0.0-rc.0"
}
}
}
9 changes: 5 additions & 4 deletions packages/react/src/components/layout/Frame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

Expand All @@ -30,10 +31,10 @@ export function Frame() {
return (
<div className={mainClasses} id='layout'>
<aside className="border border-red">
<div id="sidebar" className="border border-4 border-red-200">
<code><pre className='whitespace-pre-wrap'>{JSON.stringify(fc, null, 2)}</pre></code>
<button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded' onClick={() => fc.toggle()}>Toggle Sidebar</button>
</div>
{/* <code><pre className='whitespace-pre-wrap'>{JSON.stringify(fc, null, 2)}</pre></code>
<button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded' onClick={() => fc.toggle()}>Toggle Sidebar</button> */}
<Sidebar id="sidebar" />

</aside>
<header className="border border-green">Header
<button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded' onClick={() => fc.toggle()}>Toggle Sidebar</button>
Expand Down
5 changes: 3 additions & 2 deletions packages/react/src/components/layout/useFrame.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -57,5 +58,5 @@ export const frameContext = proxyWithPersist('page_pref', {
frameContext.sidebarOpen = true;
frameContext.sidebarPrefOpen = frameContext.sidebarOpen;
}
}, ['sidebarPrefOpen'])
})

120 changes: 120 additions & 0 deletions packages/react/src/components/sidebar/sidebar.tsx
Original file line number Diff line number Diff line change
@@ -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<HTMLDivElement> {
}

export function Sidebar({ className }: SidebarProps) {
return (
<div className={cn("pb-12", className)}>
<div className="space-y-4 py-4">
<div className="px-3 py-2">
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
Hololive
</h2>
<div className="space-y-1">
<Button variant="secondary" className="w-full justify-start">
<HiOutlineHome /> Home
</Button>
<Button variant="ghost" className="w-full justify-start">
<HiUserGroup /> Channels
</Button>
{/* <Button variant="ghost" className="w-full justify-start">
Radio
</Button> */}
</div>
</div>
<div className="px-3 py-2">
<h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">
Holodex
</h2>
<div className="space-y-1">
<Button variant="ghost" className="w-full justify-start">
<HiRectangleGroup />
Multiview
</Button>
<Button variant="ghost" className="w-full justify-start">
<HiOutlineQueueList />
Playlist
</Button>
<Button variant="ghost" className="w-full justify-start">
<HiOutlineMusicalNote />
Music
</Button>
<Button variant="ghost" className="w-full justify-start">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-4 w-4"
>
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
<circle cx="17" cy="7" r="5" />
</svg>
Artists
</Button>
<Button variant="ghost" className="w-full justify-start">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-4 w-4"
>
<path d="m16 6 4 14" />
<path d="M12 6v14" />
<path d="M8 8v12" />
<path d="M4 4v16" />
</svg>
Albums
</Button>
</div>
</div>
<div className="py-2">
<h2 className="relative px-7 text-lg font-semibold tracking-tight">
Playlists
</h2>
<ScrollArea className="h-[300px] px-1">
<div className="space-y-1 p-2">
{/* {playlists?.map((playlist, i) => (
<Button
key={`${playlist}-${i}`}
variant="ghost"
className="w-full justify-start font-normal"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-4 w-4"
>
<path d="M21 15V6" />
<path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
<path d="M12 12H3" />
<path d="M16 6H3" />
<path d="M12 18H3" />
</svg>
{playlist}
</Button>
))} */}
</div>
</ScrollArea>
</div>
</div>
</div>
)
}
57 changes: 57 additions & 0 deletions packages/react/src/shadcn/ui/button.tsx
Original file line number Diff line number Diff line change
@@ -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<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
Button.displayName = "Button"

export { Button, buttonVariants }
51 changes: 51 additions & 0 deletions packages/react/src/shadcn/ui/scroll-area.tsx
Original file line number Diff line number Diff line change
@@ -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<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb
className={cn(
"relative rounded-full bg-border",
orientation === "vertical" && "flex-1"
)}
/>
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }

0 comments on commit 127e6bd

Please sign in to comment.