chore: format
This commit is contained in:
@@ -5,7 +5,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||||
|
|
||||||
<title>Jumble</title>
|
<title>Jumble</title>
|
||||||
<meta name="description" content="A user-friendly Nostr client focused on relay feed browsing and relay discovery" />
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="A user-friendly Nostr client focused on relay feed browsing and relay discovery"
|
||||||
|
/>
|
||||||
<meta
|
<meta
|
||||||
name="keywords"
|
name="keywords"
|
||||||
content="jumble, nostr, web, client, relay, feed, social, pwa, simple, clean"
|
content="jumble, nostr, web, client, relay, feed, social, pwa, simple, clean"
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
|
import Note from '@/components/Note'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||||
import { useToast } from '@/hooks/use-toast'
|
import { useToast } from '@/hooks/use-toast'
|
||||||
import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
|
import { createCommentDraftEvent, createShortTextNoteDraftEvent } from '@/lib/draft-event'
|
||||||
import { useNostr } from '@/providers/NostrProvider'
|
import { useNostr } from '@/providers/NostrProvider'
|
||||||
@@ -14,9 +16,6 @@ import Preview from './Preview'
|
|||||||
import SendOnlyToSwitch from './SendOnlyToSwitch'
|
import SendOnlyToSwitch from './SendOnlyToSwitch'
|
||||||
import Uploader from './Uploader'
|
import Uploader from './Uploader'
|
||||||
import { preprocessContent } from './utils'
|
import { preprocessContent } from './utils'
|
||||||
import Note from '@/components/Note'
|
|
||||||
import { ScrollArea } from "@/components/ui/scroll-area"
|
|
||||||
|
|
||||||
|
|
||||||
export default function NormalPostContent({
|
export default function NormalPostContent({
|
||||||
defaultContent = '',
|
defaultContent = '',
|
||||||
|
|||||||
@@ -1,11 +1,9 @@
|
|||||||
import * as React from "react"
|
import * as React from 'react'
|
||||||
import useEmblaCarousel, {
|
import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
|
||||||
type UseEmblaCarouselType,
|
import { ArrowLeft, ArrowRight } from 'lucide-react'
|
||||||
} from "embla-carousel-react"
|
|
||||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from '@/lib/utils'
|
||||||
import { Button } from "@/components/ui/button"
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
type CarouselApi = UseEmblaCarouselType[1]
|
type CarouselApi = UseEmblaCarouselType[1]
|
||||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||||
@@ -15,7 +13,7 @@ type CarouselPlugin = UseCarouselParameters[1]
|
|||||||
type CarouselProps = {
|
type CarouselProps = {
|
||||||
opts?: CarouselOptions
|
opts?: CarouselOptions
|
||||||
plugins?: CarouselPlugin
|
plugins?: CarouselPlugin
|
||||||
orientation?: "horizontal" | "vertical"
|
orientation?: 'horizontal' | 'vertical'
|
||||||
setApi?: (api: CarouselApi) => void
|
setApi?: (api: CarouselApi) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -34,7 +32,7 @@ function useCarousel() {
|
|||||||
const context = React.useContext(CarouselContext)
|
const context = React.useContext(CarouselContext)
|
||||||
|
|
||||||
if (!context) {
|
if (!context) {
|
||||||
throw new Error("useCarousel must be used within a <Carousel />")
|
throw new Error('useCarousel must be used within a <Carousel />')
|
||||||
}
|
}
|
||||||
|
|
||||||
return context
|
return context
|
||||||
@@ -43,23 +41,11 @@ function useCarousel() {
|
|||||||
const Carousel = React.forwardRef<
|
const Carousel = React.forwardRef<
|
||||||
HTMLDivElement,
|
HTMLDivElement,
|
||||||
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
||||||
>(
|
>(({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
|
||||||
(
|
|
||||||
{
|
|
||||||
orientation = "horizontal",
|
|
||||||
opts,
|
|
||||||
setApi,
|
|
||||||
plugins,
|
|
||||||
className,
|
|
||||||
children,
|
|
||||||
...props
|
|
||||||
},
|
|
||||||
ref
|
|
||||||
) => {
|
|
||||||
const [carouselRef, api] = useEmblaCarousel(
|
const [carouselRef, api] = useEmblaCarousel(
|
||||||
{
|
{
|
||||||
...opts,
|
...opts,
|
||||||
axis: orientation === "horizontal" ? "x" : "y",
|
axis: orientation === 'horizontal' ? 'x' : 'y'
|
||||||
},
|
},
|
||||||
plugins
|
plugins
|
||||||
)
|
)
|
||||||
@@ -85,10 +71,10 @@ const Carousel = React.forwardRef<
|
|||||||
|
|
||||||
const handleKeyDown = React.useCallback(
|
const handleKeyDown = React.useCallback(
|
||||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||||
if (event.key === "ArrowLeft") {
|
if (event.key === 'ArrowLeft') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
scrollPrev()
|
scrollPrev()
|
||||||
} else if (event.key === "ArrowRight") {
|
} else if (event.key === 'ArrowRight') {
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
scrollNext()
|
scrollNext()
|
||||||
}
|
}
|
||||||
@@ -110,11 +96,11 @@ const Carousel = React.forwardRef<
|
|||||||
}
|
}
|
||||||
|
|
||||||
onSelect(api)
|
onSelect(api)
|
||||||
api.on("reInit", onSelect)
|
api.on('reInit', onSelect)
|
||||||
api.on("select", onSelect)
|
api.on('select', onSelect)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
api?.off("select", onSelect)
|
api?.off('select', onSelect)
|
||||||
}
|
}
|
||||||
}, [api, onSelect])
|
}, [api, onSelect])
|
||||||
|
|
||||||
@@ -124,18 +110,17 @@ const Carousel = React.forwardRef<
|
|||||||
carouselRef,
|
carouselRef,
|
||||||
api: api,
|
api: api,
|
||||||
opts,
|
opts,
|
||||||
orientation:
|
orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
|
||||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
|
||||||
scrollPrev,
|
scrollPrev,
|
||||||
scrollNext,
|
scrollNext,
|
||||||
canScrollPrev,
|
canScrollPrev,
|
||||||
canScrollNext,
|
canScrollNext
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
onKeyDownCapture={handleKeyDown}
|
onKeyDownCapture={handleKeyDown}
|
||||||
className={cn("relative", className)}
|
className={cn('relative', className)}
|
||||||
role="region"
|
role="region"
|
||||||
aria-roledescription="carousel"
|
aria-roledescription="carousel"
|
||||||
{...props}
|
{...props}
|
||||||
@@ -144,14 +129,11 @@ const Carousel = React.forwardRef<
|
|||||||
</div>
|
</div>
|
||||||
</CarouselContext.Provider>
|
</CarouselContext.Provider>
|
||||||
)
|
)
|
||||||
}
|
})
|
||||||
)
|
Carousel.displayName = 'Carousel'
|
||||||
Carousel.displayName = "Carousel"
|
|
||||||
|
|
||||||
const CarouselContent = React.forwardRef<
|
const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
HTMLDivElement,
|
({ className, ...props }, ref) => {
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ className, ...props }, ref) => {
|
|
||||||
const { carouselRef, orientation } = useCarousel()
|
const { carouselRef, orientation } = useCarousel()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -159,21 +141,20 @@ const CarouselContent = React.forwardRef<
|
|||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex",
|
'flex',
|
||||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
CarouselContent.displayName = "CarouselContent"
|
)
|
||||||
|
CarouselContent.displayName = 'CarouselContent'
|
||||||
|
|
||||||
const CarouselItem = React.forwardRef<
|
const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||||
HTMLDivElement,
|
({ className, ...props }, ref) => {
|
||||||
React.HTMLAttributes<HTMLDivElement>
|
|
||||||
>(({ className, ...props }, ref) => {
|
|
||||||
const { orientation } = useCarousel()
|
const { orientation } = useCarousel()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -182,20 +163,19 @@ const CarouselItem = React.forwardRef<
|
|||||||
role="group"
|
role="group"
|
||||||
aria-roledescription="slide"
|
aria-roledescription="slide"
|
||||||
className={cn(
|
className={cn(
|
||||||
"min-w-0 shrink-0 grow-0 basis-full",
|
'min-w-0 shrink-0 grow-0 basis-full',
|
||||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
orientation === 'horizontal' ? 'pl-4' : 'pt-4',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
CarouselItem.displayName = "CarouselItem"
|
)
|
||||||
|
CarouselItem.displayName = 'CarouselItem'
|
||||||
|
|
||||||
const CarouselPrevious = React.forwardRef<
|
const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
|
||||||
HTMLButtonElement,
|
({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
|
||||||
React.ComponentProps<typeof Button>
|
|
||||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
||||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -204,10 +184,10 @@ const CarouselPrevious = React.forwardRef<
|
|||||||
variant={variant}
|
variant={variant}
|
||||||
size={size}
|
size={size}
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute h-8 w-8 rounded-full",
|
'absolute h-8 w-8 rounded-full',
|
||||||
orientation === "horizontal"
|
orientation === 'horizontal'
|
||||||
? "-left-12 top-1/2 -translate-y-1/2"
|
? '-left-12 top-1/2 -translate-y-1/2'
|
||||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
disabled={!canScrollPrev}
|
disabled={!canScrollPrev}
|
||||||
@@ -218,13 +198,12 @@ const CarouselPrevious = React.forwardRef<
|
|||||||
<span className="sr-only">Previous slide</span>
|
<span className="sr-only">Previous slide</span>
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
CarouselPrevious.displayName = "CarouselPrevious"
|
)
|
||||||
|
CarouselPrevious.displayName = 'CarouselPrevious'
|
||||||
|
|
||||||
const CarouselNext = React.forwardRef<
|
const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
|
||||||
HTMLButtonElement,
|
({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
|
||||||
React.ComponentProps<typeof Button>
|
|
||||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
|
||||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -233,10 +212,10 @@ const CarouselNext = React.forwardRef<
|
|||||||
variant={variant}
|
variant={variant}
|
||||||
size={size}
|
size={size}
|
||||||
className={cn(
|
className={cn(
|
||||||
"absolute h-8 w-8 rounded-full",
|
'absolute h-8 w-8 rounded-full',
|
||||||
orientation === "horizontal"
|
orientation === 'horizontal'
|
||||||
? "-right-12 top-1/2 -translate-y-1/2"
|
? '-right-12 top-1/2 -translate-y-1/2'
|
||||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
disabled={!canScrollNext}
|
disabled={!canScrollNext}
|
||||||
@@ -247,14 +226,8 @@ const CarouselNext = React.forwardRef<
|
|||||||
<span className="sr-only">Next slide</span>
|
<span className="sr-only">Next slide</span>
|
||||||
</Button>
|
</Button>
|
||||||
)
|
)
|
||||||
})
|
|
||||||
CarouselNext.displayName = "CarouselNext"
|
|
||||||
|
|
||||||
export {
|
|
||||||
type CarouselApi,
|
|
||||||
Carousel,
|
|
||||||
CarouselContent,
|
|
||||||
CarouselItem,
|
|
||||||
CarouselPrevious,
|
|
||||||
CarouselNext,
|
|
||||||
}
|
}
|
||||||
|
)
|
||||||
|
CarouselNext.displayName = 'CarouselNext'
|
||||||
|
|
||||||
|
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import * as React from "react"
|
import * as React from 'react'
|
||||||
import * as TabsPrimitive from "@radix-ui/react-tabs"
|
import * as TabsPrimitive from '@radix-ui/react-tabs'
|
||||||
|
|
||||||
import { cn } from "@/lib/utils"
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
const Tabs = TabsPrimitive.Root
|
const Tabs = TabsPrimitive.Root
|
||||||
|
|
||||||
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
|
|||||||
<TabsPrimitive.List
|
<TabsPrimitive.List
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
|
'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
|
|||||||
<TabsPrimitive.Trigger
|
<TabsPrimitive.Trigger
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
|
'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
|
|||||||
<TabsPrimitive.Content
|
<TabsPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
@@ -1,10 +1,7 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
darkMode: ['class'],
|
darkMode: ['class'],
|
||||||
content: [
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
||||||
'./index.html',
|
|
||||||
'./src/**/*.{ts,tsx}',
|
|
||||||
],
|
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
|
|||||||
Reference in New Issue
Block a user