Skip to content

Commit 4525327

Browse files
Ray-D-SongRay-D-Song
authored
Merge pull request #19 from Ray-D-Song/view
feat: new sidebar
2 parents 4652939 + 80095f2 commit 4525327

16 files changed

+1151
-85
lines changed

‎.github/workflows/release.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ jobs:
5959
id: create_release
6060
uses: softprops/action-gh-release@v1
6161
with:
62-
tag_name: v0.1.0-beta.2
62+
tag_name: v0.1.0-beta.3
6363
files: |
6464
extension.zip
6565
service.zip

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"dependencies": {
3030
"@hookform/resolvers": "^3.9.0",
3131
"@radix-ui/react-checkbox": "^1.1.2",
32+
"@radix-ui/react-collapsible": "^1.1.1",
3233
"@radix-ui/react-context-menu": "^2.2.2",
3334
"@radix-ui/react-dialog": "^1.1.2",
3435
"@radix-ui/react-dropdown-menu": "^2.1.2",

‎packages/shared/components/collapsible.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
"use client"
2+
3+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
4+
5+
const Collapsible = CollapsiblePrimitive.Root
6+
7+
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
8+
9+
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
10+
11+
export { Collapsible, CollapsibleTrigger, CollapsibleContent }

‎packages/shared/components/hooks/use-mobile.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useEffect, useState } from 'react'
2+
3+
function useIsMobile() {
4+
const [isMobile, setIsMobile] = useState(window.innerWidth < 768)
5+
6+
useEffect(() => {
7+
let timeoutId: ReturnType<typeof setTimeout>
8+
9+
const handleResize = () => {
10+
clearTimeout(timeoutId)
11+
timeoutId = setTimeout(() => {
12+
setIsMobile(window.innerWidth < 768)
13+
}, 100)
14+
}
15+
16+
window.addEventListener('resize', handleResize)
17+
18+
return () => {
19+
window.removeEventListener('resize', handleResize)
20+
clearTimeout(timeoutId)
21+
}
22+
}, [])
23+
24+
return isMobile
25+
}
26+
27+
export { useIsMobile }

‎packages/shared/components/sheet.tsx

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as SheetPrimitive from "@radix-ui/react-dialog"
5+
import { cva, type VariantProps } from "class-variance-authority"
6+
import { X } from "lucide-react"
7+
8+
import { cn } from "../utils/helper"
9+
10+
const Sheet = SheetPrimitive.Root
11+
12+
const SheetTrigger = SheetPrimitive.Trigger
13+
14+
const SheetClose = SheetPrimitive.Close
15+
16+
const SheetPortal = SheetPrimitive.Portal
17+
18+
const SheetOverlay = React.forwardRef<
19+
React.ElementRef<typeof SheetPrimitive.Overlay>,
20+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
21+
>(({ className, ...props }, ref) => (
22+
<SheetPrimitive.Overlay
23+
className={cn(
24+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
25+
className
26+
)}
27+
{...props}
28+
ref={ref}
29+
/>
30+
))
31+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
32+
33+
const sheetVariants = cva(
34+
"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
35+
{
36+
variants: {
37+
side: {
38+
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
39+
bottom:
40+
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
41+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
42+
right:
43+
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
44+
},
45+
},
46+
defaultVariants: {
47+
side: "right",
48+
},
49+
}
50+
)
51+
52+
interface SheetContentProps
53+
extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
54+
VariantProps<typeof sheetVariants> {}
55+
56+
const SheetContent = React.forwardRef<
57+
React.ElementRef<typeof SheetPrimitive.Content>,
58+
SheetContentProps
59+
>(({ side = "right", className, children, ...props }, ref) => (
60+
<SheetPortal>
61+
<SheetOverlay />
62+
<SheetPrimitive.Content
63+
ref={ref}
64+
className={cn(sheetVariants({ side }), className)}
65+
{...props}
66+
>
67+
{children}
68+
<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
69+
<X className="h-4 w-4" />
70+
<span className="sr-only">Close</span>
71+
</SheetPrimitive.Close>
72+
</SheetPrimitive.Content>
73+
</SheetPortal>
74+
))
75+
SheetContent.displayName = SheetPrimitive.Content.displayName
76+
77+
const SheetHeader = ({
78+
className,
79+
...props
80+
}: React.HTMLAttributes<HTMLDivElement>) => (
81+
<div
82+
className={cn(
83+
"flex flex-col space-y-2 text-center sm:text-left",
84+
className
85+
)}
86+
{...props}
87+
/>
88+
)
89+
SheetHeader.displayName = "SheetHeader"
90+
91+
const SheetFooter = ({
92+
className,
93+
...props
94+
}: React.HTMLAttributes<HTMLDivElement>) => (
95+
<div
96+
className={cn(
97+
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
98+
className
99+
)}
100+
{...props}
101+
/>
102+
)
103+
SheetFooter.displayName = "SheetFooter"
104+
105+
const SheetTitle = React.forwardRef<
106+
React.ElementRef<typeof SheetPrimitive.Title>,
107+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108+
>(({ className, ...props }, ref) => (
109+
<SheetPrimitive.Title
110+
ref={ref}
111+
className={cn("text-lg font-semibold text-foreground", className)}
112+
{...props}
113+
/>
114+
))
115+
SheetTitle.displayName = SheetPrimitive.Title.displayName
116+
117+
const SheetDescription = React.forwardRef<
118+
React.ElementRef<typeof SheetPrimitive.Description>,
119+
React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120+
>(({ className, ...props }, ref) => (
121+
<SheetPrimitive.Description
122+
ref={ref}
123+
className={cn("text-sm text-muted-foreground", className)}
124+
{...props}
125+
/>
126+
))
127+
SheetDescription.displayName = SheetPrimitive.Description.displayName
128+
129+
export {
130+
Sheet,
131+
SheetPortal,
132+
SheetOverlay,
133+
SheetTrigger,
134+
SheetClose,
135+
SheetContent,
136+
SheetHeader,
137+
SheetFooter,
138+
SheetTitle,
139+
SheetDescription,
140+
}

0 commit comments

Comments
 (0)