Skip to content

Commit 2f51d67

Browse files
ariflogsariflogs
committed
updated few styles and on the way for new install guide with avatar
1 parent c8d7479 commit 2f51d67

File tree

14 files changed

+236
-36
lines changed

14 files changed

+236
-36
lines changed

‎app/(docs)/docs/[[...slug]]/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export default function page({ params }: IProps) {
4444
}
4545

4646
return (
47-
<div className="space-y-12 pb-8">
48-
<div>
47+
<div className="space-y-12 py-8">
48+
<div className="border-b border-black pb-4">
4949
<H2>{doc.title}</H2>
5050
<p className="text-lg text-muted">{doc.description}</p>
5151
</div>

‎app/(docs)/docs/layout.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ export default function ComponentLayout({
1111
children: React.ReactNode;
1212
}>) {
1313
return (
14-
<div className="relative">
14+
<div className="relative max-w-6xl mx-auto">
1515
<div className="hidden lg:block">
1616
<SideNav />
1717
</div>
18-
<div className="lg:ml-72 mt-20 px-4">{children}</div>
18+
<div className="lg:ml-72 mt-16">{children}</div>
1919
</div>
2020
);
21-
}
21+
}

‎app/(sink)/demo/components/page.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Avatar,
23
Badge,
34
Button,
45
Tabs,
@@ -24,6 +25,22 @@ export default function page() {
2425
<Badge variant="filled">Badge</Badge>
2526
</div>
2627

28+
<div className="flex items-center space-x-4">
29+
<Avatar>
30+
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
31+
<Avatar.Fallback>AH</Avatar.Fallback>
32+
</Avatar>
33+
34+
<Avatar className="rounded-none">
35+
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
36+
<Avatar.Fallback>AH</Avatar.Fallback>
37+
</Avatar>
38+
39+
<Avatar className="rounded-none h-20 w-20">
40+
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
41+
<Avatar.Fallback>AH</Avatar.Fallback>
42+
</Avatar>
43+
</div>
2744
<div>
2845
<Tabs>
2946
<TabsTriggerList>

‎app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export default function RootLayout({
5454
<body
5555
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
5656
>
57-
<div className="mb-20 relative z-10">
57+
<div className="relative z-10">
5858
<TopNav />
5959
</div>
6060
{children}

‎components/ComponentShowcase.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
1414
return (
1515
<TabGroup>
1616
<TabList className="space-x-4 ">
17-
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
17+
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
1818
Preview
1919
</Tab>
20-
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
20+
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
2121
Code
2222
</Tab>
2323
</TabList>

‎components/MDX.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,14 @@ import { cn } from "@/lib/utils";
77
const components = {
88
h1: H1,
99
h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
10-
<H2 className="mb-2" {...props} />
10+
<H2 className="border-b lg:text-3xl pb-1 mb-6" {...props} />
11+
),
12+
h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
13+
<H3 className="mb-4" {...props} />
14+
),
15+
h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
16+
<H4 className="mb-2" {...props} />
1117
),
12-
h3: H3,
13-
h4: H4,
1418
h5: H5,
1519
h6: H6,
1620
pre: ({

‎components/SideNav.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import Link from "next/link";
55
export default function SideNav() {
66
return (
77
<div
8-
className={`fixed top-16 left-0 border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white z-50`}
8+
className={`fixed right-auto border-r-2 border-black h-full py-8 transition-transform transform md:translate-x-0 w-64 bg-white`}
99
>
10-
<nav className="flex flex-col items-start p-6 space-y-4">
10+
<nav className="flex flex-col items-start pr-6 space-y-4">
1111
{navConfig.sideNavItems.map((item) => (
1212
<div key={item.title}>
1313
<H6>{item.title}</H6>

‎content/docs/components/avatar.mdx‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
---
22
title: Avatar
33
description: Default rounded avatar that can show your users profile picture. ✨
4-
lastUpdated: 08 Oct, 2024
4+
lastUpdated: 12 Oct, 2024
55
---
66

7-
### Circle
7+
<ComponentShowcase name="avatar-style-circle" />
8+
<br />
9+
<br />
10+
11+
## Installation
12+
13+
#### 1. Install depenencies:
14+
15+
`npm install @radix-ui/react-avatar`
816

9-
<hr />
1017
<br />
11-
<ComponentShowcase name="avatar-style-circle" />
18+
19+
#### 2. Add the Component:

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@headlessui/react": "^2.1.9",
13+
"@radix-ui/react-avatar": "^1.1.1",
1314
"class-variance-authority": "^0.7.0",
1415
"clsx": "^2.1.1",
1516
"contentlayer": "^0.3.4",

‎packages/ui/Avatars/Avatar.tsx‎

Lines changed: 53 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,53 @@
1-
export function Avatar() {
2-
return (
3-
<div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
4-
<img
5-
className="w-full h-full"
6-
src="https://pagedone.io/asset/uploads/1704275541.png"
7-
alt="Rounded Avatar"
8-
/>
9-
</div>
10-
);
11-
}
1+
import * as React from "react";
2+
import * as AvatarPrimitive from "@radix-ui/react-avatar";
3+
4+
import { cn } from "@/lib/utils";
5+
6+
const Avatar = React.forwardRef<
7+
React.ElementRef<typeof AvatarPrimitive.Root>,
8+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
9+
>(({ className, ...props }, ref) => (
10+
<AvatarPrimitive.Root
11+
ref={ref}
12+
className={cn(
13+
"relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden",
14+
className
15+
)}
16+
{...props}
17+
/>
18+
));
19+
Avatar.displayName = "Avatar";
20+
21+
const AvatarImage = React.forwardRef<
22+
React.ElementRef<typeof AvatarPrimitive.Image>,
23+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
24+
>(({ className, ...props }, ref) => (
25+
<AvatarPrimitive.Image
26+
ref={ref}
27+
className={cn("aspect-square h-full w-full", className)}
28+
{...props}
29+
/>
30+
));
31+
AvatarImage.displayName = "Avatar.Image";
32+
33+
const AvatarFallback = React.forwardRef<
34+
React.ElementRef<typeof AvatarPrimitive.Fallback>,
35+
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
36+
>(({ className, ...props }, ref) => (
37+
<AvatarPrimitive.Fallback
38+
ref={ref}
39+
className={cn(
40+
"flex h-full w-full items-center justify-center rounded-full bg-muted",
41+
className
42+
)}
43+
{...props}
44+
/>
45+
));
46+
AvatarFallback.displayName = "Avatar.Fallback";
47+
48+
const AvatarComponent = Object.assign(Avatar, {
49+
Image: AvatarImage,
50+
Fallback: AvatarFallback,
51+
});
52+
53+
export { AvatarComponent as Avatar };

0 commit comments

Comments
 (0)