Skip to content

Commit e19b92c

Browse files
mehdibhamehdibha
committed
wip we're getting there
1 parent 4271bb5 commit e19b92c

File tree

4 files changed

+95
-27
lines changed

4 files changed

+95
-27
lines changed

‎www/src/app/(home)/page.tsx

+10-9
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,22 @@ export default function HomePage() {
2121
<div className="container">
2222
<section className="max-w-3xl pb-4 pt-8 sm:pt-24 lg:pb-32">
2323
<Button
24+
href="/themes"
2425
prefix={<LayoutTemplateIcon />}
2526
variant="outline"
2627
className="bg-bg-inverse/5 text-fg-muted mb-3 h-7 rounded-lg text-xs [&_svvg]:size-4"
2728
>
2829
Introducing themes
2930
</Button>
30-
<h1 className="text-balance text-3xl tracking-tighter max-lg:font-medium sm:text-4xl md:text-5xl lg:text-6xl">
31+
<h1 className="text-balance text-2xl xs:text-3xl tracking-tighter max-lg:font-medium sm:text-4xl md:text-5xl lg:text-6xl">
3132
Quickly build your component library with a{" "}
3233
<span className="font-bold italic">unique</span> look.
3334
</h1>
34-
<p className="text-fg-muted text-balace mt-4 text-lg">
35+
<p className="text-fg-muted text-balace mt-2 md:mt-4 text-lg">
3536
Over 40 components available in multiple variants ready to match
3637
your brand identity.
3738
</p>
38-
<div className="mt-8 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
39+
<div className="mt-4 sm:mt-8 flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4">
3940
<Button
4041
href="/docs/getting-started/introduction"
4142
variant="primary"
@@ -60,11 +61,11 @@ export default function HomePage() {
6061
<ThemesOverview />
6162
</section>
6263
<section className="mt-10 border-y py-12 lg:py-8">
63-
<div className="container flex flex-col lg:flex-row items-center justify-between gap-5 lg:gap-10">
64-
<h2 className="text-fg-muted text-pretty font-mono text-sm xs:text-base lg:text-lg tracking-tight">
64+
<div className="container flex flex-col items-center justify-between gap-5 lg:flex-row lg:gap-10">
65+
<h2 className="text-fg-muted xs:text-base text-pretty font-mono text-sm tracking-tight lg:text-lg">
6566
Built on modern, battle-tested tools
6667
</h2>
67-
<div className="flex items-center justify-center flex-wrap gap-4 sm:gap-8">
68+
<div className="flex flex-wrap items-center justify-center gap-4 sm:gap-8">
6869
{[
6970
{
7071
label: "react-aria-components",
@@ -107,15 +108,15 @@ export default function HomePage() {
107108
</div>
108109
</div>
109110
</section>
110-
<section className="container pt-14 sm:pt-20 sm:pb-10">
111-
<h2 className="text-pretty text-2xl lg:text-3xl xl:text-4xl font-semibold tracking-tighter">
111+
<section className="container pt-14 sm:pb-10 sm:pt-20">
112+
<h2 className="text-pretty text-2xl font-semibold tracking-tighter lg:text-3xl xl:text-4xl">
112113
Bringing singularity to the web, fueled by your stars.
113114
</h2>
114115
<p className="text-fg-muted mt-2 text-base">
115116
Our contributors are working hard to make the web a more singular
116117
place.
117118
</p>
118-
<div className="mt-6 flex max-xs:flex-col items-center sm:items-end gap-6 sm:gap-10 lg:gap-20 pl-8 pr-4 justify-between sm:justify-start">
119+
<div className="max-xs:flex-col mt-6 flex items-center justify-between gap-6 pl-8 pr-4 sm:items-end sm:justify-start sm:gap-10 lg:gap-20">
119120
<div className="flex flex-col items-center gap-6">
120121
<svg
121122
width="40"

‎www/src/modules/demos/components/components-overview.tsx

+80-13
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,7 @@ export function ComponentsOverview({ className }: { className?: string }) {
4444
const { variants } = useLocalVariants();
4545
const globalVariant = variants.global;
4646
return (
47-
<div
48-
className={cn("grid grid-cols-10 gap-8 p-4 sm:p-8", className)}
49-
>
47+
<div className={cn("grid grid-cols-10 gap-8 p-4 sm:p-8", className)}>
5048
<div className="col-span-10 xl:col-span-6">
5149
<Slider
5250
label="Progress"
@@ -66,7 +64,7 @@ export function ComponentsOverview({ className }: { className?: string }) {
6664
fallback="M"
6765
/>
6866
</div>
69-
<div className="col-span-4 lg:col-span-2 row-span-2">
67+
<div className="col-span-4 row-span-2 lg:col-span-2">
7068
<RadioGroup>
7169
<Radio value="email">Email</Radio>
7270
<Radio value="phone">Phone (SMS)</Radio>
@@ -76,7 +74,7 @@ export function ComponentsOverview({ className }: { className?: string }) {
7674
<Radio value="none">None</Radio>
7775
</RadioGroup>
7876
</div>
79-
<div className="col-span-6 lg:col-span-8 row-span-2 flex flex-col items-end justify-between gap-2 lg:row-span-1 lg:flex-row lg:items-center xl:col-span-5 xl:justify-start">
77+
<div className="col-span-6 row-span-2 flex flex-col items-end justify-between gap-2 lg:col-span-8 lg:row-span-1 lg:flex-row lg:items-center xl:col-span-5 xl:justify-start">
8078
<div className="flex items-center gap-2">
8179
<Button variant={globalVariant}>Button</Button>
8280
<ToggleButton aria-label="pin" variant={globalVariant}>
@@ -111,7 +109,7 @@ export function ComponentsOverview({ className }: { className?: string }) {
111109
/>
112110
</div>
113111
</div>
114-
<div className="col-span-10 lg:col-span-8 flex items-center justify-end gap-2 xl:col-span-3">
112+
<div className="col-span-10 flex items-center justify-end gap-2 lg:col-span-8 xl:col-span-3">
115113
<FileTriggerDemo />
116114
<ColorPicker defaultValue="#5100FF" />
117115
<TimeField aria-label="Event time" />
@@ -175,14 +173,83 @@ export const MobileComponentsOverview = ({
175173
}: {
176174
className?: string;
177175
}) => {
176+
const { variants } = useLocalVariants();
177+
const globalVariant = variants.global;
178178
return (
179-
<div className={cn("space-y-4 p-4", className)}>
180-
<Slider
181-
label="Progress"
182-
showValueLabel
183-
defaultValue={50}
184-
className="w-full"
185-
/>
179+
<div className={cn("grid grid-cols-10 gap-4 p-4", className)}>
180+
<div className="col-span-10">
181+
<Slider
182+
label="Progress"
183+
showValueLabel
184+
defaultValue={50}
185+
variant={globalVariant}
186+
className="!w-full"
187+
/>
188+
</div>
189+
<div className="min-[35rem]:col-span-3 col-span-10 row-span-2 flex justify-between">
190+
<RadioGroup>
191+
<Radio value="email">Email</Radio>
192+
<Radio value="phone">Phone (SMS)</Radio>
193+
<Radio value="notification">
194+
<span className="truncate">Push notification</span>
195+
</Radio>
196+
<Radio value="none">None</Radio>
197+
</RadioGroup>
198+
<div className="min-[35rem]:hidden flex flex-col items-end gap-2">
199+
<Avatar
200+
src="https://github.com/mehdibha.png"
201+
alt="@mehdibha"
202+
fallback="M"
203+
/>
204+
<Switch>
205+
<span className="truncate">Focus mode</span>
206+
</Switch>
207+
</div>
208+
</div>
209+
<div className="min-[35rem]:col-span-7 col-span-10 flex flex-wrap items-center justify-end gap-2">
210+
<Button variant={globalVariant}>Button</Button>
211+
<ToggleButton aria-label="pin" variant={globalVariant}>
212+
<PinIcon />
213+
</ToggleButton>
214+
<span className="flex-1" />
215+
<MenuRoot>
216+
<Button shape="square">
217+
<MenuIcon />
218+
</Button>
219+
<Menu>
220+
<MenuItem>Account settings</MenuItem>
221+
<MenuItem>Create team</MenuItem>
222+
<MenuItem>Command menu</MenuItem>
223+
<MenuItem>Log out</MenuItem>
224+
</Menu>
225+
</MenuRoot>
226+
<Select className="xs:flex-auto flex-1">
227+
<SelectItem>Perplexity</SelectItem>
228+
<SelectItem>Replicate</SelectItem>
229+
<SelectItem>Together AI</SelectItem>
230+
<SelectItem>ElevenLabs</SelectItem>
231+
</Select>
232+
</div>
233+
<div className="min-[35rem]:flex col-span-7 hidden items-center justify-end gap-2">
234+
<Avatar
235+
src="https://github.com/mehdibha.png"
236+
alt="@mehdibha"
237+
fallback="M"
238+
/>
239+
<Switch>
240+
<span className="truncate">Focus mode</span>
241+
</Switch>
242+
</div>
243+
<div className="col-span-10">
244+
<DatePicker className="w-full" />
245+
</div>
246+
<div className="col-span-10 flex items-center gap-2 flex-wrap">
247+
<FileTriggerDemo />
248+
<ColorPicker defaultValue="#5100FF" className="flex-1" />
249+
<TimeField aria-label="Event time" className="flex-1" />
250+
</div>
251+
{/* <div className="col-span-5 flex justify-end">
252+
</div> */}
186253
{/* TODO */}
187254
</div>
188255
);

‎www/src/modules/themes/components/themes-overview.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,8 @@ export const ThemesOverview = () => {
5656
// }, [currentThemeName, touched]);
5757

5858
return (
59-
<div className="flex flex-col items-center gap-4">
60-
<div className="relative flex flex-col items-center gap-6">
59+
<div className="flex flex-col items-center gap-10 md:gap-4">
60+
<div className="relative flex flex-col items-center gap-6 container">
6161
<div className="text-fg-muted relative hidden items-center gap-2 py-2 pl-4 pr-2 font-mono text-xs lg:flex">
6262
<motion.div
6363
layout
@@ -215,8 +215,8 @@ export const ThemesOverview = () => {
215215
)}
216216
</AnimatePresence>
217217
<div className="bg-bg w-full rounded-md border">
218-
<ComponentsOverview className="xl:container" />
219-
{/* <MobileComponentsOverview className="z-5 min-[920px]:hidden" /> */}
218+
<ComponentsOverview className="hidden sm:grid xl:container" />
219+
<MobileComponentsOverview className="sm:hidden" />
220220
</div>
221221
</>
222222
)}

‎www/src/registry/core/toggle-button_basic.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { focusRing } from "@/registry/lib/focus-styles";
1212

1313
const toggleButtonStyles = tv({
1414
extend: focusRing,
15-
base: "disabled:bg-bg-disabled disabled:text-fg-disabled inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium leading-normal transition-colors disabled:cursor-default",
15+
base: "disabled:bg-bg-disabled shrink-0 disabled:text-fg-disabled inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium leading-normal transition-colors disabled:cursor-default",
1616
variants: {
1717
variant: {
1818
quiet:

0 commit comments

Comments
 (0)