Skip to content

Commit 91fa862

Browse files
Modred14Modred14
committed
redesign pages
1 parent bb03d9d commit 91fa862

10 files changed

Lines changed: 468 additions & 119 deletions

File tree

‎src/CreateLink.tsx‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
MenuItems,
1313
} from "@headlessui/react";
1414
import { Bars3Icon, BellIcon, XMarkIcon, CameraIcon as CameraOutlineIcon } from "@heroicons/react/24/outline";
15+
import { HomeIcon, Squares2X2Icon, LinkIcon, UserCircleIcon } from "@heroicons/react/24/outline";
1516
import { Link, useNavigate } from "react-router-dom";
1617
import Loading from "./Loading";
1718
import QRCode from "qrcode.react";
@@ -53,6 +54,13 @@ const navigation = [
5354
{ name: "Links", href: "/links", current: false },
5455
];
5556

57+
58+
const mobileNavIcons: Record<string, React.ElementType> = {
59+
Home: HomeIcon,
60+
Dashboard: Squares2X2Icon,
61+
Links: LinkIcon,
62+
};
63+
5664
function classNames(...classes: Array<string | false | undefined>) {
5765
return classes.filter(Boolean).join(" ");
5866
}
@@ -501,7 +509,7 @@ const CreateLink: React.FC = () => {
501509
</Menu>
502510
</>
503511
) : (
504-
<Link to="/signup" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
512+
<Link to="/login" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
505513
Get Started
506514
</Link>
507515
)}
@@ -520,17 +528,41 @@ const CreateLink: React.FC = () => {
520528
</nav>
521529

522530
<DisclosurePanel transition className="sl-mobile-panel">
523-
{navigation.map((item) => (
524-
<DisclosureButton
525-
key={item.name}
526-
as={Link}
527-
to={item.href}
528-
aria-current={item.current ? "page" : undefined}
529-
className="sl-mobile-link"
530-
>
531-
{item.name}
532-
</DisclosureButton>
533-
))}
531+
<div className="sl-mobile-nav-list">
532+
{navigation.map((item) => {
533+
const Icon = mobileNavIcons[item.name] || HomeIcon;
534+
return (
535+
<DisclosureButton
536+
key={item.name}
537+
as={Link}
538+
to={item.href}
539+
aria-current={item.current ? "page" : undefined}
540+
className="sl-mobile-nav-item"
541+
>
542+
<Icon aria-hidden="true" />
543+
<span>{item.name}</span>
544+
</DisclosureButton>
545+
);
546+
})}
547+
</div>
548+
549+
{!isLoggedIn && (
550+
<>
551+
<hr className="sl-mobile-divider" />
552+
<div className="sl-mobile-bottom-row">
553+
<span className="sl-mobile-avatar-circle">
554+
<UserCircleIcon aria-hidden="true" />
555+
</span>
556+
<DisclosureButton
557+
as={Link}
558+
to="/login"
559+
className="sl-btn sl-btn--primary sl-btn--sm"
560+
>
561+
Get Started
562+
</DisclosureButton>
563+
</div>
564+
</>
565+
)}
534566
</DisclosurePanel>
535567
</>
536568
)}

‎src/Dashboard.tsx‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
PencilSquareIcon,
2222
ArrowUpRightIcon,
2323
} from "@heroicons/react/24/outline";
24+
import { HomeIcon, Squares2X2Icon, UserCircleIcon } from "@heroicons/react/24/outline";
2425
import { Link } from "react-router-dom";
2526
import Footer from "./Footer";
2627

@@ -40,6 +41,13 @@ const navigation = [
4041
{ name: "Links", href: "/links", current: false },
4142
];
4243

44+
45+
const mobileNavIcons: Record<string, React.ElementType> = {
46+
Home: HomeIcon,
47+
Dashboard: Squares2X2Icon,
48+
Links: LinkIcon,
49+
};
50+
4351
function classNames(...classes: Array<string | false | undefined>) {
4452
return classes.filter(Boolean).join(" ");
4553
}
@@ -209,7 +217,7 @@ const Dashboard: React.FC = () => {
209217
</Menu>
210218
</>
211219
) : (
212-
<Link to="/signup" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
220+
<Link to="/login" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
213221
Get Started
214222
</Link>
215223
)}
@@ -228,17 +236,41 @@ const Dashboard: React.FC = () => {
228236
</nav>
229237

230238
<DisclosurePanel transition className="sl-mobile-panel">
231-
{navigation.map((item) => (
232-
<DisclosureButton
233-
key={item.name}
234-
as={Link}
235-
to={item.href}
236-
aria-current={item.current ? "page" : undefined}
237-
className="sl-mobile-link"
238-
>
239-
{item.name}
240-
</DisclosureButton>
241-
))}
239+
<div className="sl-mobile-nav-list">
240+
{navigation.map((item) => {
241+
const Icon = mobileNavIcons[item.name] || HomeIcon;
242+
return (
243+
<DisclosureButton
244+
key={item.name}
245+
as={Link}
246+
to={item.href}
247+
aria-current={item.current ? "page" : undefined}
248+
className="sl-mobile-nav-item"
249+
>
250+
<Icon aria-hidden="true" />
251+
<span>{item.name}</span>
252+
</DisclosureButton>
253+
);
254+
})}
255+
</div>
256+
257+
{!isLoggedIn && (
258+
<>
259+
<hr className="sl-mobile-divider" />
260+
<div className="sl-mobile-bottom-row">
261+
<span className="sl-mobile-avatar-circle">
262+
<UserCircleIcon aria-hidden="true" />
263+
</span>
264+
<DisclosureButton
265+
as={Link}
266+
to="/login"
267+
className="sl-btn sl-btn--primary sl-btn--sm"
268+
>
269+
Get Started
270+
</DisclosureButton>
271+
</div>
272+
</>
273+
)}
242274
</DisclosurePanel>
243275
</>
244276
)}

‎src/EditLink.tsx‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
CameraIcon as CameraOutlineIcon,
1919
ArrowLeftIcon,
2020
} from "@heroicons/react/24/outline";
21+
import { HomeIcon, Squares2X2Icon, LinkIcon, UserCircleIcon } from "@heroicons/react/24/outline";
2122
import { Link, useParams, useNavigate } from "react-router-dom";
2223
import Loading from "./Loading";
2324
import QRCode from "qrcode.react";
@@ -61,6 +62,13 @@ const navigation = [
6162
{ name: "Links", href: "/links", current: false },
6263
];
6364

65+
66+
const mobileNavIcons: Record<string, React.ElementType> = {
67+
Home: HomeIcon,
68+
Dashboard: Squares2X2Icon,
69+
Links: LinkIcon,
70+
};
71+
6472
function classNames(...classes: Array<string | false | undefined>) {
6573
return classes.filter(Boolean).join(" ");
6674
}
@@ -514,7 +522,7 @@ const EditLink: React.FC = () => {
514522
</Menu>
515523
</>
516524
) : (
517-
<Link to="/signup" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
525+
<Link to="/login" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
518526
Get Started
519527
</Link>
520528
)}
@@ -533,17 +541,41 @@ const EditLink: React.FC = () => {
533541
</nav>
534542

535543
<DisclosurePanel transition className="sl-mobile-panel">
536-
{navigation.map((item) => (
537-
<DisclosureButton
538-
key={item.name}
539-
as={Link}
540-
to={item.href}
541-
aria-current={item.current ? "page" : undefined}
542-
className="sl-mobile-link"
543-
>
544-
{item.name}
545-
</DisclosureButton>
546-
))}
544+
<div className="sl-mobile-nav-list">
545+
{navigation.map((item) => {
546+
const Icon = mobileNavIcons[item.name] || HomeIcon;
547+
return (
548+
<DisclosureButton
549+
key={item.name}
550+
as={Link}
551+
to={item.href}
552+
aria-current={item.current ? "page" : undefined}
553+
className="sl-mobile-nav-item"
554+
>
555+
<Icon aria-hidden="true" />
556+
<span>{item.name}</span>
557+
</DisclosureButton>
558+
);
559+
})}
560+
</div>
561+
562+
{!isLoggedIn && (
563+
<>
564+
<hr className="sl-mobile-divider" />
565+
<div className="sl-mobile-bottom-row">
566+
<span className="sl-mobile-avatar-circle">
567+
<UserCircleIcon aria-hidden="true" />
568+
</span>
569+
<DisclosureButton
570+
as={Link}
571+
to="/login"
572+
className="sl-btn sl-btn--primary sl-btn--sm"
573+
>
574+
Get Started
575+
</DisclosureButton>
576+
</div>
577+
</>
578+
)}
547579
</DisclosurePanel>
548580
</>
549581
)}

‎src/LandingPage.tsx‎

Lines changed: 44 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {
2626
UsersIcon,
2727
SparklesIcon,
2828
} from "@heroicons/react/24/outline";
29+
import { HomeIcon, Squares2X2Icon, UserCircleIcon } from "@heroicons/react/24/outline";
2930
import { Link } from "react-router-dom";
3031
import Footer from "./Footer";
3132

@@ -45,6 +46,13 @@ const navigation = [
4546
{ name: "Links", href: "/links", current: false },
4647
];
4748

49+
50+
const mobileNavIcons: Record<string, React.ElementType> = {
51+
Home: HomeIcon,
52+
Dashboard: Squares2X2Icon,
53+
Links: LinkIcon,
54+
};
55+
4856
function classNames(...classes: Array<string | false | undefined>) {
4957
return classes.filter(Boolean).join(" ");
5058
}
@@ -389,7 +397,7 @@ const LandingPage: React.FC = () => {
389397
</Menu>
390398
</>
391399
) : (
392-
<Link to="/signup" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
400+
<Link to="/login" className="sl-btn sl-btn--primary sl-btn--sm sl-nav-cta">
393401
Get Started
394402
</Link>
395403
)}
@@ -408,17 +416,41 @@ const LandingPage: React.FC = () => {
408416
</nav>
409417

410418
<DisclosurePanel transition className="sl-mobile-panel">
411-
{navigation.map((item) => (
412-
<DisclosureButton
413-
key={item.name}
414-
as={Link}
415-
to={item.href}
416-
aria-current={item.current ? "page" : undefined}
417-
className="sl-mobile-link"
418-
>
419-
{item.name}
420-
</DisclosureButton>
421-
))}
419+
<div className="sl-mobile-nav-list">
420+
{navigation.map((item) => {
421+
const Icon = mobileNavIcons[item.name] || HomeIcon;
422+
return (
423+
<DisclosureButton
424+
key={item.name}
425+
as={Link}
426+
to={item.href}
427+
aria-current={item.current ? "page" : undefined}
428+
className="sl-mobile-nav-item"
429+
>
430+
<Icon aria-hidden="true" />
431+
<span>{item.name}</span>
432+
</DisclosureButton>
433+
);
434+
})}
435+
</div>
436+
437+
{!isLoggedIn && (
438+
<>
439+
<hr className="sl-mobile-divider" />
440+
<div className="sl-mobile-bottom-row">
441+
<span className="sl-mobile-avatar-circle">
442+
<UserCircleIcon aria-hidden="true" />
443+
</span>
444+
<DisclosureButton
445+
as={Link}
446+
to="/login"
447+
className="sl-btn sl-btn--primary sl-btn--sm"
448+
>
449+
Get Started
450+
</DisclosureButton>
451+
</div>
452+
</>
453+
)}
422454
</DisclosurePanel>
423455
</>
424456
)}

0 commit comments

Comments
 (0)