updated few styles and on the way for new install guide with avatar

ariflogs · ariflogs · commit 2f51d67d1a6b · 2024-10-12T12:16:31.000+06:00
diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx
@@ -44,8 +44,8 @@ export default function page({ params }: IProps) {
   }
 
   return (
-    <div className="space-y-12 pb-8">
-      <div>
+    <div className="space-y-12 py-8">
+      <div className="border-b border-black pb-4">
         <H2>{doc.title}</H2>
         <p className="text-lg text-muted">{doc.description}</p>
       </div>
diff --git a/app/(docs)/docs/layout.tsx b/app/(docs)/docs/layout.tsx
@@ -11,11 +11,11 @@ export default function ComponentLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="relative">
+    <div className="relative max-w-6xl mx-auto">
       <div className="hidden lg:block">
         <SideNav />
       </div>
-      <div className="lg:ml-72 mt-20 px-4">{children}</div>
+      <div className="lg:ml-72 mt-16">{children}</div>
     </div>
   );
-}
+}
diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx
@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Badge,
   Button,
   Tabs,
@@ -24,6 +25,22 @@ export default function page() {
         <Badge variant="filled">Badge</Badge>
       </div>
 
+      <div className="flex items-center space-x-4">
+        <Avatar>
+          <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+          <Avatar.Fallback>AH</Avatar.Fallback>
+        </Avatar>
+
+        <Avatar className="rounded-none">
+          <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+          <Avatar.Fallback>AH</Avatar.Fallback>
+        </Avatar>
+
+        <Avatar className="rounded-none h-20 w-20">
+          <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+          <Avatar.Fallback>AH</Avatar.Fallback>
+        </Avatar>
+      </div>
       <div>
         <Tabs>
           <TabsTriggerList>
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -54,7 +54,7 @@ export default function RootLayout({
       <body
         className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
       >
-        <div className="mb-20 relative z-10">
+        <div className="relative z-10">
           <TopNav />
         </div>
         {children}
diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx
@@ -14,10 +14,10 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
   return (
     <TabGroup>
       <TabList className="space-x-4 ">
-        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
+        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
           Preview
         </Tab>
-        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
+        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
           Code
         </Tab>
       </TabList>
diff --git a/components/MDX.tsx b/components/MDX.tsx
@@ -7,10 +7,14 @@ import { cn } from "@/lib/utils";
 const components = {
   h1: H1,
   h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
-    <H2 className="mb-2" {...props} />
+    <H2 className="border-b lg:text-3xl pb-1 mb-6" {...props} />
+  ),
+  h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <H3 className="mb-4" {...props} />
+  ),
+  h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <H4 className="mb-2" {...props} />
   ),
-  h3: H3,
-  h4: H4,
   h5: H5,
   h6: H6,
   pre: ({
diff --git a/components/SideNav.tsx b/components/SideNav.tsx
@@ -5,9 +5,9 @@ import Link from "next/link";
 export default function SideNav() {
   return (
     <div
-      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`}
+      className={`fixed right-auto border-r-2 border-black h-full py-8 transition-transform transform md:translate-x-0 w-64 bg-white`}
     >
-      <nav className="flex flex-col items-start p-6 space-y-4">
+      <nav className="flex flex-col items-start pr-6 space-y-4">
         {navConfig.sideNavItems.map((item) => (
           <div key={item.title}>
             <H6>{item.title}</H6>
diff --git a/content/docs/components/avatar.mdx b/content/docs/components/avatar.mdx
@@ -1,11 +1,19 @@
 ---
 title: Avatar
 description: Default rounded avatar that can show your users profile picture. ✨
-lastUpdated: 08 Oct, 2024
+lastUpdated: 12 Oct, 2024
 ---
 
-### Circle
+<ComponentShowcase name="avatar-style-circle" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install depenencies:
+
+`npm install @radix-ui/react-avatar`
 
-<hr />
 <br />
-<ComponentShowcase name="avatar-style-circle" />
+
+#### 2. Add the Component:
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.1.9",
+    "@radix-ui/react-avatar": "^1.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "contentlayer": "^0.3.4",
diff --git a/packages/ui/Avatars/Avatar.tsx b/packages/ui/Avatars/Avatar.tsx
@@ -1,11 +1,53 @@
-export function Avatar() {
-  return (
-    <div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
-      <img
-        className="w-full h-full"
-        src="https://pagedone.io/asset/uploads/1704275541.png"
-        alt="Rounded Avatar"
-      />
-    </div>
-  );
-}
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = "Avatar.Image";
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = "Avatar.Fallback";
+
+const AvatarComponent = Object.assign(Avatar, {
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+});
+
+export { AvatarComponent as Avatar };
diff --git a/packages/ui/Typography/H2.tsx b/packages/ui/Typography/H2.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import React, { HTMLAttributes } from "react";
 
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
@@ -6,7 +7,9 @@ interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export function H2({ children, className }: HeadingProps) {
   return (
-    <h2 className={`font-head text-3xl lg:text-4xl font-semibold ${className}`}>
+    <h2
+      className={cn("font-head text-3xl lg:text-4xl font-semibold", className)}
+    >
       {children}
     </h2>
   );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/preview/components/avatar-style-circle.tsx b/preview/components/avatar-style-circle.tsx
@@ -1,11 +1,10 @@
+import { Avatar } from "@/packages/ui";
+
 export default function AvatarStyleCircle() {
   return (
-    <div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
-      <img
-        className="w-full h-full"
-        src="https://pagedone.io/asset/uploads/1704275541.png"
-        alt="Rounded Avatar"
-      />
-    </div>
+    <Avatar>
+      <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+      <Avatar.Fallback>AH</Avatar.Fallback>
+    </Avatar>
   );
 }
diff --git a/public/images/avatar.jpeg b/public/images/avatar.jpeg

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export default function RootLayout({`
`54`	`54`	`<body`
`55`	`55`	className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
`56`	`56`	`>`
`57`		`- <div className="mb-20 relative z-10">`
	`57`	`+ <div className="relative z-10">`
`58`	`58`	`<TopNav />`
`59`	`59`	`</div>`
`60`	`60`	`{children}`