Skip to content

Feat/toast #200

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 20, 2025
Merged

Feat/toast #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
651d3dd
feat(registry) add toast
TheOrcDev May 20, 2025
1f6de89
refactor(toast) change to 8-bit toast
TheOrcDev May 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/docs/components/copy-command-button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
"use client"

import { Terminal } from "lucide-react"
import { toast } from "sonner"

import { toast } from "@/components/ui/8bit/toast"
import { Button } from "@/components/ui/button"

interface CopyCommandButtonProps {
Expand Down
86 changes: 86 additions & 0 deletions app/docs/components/toast/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { Metadata } from "next"

import { buttonMetaData } from "@/lib/metadata"
import { Separator } from "@/components/ui/separator"
import { ToastExample } from "@/components/examples/toast"

import CodeSnippet from "../code-snippet"
import CopyCommandButton from "../copy-command-button"
import InstallationCommands from "../installation-commands"
import { OpenInV0Button } from "../open-in-v0-button"

export const metadata: Metadata = {
title: "8-bit Toast",
description: "Displays an 8-bit toast component.",
openGraph: {
images: buttonMetaData,
},
}

export default function ToastPage() {
return (
<div className="flex flex-col gap-4">
<div className="flex flex-col md:flex-row items-center justify-between gap-2">
<h1 className="text-3xl font-bold">Toast</h1>
<CopyCommandButton
copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-toast.json`}
command={"pnpm dlx shadcn@canary add 8bit-toast"}
/>
</div>

<p className="text-muted-foreground">
Displays an 8-bit toast 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">
8-bit toast component
</h2>

<div className="flex items-center gap-2">
<OpenInV0Button name="8bit-toast" className="w-fit" />
</div>
</div>
<div className="flex items-center justify-center min-h-[400px] relative">
<ToastExample />
</div>
</div>

<h3 className="text-lg font-bold">Installation</h3>

<Separator />

<InstallationCommands
packageUrl={`${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-toast.json`}
/>

<p>
8bitcn Toast is using Sonner under the hood. Add the Sonner Toaster
component to your layout
</p>

<CodeSnippet>{`import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Toaster />
</body>
</html>
)
}`}</CodeSnippet>

<h3 className="text-lg font-bold mt-10">Usage</h3>

<Separator />

<CodeSnippet>{`import { toast } from "@/components/ui/8bit/toast"`}</CodeSnippet>

<CodeSnippet>{`toast("8bitcn is an awesome project!")`}</CodeSnippet>
</div>
)
}
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { Geist, Geist_Mono } from "next/font/google"
import "./globals.css"

import { Analytics } from "@vercel/analytics/react"
import { Toaster } from "sonner"

import { sharedMetaData } from "@/lib/metadata"
import { Toaster } from "@/components/ui/sonner"
import { ScreenSize } from "@/components/screen-size"
import SiteFooter from "@/components/site-footer"
import { SiteHeader } from "@/components/site-header"
Expand Down
12 changes: 12 additions & 0 deletions components/examples/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
"use client"

import { Button } from "@/components/ui/8bit/button"
import { toast } from "@/components/ui/8bit/toast"

export function ToastExample() {
return (
<Button onClick={() => toast("8bitcn is an awesome project!")}>
Show Toast
</Button>
)
}
48 changes: 48 additions & 0 deletions components/ui/8bit/toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
"use client"

import React from "react"
import { Press_Start_2P } from "next/font/google"
import { toast as sonnerToast } from "sonner"

export function toast(toast: string) {
return sonnerToast.custom((id) => <Toast id={id} title={toast} />)
}

const pressStart = Press_Start_2P({
weight: ["400"],
subsets: ["latin"],
})

interface ToastProps {
id: string | number
title: string
}

function Toast(props: ToastProps) {
const { title } = props

return (
<div className={`relative ${pressStart.className}`}>
<div className="flex rounded-lg bg-background shadow-lg ring-1 ring-black/5 w-full md:max-w-[364px] items-center p-4">
<div className="flex flex-1 items-center">
<div className="w-full">
<p className="text-sm font-medium">{title}</p>
</div>
</div>
</div>

<div className="absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
<div className="absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
<div className="absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring" />
<div className="absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring" />
<div className="absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
<div className="absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
<div className="absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring" />
<div className="absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring" />
<div className="absolute top-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
<div className="absolute bottom-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
<div className="absolute top-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
<div className="absolute bottom-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring" />
</div>
)
}
5 changes: 5 additions & 0 deletions config/nav-items.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,11 @@ const components = [
title: "Textarea",
url: "/docs/components/textarea",
},
{
title: "Toast",
url: "/docs/components/toast",
new: true,
},
{
title: "Toggle",
url: "/docs/components/toggle",
Expand Down
1 change: 1 addition & 0 deletions lib/metadata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,4 @@ 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"
export const toastMetaData = "/assets/8bitcn-toast-light.png"
Binary file added public/assets/8bitcn-toast-light.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions public/r/8bit-toast.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "8bit-toast",
"type": "registry:component",
"title": "8-bit Toast",
"description": "A simple 8-bit toast component",
"registryDependencies": [
"sonner"
],
"files": [
{
"path": "components/ui/8bit/toast.tsx",
"content": "\"use client\"\n\nimport React from \"react\"\nimport { Press_Start_2P } from \"next/font/google\"\nimport { toast as sonnerToast } from \"sonner\"\n\nexport function toast(toast: string) {\n return sonnerToast.custom((id) => <Toast id={id} title={toast} />)\n}\n\nconst pressStart = Press_Start_2P({\n weight: [\"400\"],\n subsets: [\"latin\"],\n})\n\ninterface ToastProps {\n id: string | number\n title: string\n}\n\nfunction Toast(props: ToastProps) {\n const { title } = props\n\n return (\n <div className={`relative ${pressStart.className}`}>\n <div className=\"flex rounded-lg bg-background shadow-lg ring-1 ring-black/5 w-full md:max-w-[364px] items-center p-4\">\n <div className=\"flex flex-1 items-center\">\n <div className=\"w-full\">\n <p className=\"text-sm font-medium\">{title}</p>\n </div>\n </div>\n </div>\n\n <div className=\"absolute -top-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute -top-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute -bottom-1.5 w-1/2 left-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute -bottom-1.5 w-1/2 right-1.5 h-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute bottom-0 left-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute bottom-0 right-0 size-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute bottom-1 -left-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute top-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n <div className=\"absolute bottom-1 -right-1.5 h-1/2 w-1.5 bg-foreground dark:bg-ring\" />\n </div>\n )\n}\n",
"type": "registry:component",
"target": "components/ui/8bit/toast.tsx"
}
]
}
14 changes: 14 additions & 0 deletions registry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,20 @@
}
]
},
{
"name": "8bit-toast",
"type": "registry:component",
"title": "8-bit Toast",
"description": "A simple 8-bit toast component",
"registryDependencies": ["sonner"],
"files": [
{
"path": "components/ui/8bit/toast.tsx",
"type": "registry:component",
"target": "components/ui/8bit/toast.tsx"
}
]
},
{
"name": "8bit-input-otp",
"type": "registry:component",
Expand Down