Components
Loading preview...
Here is help button component
npx shadcn@latest add https://21st.dev/r/ln-dev7/help-button// demo.tsx
'use client';
import * as React from 'react';
import { Github, Linkedin, Twitter, Box } from 'lucide-react';
import HelpButton from '@/components/ui/help-button';
import type { HelpLink, WhatsNewItem, ShortcutItem } from '@/components/ui/help-button';
const socialLinks: HelpLink[] = [
{ icon: Twitter, name: 'Twitter / X', href: 'https://x.com/shadcn' },
{ icon: Linkedin, name: 'LinkedIn', href: 'https://linkedin.com/in/shadcn' },
{ icon: Github, name: 'GitHub', href: 'https://github.com/shadcn' },
];
const supportLink: HelpLink = {
icon: Box,
name: 'Support Project',
href: '#',
};
const whatsNewItems: WhatsNewItem[] = [
{ name: 'Vercel Ship 2024', href: '#', isNew: true },
{ name: 'New Component: Carousel', href: '#', isNew: true },
{ name: 'CLI Improvements', href: '#', isNew: false },
];
const shortcutItems: ShortcutItem[] = [{ name: 'Keyboard shortcuts', shortcut: '⌘K' }];
const HelpButtonDemo = () => {
return (
<div className="flex h-[300px] w-full items-start justify-center p-10">
<HelpButton
socialLinks={socialLinks}
supportLink={supportLink}
whatsNewItems={whatsNewItems}
shortcutItems={shortcutItems}
/>
</div>
);
};
export { HelpButtonDemo as DemoOne };