refactor: standardize component exports and fix incorrect page names across docs components (#194)

Author: TheOrcDev

app/docs/components/calendar/page.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
   },
 }
 
-const CalendarPage = () => {
+export default function CalendarPage() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col md:flex-row items-center justify-between gap-2">
@@ -71,5 +71,3 @@ const CalendarPage = () => {
     </div>
   )
 }
-
-export default CalendarPage

app/docs/components/card/page.tsx

@@ -34,7 +34,7 @@ export const metadata: Metadata = {
   },
 }
 
-export default function TextareaPage() {
+export default function CardPage() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col md:flex-row items-center justify-between gap-2">

app/docs/components/context-menu/page.tsx

@@ -23,7 +23,7 @@ export const metadata: Metadata = {
   },
 }
 
-export default function ButtonPage() {
+export default function ContextMenuPage() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col md:flex-row items-center justify-between gap-2">

app/docs/components/date-picker/page.tsx

@@ -18,7 +18,7 @@ export const metadata: Metadata = {
   },
 }
 
-export default function ButtonPage() {
+export default function DatePickerPage() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col md:flex-row items-center justify-between gap-2">

app/docs/components/scroll-area/page.tsx

@@ -20,7 +20,7 @@ export const metadata: Metadata = {
   },
 }
 
-export default function ScrollbarPage() {
+export default function ScrollAreaPage() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col md:flex-row items-center justify-between gap-2">

app/docs/components/sheet/page.tsx

@@ -36,7 +36,7 @@ export const metadata: Metadata = {
   },
 }
 
-const SheetPage = () => {
+export default function SheetPage() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col md:flex-row items-center justify-between gap-2">
@@ -136,5 +136,3 @@ const SheetPage = () => {
     </div>
   )
 }
-
-export default SheetPage

app/docs/components/sidebar/page.tsx

@@ -3,7 +3,7 @@ import { Press_Start_2P } from "next/font/google"
 import Link from "next/link"
 import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
 
-import { buttonMetaData } from "@/lib/metadata"
+import { sidebarMetaData } from "@/lib/metadata"
 import { Skeleton } from "@/components/ui/8bit/skeleton"
 import { Separator } from "@/components/ui/separator"
 import {
@@ -27,7 +27,7 @@ export const metadata: Metadata = {
   title: "8-bit Sidebar",
   description: "Displays a simple 8-bit sidebar component.",
   openGraph: {
-    images: buttonMetaData,
+    images: sidebarMetaData,
   },
 }
 

app/docs/components/table/page.tsx

@@ -25,7 +25,7 @@ export const metadata: Metadata = {
   },
 }
 
-const TablePage = () => {
+export default function TablePage() {
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col md:flex-row items-center justify-between gap-2">
@@ -157,5 +157,3 @@ const TablePage = () => {
     </div>
   )
 }
-
-export default TablePage

app/docs/components/toggle-group/page.tsx

@@ -13,8 +13,11 @@ import { OpenInV0Button } from "../open-in-v0-button"
 export const metadata: Metadata = {
   title: "8-bit Toggle Group",
   description: "Displays an 8-bit toggle group component.",
-  openGraph: { images: toggleGroupMetaData },
+  openGraph: {
+    images: toggleGroupMetaData,
+  },
 }
+
 export default function ToggleGroupPage() {
   return (
     <div className="flex flex-col gap-4">

lib/metadata.ts

@@ -51,3 +51,4 @@ export const sliderMetaData = "/assets/8bitcn-slider-light.png"
 export const datePickerMetaData = "/assets/8bitcn-date-picker-light.png"
 export const contextMenuMetaData = "/assets/8bitcn-context-menu-light.png"
 export const menubarMetaData = "/assets/8bitcn-menubar-light.png"
+export const sidebarMetaData = "/assets/8bitcn-sidebar-light.png"