refactor: standardize component metadata and descriptions with 8-bit prefix (#171)

Author: TheOrcDev

app/docs/components/alert-dialog/page.tsx

@@ -21,9 +21,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Alert Dialog",
-  description:
-    "Displays a Alert Dialog or a component that looks like a 8-bit Alert Dialog.",
+  title: "8-bit Alert Dialog",
+  description: "Displays an 8-bit alert dialog component.",
   openGraph: {
     images: alertDialogMetaData,
   },
@@ -41,18 +40,17 @@ export default function AlertDialogPage() {
       </div>
 
       <p className="text-muted-foreground">
-        Displays a Alert Dialog or a component that looks like a 8-bit Alert
-        Dialog.
+        Displays an 8-bit alert dialog component.
       </p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit Alert Dialog component
+            8-bit alert dialog component
           </h2>
 
           <div className="flex items-center gap-2">
-            <OpenInV0Button name="8bit-badge" className="w-fit" />
+            <OpenInV0Button name="8bit-alert-dialog" className="w-fit" />
           </div>
         </div>
         <div className="flex items-center justify-center min-h-[400px] relative">

app/docs/components/alert/page.tsx

@@ -10,9 +10,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Alert",
-  description:
-    "Displays an alert or a component that looks like a 8-bit alert.",
+  title: "8-bit Alert",
+  description: "Displays an 8-bit alert component.",
   openGraph: {
     images: alertMetaData,
   },
@@ -30,13 +29,13 @@ export default function AlertPage() {
       </div>
 
       <p className="text-muted-foreground">
-        Displays an alert or a component that looks like a 8-bit alert.
+        Displays an 8-bit alert component.
       </p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit alert component
+            8-bit alert component
           </h2>
 
           <div className="flex items-center gap-2">

app/docs/components/avatar/page.tsx

@@ -14,9 +14,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Avatar",
-  description:
-    "Displays an avatar or a component that looks like a 8-bit avatar.",
+  title: "8-bit Avatar",
+  description: "Displays an 8-bit avatar component.",
   openGraph: {
     images: avatarMetaData,
   },
@@ -41,7 +40,7 @@ export default function AvatarPage() {
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A pixelated 8-bit avatar component
+            8-bit avatar component
           </h2>
 
           <div className="flex items-center gap-2">

app/docs/components/badge/page.tsx

@@ -10,8 +10,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Badge",
-  description: "Displays a badge or a component that looks like a 8-bit badge.",
+  title: "8-bit Badge",
+  description: "Displays an 8-bit badge component.",
   openGraph: {
     images: badgeMetaData,
   },
@@ -29,13 +29,13 @@ export default function BadgePage() {
       </div>
 
       <p className="text-muted-foreground">
-        Displays a badge or a component that looks like a 8-bit badge.
+        Displays an 8-bit badge component.
       </p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit badge component
+            8-bit badge component
           </h2>
 
           <div className="flex items-center gap-2">

app/docs/components/breadcrumb/page.tsx

@@ -32,9 +32,8 @@ const pressStart = Press_Start_2P({
 })
 
 export const metadata: Metadata = {
-  title: "8bit Breadcrumb",
-  description:
-    "Displays the path to the current resource using a hierarchy of links.",
+  title: "8-bit Breadcrumb",
+  description: "Displays an 8-bit breadcrumb component.",
   openGraph: {
     images: breadcrumbMetaData,
   },
@@ -126,7 +125,7 @@ export default function BreadcrumbPageNext() {
       </div>
 
       <p className="text-muted-foreground">
-        Displays the path to the current resource using a hierarchy of links.
+        Displays an 8-bit breadcrumb component.
       </p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">

app/docs/components/button/page.tsx

@@ -10,9 +10,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Button",
-  description:
-    "Displays a button or a component that looks like a 8-bit button.",
+  title: "8-bit Button",
+  description: "Displays an 8-bit button component.",
   openGraph: {
     images: buttonMetaData,
   },
@@ -30,13 +29,13 @@ export default function ButtonPage() {
       </div>
 
       <p className="text-muted-foreground">
-        Displays a button or a component that looks like a 8-bit button.
+        Displays an 8-bit button component.
       </p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit button component
+            8-bit button component
           </h2>
 
           <div className="flex items-center gap-2">

app/docs/components/calendar/page.tsx

@@ -10,9 +10,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Calendar",
-  description:
-    " Displays a calendar or a component that looks like a 8-bit calendar.",
+  title: "8-bit Calendar",
+  description: "Displays an 8-bit calendar component.",
   openGraph: {
     images: calendarMetaData,
   },
@@ -30,13 +29,13 @@ const CalendarPage = () => {
       </div>
 
       <p className="text-muted-foreground">
-        Displays a calendar or a component that looks like a 8-bit calendar.
+        Displays an 8-bit calendar component.
       </p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit calendar component
+            8-bit calendar component
           </h2>
 
           <div className="flex items-center gap-2">

app/docs/components/card/page.tsx

@@ -27,8 +27,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Card",
-  description: "Displays a card or a component that looks like a 8-bit card.",
+  title: "8-bit Card",
+  description: "Displays an 8-bit card component.",
   openGraph: {
     images: cardMetaData,
   },
@@ -45,14 +45,12 @@ export default function TextareaPage() {
         />
       </div>
 
-      <p className="text-muted-foreground">
-        Displays a card or a component that looks like a 8-bit card.
-      </p>
+      <p className="text-muted-foreground">Displays an 8-bit card component.</p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px] relative">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit card component
+            8-bit card component
           </h2>
 
           <div className="flex items-center gap-2">

app/docs/components/carousel/page.tsx

@@ -14,9 +14,8 @@ import {
 } from "./_demos/carousel"
 
 export const metadata: Metadata = {
-  title: "8bit Carousel",
-  description:
-    "Displays a carousel or a component that looks like a 8-bit carousel.",
+  title: "8-bit Carousel",
+  description: "Displays an 8-bit carousel component.",
   openGraph: {
     images: carouselMetaData,
   },
@@ -40,11 +39,11 @@ export default function CarouselPage() {
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit button component
+            8-bit carousel component
           </h2>
 
           <div className="flex items-center gap-2">
-            <OpenInV0Button name="8bit-button" className="w-fit" />
+            <OpenInV0Button name="8bit-carousel" className="w-fit" />
           </div>
         </div>
         <div className="flex items-center justify-center min-h-[400px] relative">

app/docs/components/chart/page.tsx

@@ -10,8 +10,8 @@ import InstallationCommands from "../installation-commands"
 import { OpenInV0Button } from "../open-in-v0-button"
 
 export const metadata: Metadata = {
-  title: "8bit Chart",
-  description: "Displays a 8-bit chart.",
+  title: "8-bit Chart",
+  description: "Displays an 8-bit chart.",
   openGraph: {
     images: chartMetaData,
   },
@@ -28,12 +28,12 @@ export default function ChartPage() {
         />
       </div>
 
-      <p className="text-muted-foreground">Displays a 8-bit chart.</p>
+      <p className="text-muted-foreground">Displays an 8-bit chart.</p>
 
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
         <div className="flex items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
-            A simple 8-bit chart component
+            8-bit chart component
           </h2>
 
           <div className="flex items-center gap-2">