90:I[903690,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"ExplicitChatIdProvider"] 91:I[838238,["/chat-static/_next/static/chunks/19ru4sx2xipbx.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0c34czz85xh3f.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3ot6wcd5ecpln.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1c4pf12npy4a_.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2j46pilgqkinh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3wiwg53adn758.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2b2k-zf-b56kd.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0l5nai4znivqy.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/35cffbjvsl8sh.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3abf52lxefhni.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1qn4-ha2vsd-p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/095lel5ufcr08.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zgz5up_moiwf.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cv_oykzmlqpk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2eq_3tgsc9fan.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3u5f5fge21f5p.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/37xbvek5lee4t.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2cbmnugpvavl4.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0zt6uezrjc89m.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/09z6ri07r3sma.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/420uifudym9av.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/194j0nolabgr9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1fvo0xwkj8x_o.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3z-fk_6xzfhai.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/04dkbwvbkscb6.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0-9zq73z_eohn.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1axcumexuksf-.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/2iwiq6nmum4w5.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3eqa6zdyi0ea7.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/10pk7j95y2dsq.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3r5qyv0elhezz.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0rr17y2zzppmc.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0n-x3aspzp3e2.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1_kx0_cln4rnk.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/0o-tlt78ggel0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/1ks0r-j8ozfdw.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3fqvzp2yqv6c9.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/001c2fksllqct.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177","/chat-static/_next/static/chunks/3pwc98sa29io0.js?dpl=dpl_9KPM2gAR3pD2Xd1vsNfpfjxFc177"],"SWRDataProvider"] 92:T4dd0,[V0_FILE]typescriptreact:file="app/layout.js" import "./globals.css" export const metadata = { title: "Markdown Editor", description: "A rich text markdown editor with live preview", } export default function RootLayout({ children }) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,jsx}", "./components/**/*.{js,jsx}", "./app/**/*.{js,jsx}", "./src/**/*.{js,jsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, typography: { DEFAULT: { css: { maxWidth: "100%", }, }, }, }, }, plugins: [require("@tailwindcss/typography")], } [V0_FILE]javascript:file="components/markdown-preview.js" "use client" import { useEffect, useState } from "react" import { marked } from "marked" import Prism from "prismjs" // Import Prism language components import "prismjs/components/prism-javascript" import "prismjs/components/prism-jsx" import "prismjs/components/prism-typescript" import "prismjs/components/prism-tsx" import "prismjs/components/prism-css" import "prismjs/components/prism-python" import "prismjs/components/prism-java" import "prismjs/components/prism-c" import "prismjs/components/prism-cpp" import "prismjs/components/prism-csharp" import "prismjs/components/prism-bash" import "prismjs/components/prism-json" import "prismjs/components/prism-markdown" import "prismjs/components/prism-yaml" import "prismjs/components/prism-php" import "prismjs/components/prism-ruby" import "prismjs/components/prism-go" import "prismjs/components/prism-rust" import "prismjs/components/prism-sql" import "prismjs/components/prism-swift" export default function MarkdownPreview({ markdown }) { const [html, setHtml] = useState("") useEffect(() => { // Configure marked with syntax highlighting marked.setOptions({ highlight: (code, lang) => { if (Prism.languages[lang]) { return Prism.highlight(code, Prism.languages[lang], lang) } else { return code } }, breaks: true, gfm: true, }) // Convert markdown to HTML try { const rawHtml = marked.parse(markdown || "") setHtml(rawHtml) // Apply Prism highlighting to any code that might have been missed setTimeout(() => { Prism.highlightAll() }, 0) } catch (error) { console.error("Error parsing markdown:", error) setHtml("

Error rendering preview

") } }, [markdown]) return (

Preview

) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; /* PrismJS Syntax Highlighting */ /** * Prism.js default theme */ code[class*="language-"], pre[class*="language-"] { color: #000; background: none; text-shadow: 0 1px white; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1em; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { text-shadow: none; background: #b3d4fc; } pre[class*="language-"]::selection, pre[class*="language-"] ::selection, code[class*="language-"]::selection, code[class*="language-"] ::selection { text-shadow: none; background: #b3d4fc; } @media print { code[class*="language-"], pre[class*="language-"] { text-shadow: none; } } /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0.3em; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f5f2f0; } /* Dark mode support */ .dark pre[class*="language-"] { background: #1e1e1e; } .dark code[class*="language-"] { color: #f8f8f2; text-shadow: none; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: .3em; white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .token.namespace { opacity: 0.7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #9a6e3a; } .token.atrule, .token.attr-value, .token.keyword { color: #07a; } .token.function, .token.class-name { color: #dd4a68; } .token.regex, .token.important, .token.variable { color: #e90; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } /* Dark mode syntax highlighting */ .dark .token.comment, .dark .token.prolog, .dark .token.doctype, .dark .token.cdata { color: #8292a2; } .dark .token.punctuation { color: #f8f8f2; } .dark .token.property, .dark .token.tag, .dark .token.constant, .dark .token.symbol, .dark .token.deleted { color: #ff79c6; } .dark .token.boolean, .dark .token.number { color: #bd93f9; } .dark .token.selector, .dark .token.attr-name, .dark .token.string, .dark .token.char, .dark .token.builtin, .dark .token.inserted { color: #50fa7b; } .dark .token.operator, .dark .token.entity, .dark .token.url, .dark .language-css .token.string, .dark .style .token.string { color: #f8f8f2; } .dark .token.atrule, .dark .token.attr-value, .dark .token.keyword { color: #ff79c6; } .dark .token.function, .dark .token.class-name { color: #8be9fd; } .dark .token.regex, .dark .token.important, .dark .token.variable { color: #f1fa8c; } /* Custom styles for the markdown preview */ .markdown-preview h1 { @apply text-3xl font-bold mb-4; } .markdown-preview h2 { @apply text-2xl font-bold mb-3; } .markdown-preview h3 { @apply text-xl font-bold mb-2; } .markdown-preview h4 { @apply text-lg font-bold mb-2; } .markdown-preview h5 { @apply text-base font-bold mb-2; } .markdown-preview h6 { @apply text-sm font-bold mb-2; } .markdown-preview p { @apply mb-4; } .markdown-preview ul { @apply list-disc pl-5 mb-4; } .markdown-preview ol { @apply list-decimal pl-5 mb-4; } .markdown-preview blockquote { @apply border-l-4 border-gray-300 pl-4 italic mb-4; } .markdown-preview pre { @apply bg-gray-100 dark:bg-gray-700 p-4 rounded mb-4 overflow-x-auto; } .markdown-preview code { @apply font-mono text-sm bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded; } .markdown-preview pre code { @apply bg-transparent p-0; } .markdown-preview a { @apply text-blue-600 hover:underline; } .markdown-preview img { @apply max-w-full h-auto mb-4; } .markdown-preview table { @apply w-full border-collapse mb-4; } .markdown-preview th, .markdown-preview td { @apply border border-gray-300 dark:border-gray-600 p-2; } .markdown-preview th { @apply bg-gray-100 dark:bg-gray-700; } [V0_FILE]javascript:file="components/markdown-editor.js" "use client" import { useState, useRef } from "react" import { Bold, Italic, Heading1, Heading2, Heading3, List, ListOrdered, Link, Image, Code, Quote } from "lucide-react" export default function MarkdownEditor({ markdown, onChange }) { const textareaRef = useRef(null) const [codeLanguage, setCodeLanguage] = useState("javascript") const insertText = (before, after = "") => { const textarea = textareaRef.current const start = textarea.selectionStart const end = textarea.selectionEnd const selectedText = markdown.substring(start, end) const newText = markdown.substring(0, start) + before + selectedText + after + markdown.substring(end) onChange(newText) // Set cursor position after the operation setTimeout(() => { textarea.focus() textarea.setSelectionRange(start + before.length, end + before.length) }, 0) } const handleToolbarAction = (action) => { switch (action) { case "bold": insertText("**", "**") break case "italic": insertText("*", "*") break case "h1": insertText("# ") break case "h2": insertText("## ") break case "h3": insertText("### ") break case "ul": insertText("- ") break case "ol": insertText("1. ") break case "link": insertText("[", "](url)") break case "image": insertText("![alt text](", ")") break case "code": insertText("```" + codeLanguage + "\n", "\n```") break case "quote": insertText("> ") break default: break } } const handleLanguageChange = (e) => { setCodeLanguage(e.target.value) } return (

} onClick={() => handleToolbarAction("bold")} tooltip="Bold" /> } onClick={() => handleToolbarAction("italic")} tooltip="Italic" /> } onClick={() => handleToolbarAction("h1")} tooltip="Heading 1" /> } onClick={() => handleToolbarAction("h2")} tooltip="Heading 2" /> } onClick={() => handleToolbarAction("h3")} tooltip="Heading 3" /> } onClick={() => handleToolbarAction("ul")} tooltip="Unordered List" /> } onClick={() => handleToolbarAction("ol")} tooltip="Ordered List" /> } onClick={() => handleToolbarAction("link")} tooltip="Link" /> } onClick={() => handleToolbarAction("image")} tooltip="Image" />

} onClick={() => handleToolbarAction("code")} tooltip="Code Block" />

} onClick={() => handleToolbarAction("quote")} tooltip="Blockquote" />

onChange(e.target.value)}
        className="w-full h-[500px] p-4 font-mono text-sm focus:outline-none resize-none dark:bg-gray-800 dark:text-gray-100"
        placeholder="Type your markdown here..."
      />
    </div>
  )
}

function ToolbarButton({ icon, onClick, tooltip }) {
  return (
    <button
      type="button"
      onClick={onClick}
      className="p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
      title={tooltip}
    >
      {icon}
    </button>
  )
}

[V0_FILE]javascript:file="app/page.js"
"use client"

import { useState } from "react"
import MarkdownEditor from "@/components/markdown-editor"
import MarkdownPreview from "@/components/markdown-preview"

export default function Home() {
  const [markdown, setMarkdown] = useState(`# Markdown Editor with Syntax Highlighting

Start typing to see the preview...

## Code Example

\`\`\`jsx
"use client";

import Image from "next/image";
import { BadgeCheck, DollarSign, Clock } from 'lucide-react';

const CourseCard = ({ course }) => {
  return (
    <div className="max-w-3xl mx-auto bg-white shadow-lg rounded-2xl overflow-hidden border border-gray-200 hover:shadow-2xl transition duration-300">
      {/* Course Poster */}
      <div className="relative">
        <Image
          src={course.posterURL || "/placeholder.svg"}
          alt={course.courseTitle}
          width={800}
          height={400}
          className="w-full h-64 object-cover"
        />
        <span className="absolute top-3 left-3 bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-semibold">
          {course.level}
        </span>
      </div>

{/* Course Details */}
      <div className="p-6">
        <h2 className="text-2xl font-bold text-gray-900">{course.courseTitle}</h2>
        <p className="text-gray-600 mt-2">{course.shortDescription}</p>

{/* Instructor Info */}
        <div className="flex items-center gap-3 mt-4">
          <Image
            src={course.instructurePhotoURL || "/placeholder.svg"}
            alt={course.instructureName}
            width={40}
            height={40}
            className="w-10 h-10 rounded-full border border-gray-300"
          />
          <p className="text-gray-700 font-medium">{course.instructureName}</p>
        </div>

{/* Course Metadata */}
        <div className="flex flex-wrap justify-between items-center mt-5">
          <div className="flex items-center gap-2 text-gray-600">
            <Clock size={20} className="text-purple-500" />
            <span className="text-sm">{new Date(course.createdAt.seconds * 1000).toLocaleDateString()}</span>
          </div>
          <div className="flex items-center gap-2 text-gray-600">
            <BadgeCheck size={20} className="text-purple-500" />
            <span className="text-sm">{course.category}</span>
          </div>
          <div className="flex items-center gap-2 text-gray-600">
            <DollarSign size={20} className="text-purple-500" />
            <span className="text-sm font-semibold">\${course.coursePrice}</span>
          </div>
        </div>

{/* Action Buttons */}
        <div className="mt-6 flex gap-3">
          <button className="flex-1 bg-purple-500 hover:bg-purple-400 text-white font-semibold py-2 rounded-lg transition">
            Enroll Now
          </button>
          <button className="flex-1 border border-purple-500 text-purple-500 hover:bg-purple-500 hover:text-white py-2 rounded-lg transition">
            View Details
          </button>
        </div>
      </div>
    </div>
  );
};

export default CourseCard;
\`\`\`

## Python Example

\`\`\`python
def fibonacci(n):
    """Generate the Fibonacci sequence up to n"""
    a, b = 0, 1
    while a < n:
        yield a
        a, b = b, a + b

# Print the Fibonacci sequence up to 1000
for num in fibonacci(1000):
    print(num)
\`\`\`
`)
  const [activeTab, setActiveTab] = useState("edit") // 'edit' or 'preview'

const handleMarkdownChange = (newMarkdown) => {
    setMarkdown(newMarkdown)
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <div className="container mx-auto p-4">
        <h1 className="text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100">Markdown Editor</h1>

{/* Tabs for mobile view */}
        <div className="flex mb-4 border-b border-gray-200 md:hidden">
          <button
            className={`px-4 py-2 ${activeTab === "edit" ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-600 dark:text-gray-300"}`}
            onClick={() => setActiveTab("edit")}
          >
            Edit
          </button>
          <button
            className={`px-4 py-2 ${activeTab === "preview" ? "border-b-2 border-blue-500 text-blue-600" : "text-gray-600 dark:text-gray-300"}`}
            onClick={() => setActiveTab("preview")}
          >
            Preview
          </button>
        </div>

<div className="flex flex-col md:flex-row gap-4">
          {/* Editor */}
          <div className={`w-full md:w-1/2 ${activeTab === "edit" ? "block" : "hidden md:block"}`}>
            <MarkdownEditor markdown={markdown} onChange={handleMarkdownChange} />
          </div>

{/* Preview */}
          <div className={`w-full md:w-1/2 ${activeTab === "preview" ? "block" : "hidden md:block"}`}>
            <MarkdownPreview markdown={markdown} />
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]javascript:file="scripts/install-dependencies.js" type="nodejs"
// This is just a reference for the dependencies needed
// You should install these packages in your project
console.log("Required dependencies:")
console.log("- marked: For converting Markdown to HTML")
console.log("- prismjs: For syntax highlighting")
console.log("- @tailwindcss/typography: For styling the Markdown preview")
console.log("\nInstall with:")
console.log("npm install marked prismjs @tailwindcss/typography")
89:["$","$L90",null,{"chatId":"YcTnzXrjwBh","children":["$","$L91",null,{"data":{"@\"active-block\",\"YcTnzXrjwBh\",":{"id":"ZanwxwrwnnR","messageId":"MI4ifiXkRPTOX2B7PVFkexjYynJqcgeZ","source":"$92","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"markdown-editor","type":"code-project","project":"markdown-editor"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"YcTnzXrjwBh\",":false,"":null},"children":"$L93"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This