Skip to content

Commit fe441c4

Browse files
SaadBazazSaadBazaz
committed
docs: update README.md
1 parent 3f3da30 commit fe441c4

File tree

2 files changed

+36
-30
lines changed

2 files changed

+36
-30
lines changed

‎apps/demo/src/app/layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import "material-symbols";
2-
import "@lit-labs/ssr-react/enable-lit-ssr.js";
2+
// import "@lit-labs/ssr-react/enable-lit-ssr.js";
33
import GitHubButton from "../components/GitHubButton";
44

55
import type { Metadata } from "next";

‎apps/demo/src/app/page.tsx

+35-29
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,11 @@ const DemoSection = ({ title, children }: { title: any; children: any }) => {
6262
);
6363
};
6464

65-
const NavigationContent = ({ setShowNavigationModal }: {setShowNavigationModal: (value: boolean) => void}) => {
65+
const NavigationContent = ({
66+
setShowNavigationModal,
67+
}: {
68+
setShowNavigationModal: (value: boolean) => void;
69+
}) => {
6670
return (
6771
<>
6872
<Link href={"/"}>
@@ -193,6 +197,7 @@ export default function Home() {
193197
useState(false);
194198

195199
const [showNavigationModal, setShowNavigationModal] = useState(false);
200+
const [extendRail, setExtendRail] = useState(false);
196201

197202
const [isExpanded, setIsExpanded] = useState(false);
198203

@@ -235,9 +240,7 @@ export default function Home() {
235240
(showNavigationModal ? "-translate-x-0" : "-translate-x-50")
236241
}
237242
>
238-
<NavigationContent
239-
setShowNavigationModal={setShowNavigationModal}
240-
/>
243+
<NavigationContent setShowNavigationModal={setShowNavigationModal} />
241244
</NavigationDrawerModal>
242245
</div>
243246
<div
@@ -246,11 +249,12 @@ export default function Home() {
246249
>
247250
<div className="flex sticky top-0 overflow-y-auto h-screen">
248251
<div className="" id="nav-rail-container">
249-
<NavigationRail active-index="1">
252+
{/* @ts-expect-error */}
253+
<NavigationRail extended={extendRail}>
250254
<IconButton
251255
slot="menu"
252256
id="rail-menu-button"
253-
onClick={() => setShowNavigationModal(true)}
257+
onClick={() => setExtendRail(oldState => !oldState)}
254258
>
255259
<Icon>menu</Icon>
256260
</IconButton>
@@ -317,10 +321,10 @@ export default function Home() {
317321
<Column id="column-a">
318322
<DemoSection title={"Actions"}>
319323
<ComponentDemo title={"Common buttons"}>
320-
{/* @ts-ignore */}
321-
<Stack direction="row" spacing={2}>
322-
{/* @ts-ignore */}
323-
<Stack>
324+
{/* @ts-ignore */}
325+
<Stack direction="row" spacing={2}>
326+
{/* @ts-ignore */}
327+
<Stack>
324328
<Button variant="elevated" className="w-full">
325329
Elevated
326330
</Button>
@@ -337,8 +341,8 @@ export default function Home() {
337341
Text
338342
</Button>
339343
</Stack>
340-
{/* @ts-ignore */}
341-
<Stack>
344+
{/* @ts-ignore */}
345+
<Stack>
342346
<Button variant="elevated" className="w-full">
343347
Icon
344348
<Icon slot="icon">add</Icon>
@@ -360,8 +364,8 @@ export default function Home() {
360364
<Icon slot="icon">add</Icon>
361365
</Button>
362366
</Stack>
363-
{/* @ts-ignore */}
364-
<Stack>
367+
{/* @ts-ignore */}
368+
<Stack>
365369
<Button disabled variant="elevated" className="w-full">
366370
Elevated
367371
</Button>
@@ -382,8 +386,8 @@ export default function Home() {
382386
</ComponentDemo>
383387

384388
<ComponentDemo title={"Floating action buttons"}>
385-
{/* @ts-ignore */}
386-
<Stack direction="row">
389+
{/* @ts-ignore */}
390+
<Stack direction="row">
387391
<FAB size="small">
388392
<Icon slot="icon">add</Icon>
389393
</FAB>
@@ -400,8 +404,8 @@ export default function Home() {
400404
</ComponentDemo>
401405

402406
<ComponentDemo title={"Icon buttons"}>
403-
{/* @ts-ignore */}
404-
<Stack direction="row" spacing={4}>
407+
{/* @ts-ignore */}
408+
<Stack direction="row" spacing={4}>
405409
<IconButton>
406410
<Icon>Settings</Icon>
407411
</IconButton>
@@ -418,8 +422,8 @@ export default function Home() {
418422
<Icon>Settings</Icon>
419423
</IconButton>
420424
</Stack>
421-
{/* @ts-ignore */}
422-
<Stack direction="row" spacing={4}>
425+
{/* @ts-ignore */}
426+
<Stack direction="row" spacing={4}>
423427
<IconButton disabled>
424428
<Icon>Settings</Icon>
425429
</IconButton>
@@ -469,8 +473,8 @@ export default function Home() {
469473

470474
<DemoSection title="Communication">
471475
<ComponentDemo title={"Badges"}>
472-
{/* @ts-ignore */}
473-
<Stack direction="row" spacing={3}>
476+
{/* @ts-ignore */}
477+
<Stack direction="row" spacing={3}>
474478
<IconButton>
475479
<Icon
476480
style={{
@@ -495,8 +499,8 @@ export default function Home() {
495499
</ComponentDemo>
496500

497501
<ComponentDemo title={"Progress indicators"}>
498-
{/* @ts-ignore */}
499-
<Stack direction="row" spacing={10}>
502+
{/* @ts-ignore */}
503+
<Stack direction="row" spacing={10}>
500504
<IconButton
501505
onClick={() =>
502506
setIsPlayingProgressIndicators((oldState) => !oldState)
@@ -864,9 +868,7 @@ export default function Home() {
864868
</ComponentDemo>
865869

866870
<ComponentDemo title={"Navigation bar"}>
867-
<NavigationBar
868-
className="w-full flex flex-row items-center"
869-
>
871+
<NavigationBar className="w-full flex flex-row items-center">
870872
<NavigationTab className="px-4" label="Explore" disabled>
871873
<Icon
872874
slot="active-icon"
@@ -928,7 +930,9 @@ export default function Home() {
928930
<Icon>arrow_back</Icon>
929931
</IconButton>
930932

931-
<div slot="headline" className="line-clamp-1">Center-aligned</div>
933+
<div slot="headline" className="line-clamp-1">
934+
Center-aligned
935+
</div>
932936

933937
<IconButton slot="trailing">
934938
<Icon>more_vert</Icon>
@@ -958,7 +962,9 @@ export default function Home() {
958962
<AppBar
959963
variant="medium"
960964
className={"sticky top-0 z-40 !bg-[#fef7fe]"}
961-
onExpansionChange={(expanded: boolean) => setIsExpanded(expanded)}
965+
onExpansionChange={(expanded: boolean) =>
966+
setIsExpanded(expanded)
967+
}
962968
style={{
963969
// @ts-ignore
964970
"--md-elevation-level": 1,

0 commit comments

Comments
 (0)