feat: add option to toggle window transparent

This commit is contained in:
reya
2024-07-02 08:49:52 +07:00
parent d9fe647f8e
commit ed4f89ff66
30 changed files with 112 additions and 166 deletions

View File

@@ -17,7 +17,7 @@ export const Conversation = memo(function Conversation({
<Note.Provider event={event}>
<Note.Root
className={cn(
"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
"bg-white dark:bg-black/20 rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
className,
)}
>

View File

@@ -97,7 +97,7 @@ export function NoteContent({
return (
<div className="relative flex flex-col gap-2">
{blurred ? (
<div className="absolute inset-0 z-10 flex items-center justify-center w-full h-full bg-black/80 backdrop-blur-xl">
<div className="absolute inset-0 z-10 flex items-center justify-center w-full h-full bg-black/80 backdrop-blur-lg">
<div className="flex flex-col items-center justify-center gap-2 text-center">
<p className="text-sm text-white/60">
The content is hidden because the author

View File

@@ -1,10 +1,9 @@
import { Carousel, CarouselItem } from "@lume/ui";
export function Videos({ urls }: { urls: string[] }) {
if (urls.length === 1) {
return (
<div className="group px-3">
return (
<div className="group px-3">
{urls.map((url) => (
<video
key={url}
className="max-h-[400px] w-auto object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
preload="metadata"
controls
@@ -13,26 +12,7 @@ export function Videos({ urls }: { urls: string[] }) {
<source src={`${urls[0]}#t=0.1`} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
);
}
return (
<Carousel
items={urls}
renderItem={({ item, isSnapPoint }) => (
<CarouselItem key={item} isSnapPoint={isSnapPoint}>
<video
className="w-full h-full object-cover rounded-lg outline outline-1 -outline-offset-1 outline-black/15"
preload="metadata"
controls={false}
muted
>
<source src={`${item}#t=0.1`} type="video/mp4" />
Your browser does not support the video tag.
</video>
</CarouselItem>
)}
/>
))}
</div>
);
}

View File

@@ -15,7 +15,7 @@ export const Quote = memo(function Quote({
<Note.Provider event={event}>
<Note.Root
className={cn(
"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
"bg-white dark:bg-black/20 rounded-xl flex flex-col gap-3 shadow-primary dark:ring-1 ring-neutral-800/50",
className,
)}
>

View File

@@ -33,7 +33,7 @@ export const RepostNote = memo(function RepostNote({
return (
<Note.Root
className={cn(
"bg-white dark:bg-black/20 backdrop-blur-lg rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 ring-neutral-800/50",
className,
)}
>

View File

@@ -14,7 +14,7 @@ export const TextNote = memo(function TextNote({
<Note.Provider event={event}>
<Note.Root
className={cn(
"bg-white dark:bg-black/20 backdrop-blur rounded-xl shadow-primary dark:ring-1 dark:ring-white/5",
"bg-white dark:bg-black/20 rounded-xl shadow-primary dark:ring-1 dark:ring-white/5",
className,
)}
>