Search
Copy Code
Previous: Scroll Area
Next: Tabs
Close Terminal
Light Mode
Reading #01
Non-duality.
Advaita Vedanta is the school of the Upanishads that Shankara put in order in the eighth century. It makes one claim and spends the rest of its time defending it. There is one reality, Brahman, and the self you take yourself to be is not separate from it.
01
Reading #02
The ground of the soul.
Meister Eckhart was a Dominican who preached in German seven hundred years ago. He told his listeners that the soul has a ground where it and God are one and the same, with no image, no name and nothing made.
02
W
W
50%
resizable-demo.tsx
resizable.tsx
prompt.md
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import * as React from "react"
4
import {
5
ResizableHandle,
6
ResizablePanel,
7
ResizablePanelGroup,
8
} from "@/components/ui/resizable"
9
10
export default function ResizableDemo() {
11
const [leftWidth, setLeftWidth] = React.useState(50)
12
const [containerWidth, setContainerWidth] = React.useState(614) // Estimated total width
13
14
// We can calculate pixels based on percentage, assuming max width is around 614px
15
const leftPx = Math.round((leftWidth / 100) * containerWidth)
16
const rightPx = containerWidth - leftPx
17
18
return (
19
<div className="w-full h-full min-h-[600px] flex flex-col items-center justify-center bg-white dark:bg-[#1C1C1C] p-10">
20
<div
21
className="w-full max-w-[650px]"
22
ref={(el) => {
23
if (el) setContainerWidth(el.offsetWidth)
24
}}
25
>
26
<ResizablePanelGroup
27
direction="horizontal"
28
className="min-h-[400px] w-full items-stretch"
29
onLayout={(sizes) => {
30
if (sizes.length > 0) setLeftWidth(sizes[0])
31
}}
32
>
33
<ResizablePanel defaultSize={50} minSize={20} className="relative transition-all pr-3">
34
<div className="h-full rounded-[24px] border border-black/5 dark:border-white/10 bg-white dark:bg-[#161616] p-4 flex flex-col shadow-sm">
35
<div className="w-full h-[140px] rounded-xl overflow-hidden mb-4 shrink-0">
36
<img src="/carousel/1.png" alt="Image 1" className="w-full h-full object-cover" />
37
</div>
38
<div className="text-[13px] text-zinc-500 mb-1">Reading #01</div>
39
<div className="text-[17px] font-semibold text-zinc-900 dark:text-[#F5F5F7] mb-3">Non-duality.</div>
40
<p className="text-[14px] leading-relaxed text-zinc-600 dark:text-[#A1A1AA] line-clamp-6">
41
Advaita Vedanta is the school of the Upanishads that Shankara put in
42
order in the eighth century. It makes one claim and spends the rest of
43
its time defending it. There is one reality, Brahman, and the self you
44
take yourself to be is not separate from it.
45
</p>
46
<div className="mt-auto pt-4 flex justify-center">
47
<div className="w-8 h-8 rounded-full border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 flex items-center justify-center text-[13px] text-zinc-900 dark:text-zinc-300">
48
01
49
</div>
50
</div>
51
</div>
52
</ResizablePanel>
53
54
<ResizableHandle
55
className="w-1.5 rounded-full bg-blue-500 dark:bg-[#5C94FF] mx-1 transition-all hover:bg-blue-600 dark:hover:bg-[#72A3FF]"
56
/>
57
58
<ResizablePanel defaultSize={50} minSize={20} className="relative transition-all pl-3">
59
<div className="h-full rounded-[24px] border border-black/5 dark:border-white/10 bg-white dark:bg-[#161616] p-4 flex flex-col shadow-sm">
60
<div className="w-full h-[140px] rounded-xl overflow-hidden mb-4 shrink-0">
61
<img src="/carousel/2.png" alt="Image 2" className="w-full h-full object-cover grayscale" />
62
</div>
63
<div className="text-[13px] text-zinc-500 mb-1">Reading #02</div>
64
<div className="text-[17px] font-semibold text-zinc-900 dark:text-[#F5F5F7] mb-3">The ground of the soul.</div>
65
<p className="text-[14px] leading-relaxed text-zinc-600 dark:text-[#A1A1AA] line-clamp-6">
66
Meister Eckhart was a Dominican who preached in German seven hundred
67
years ago. He told his listeners that the soul has a ground where it
68
and God are one and the same, with no image, no name and nothing made.
69
</p>
70
<div className="mt-auto pt-4 flex justify-center">
71
<div className="w-8 h-8 rounded-full border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 flex items-center justify-center text-[13px] text-zinc-900 dark:text-zinc-300">
72
02
73
</div>
74
</div>
75
</div>
76
</ResizablePanel>
77
</ResizablePanelGroup>
78
79
{/* Floating Width Indicator */}
80
<div className="mt-8 flex items-center justify-center">
81
<div className="flex items-center gap-1.5 p-1.5 rounded-full bg-black/5 dark:bg-[#161616] border border-black/10 dark:border-white/5 shadow-sm">
82
<div className="flex items-center px-4 py-1.5 rounded-full bg-black dark:bg-[#0A0A0A] text-white">
83
<span className="text-[12px] text-zinc-400 mr-2">W</span>
84
<span className="text-[13px] font-medium">{leftPx}</span>
85
</div>
86
<div className="flex items-center px-4 py-1.5 rounded-full bg-black dark:bg-[#0A0A0A] text-white">
87
<span className="text-[12px] text-zinc-400 mr-2">W</span>
88
<span className="text-[13px] font-medium">{rightPx}</span>
89
</div>
90
<div className="flex items-center px-4 py-1.5 rounded-full bg-white text-black border border-black/5">
91
<span className="text-[13px] font-medium">{Math.round(leftWidth)}%</span>
92
</div>
93
</div>
94
</div>
95
</div>
96
</div>
97
)
98
}
99