Skip to content

Commit

Permalink
style: homepage features section
Browse files Browse the repository at this point in the history
  • Loading branch information
@arshad-yaseen
arshad-yaseen committed Nov 12, 2023
1 parent d270251 commit 944d3f8
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 85 deletions.
9 changes: 1 addition & 8 deletions components/editor/editor-nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
"use client"

import { useState } from "react"
import { editorCodesState } from "@/atoms/editor"
import { markdownto } from "@/utils/editor"
import copy from "copy-to-clipboard"
Expand All @@ -22,7 +21,6 @@ import EditorKbdShortcuts from "./editor-kbd-shortcuts"
import SaveButton from "./save-button"

function EditorNav() {
const [isSaving, setIsSaving] = useState(false)
const editorCodes = useAtomValue(editorCodesState) satisfies editorCode[]
const fullCode = editorCodes
.map((code: editorCode) => code.content)
Expand Down Expand Up @@ -78,12 +76,7 @@ function EditorNav() {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<SaveButton
isSaving={isSaving}
postCodes={editorCodes}
onSave={() => setIsSaving(true)}
onSaved={() => setIsSaving(false)}
/>
<SaveButton postCodes={editorCodes} />
<EditorKbdShortcuts />
<ModeToggle />
</>
Expand Down
29 changes: 20 additions & 9 deletions components/editor/save-button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import { useEffect, useRef } from "react"
import { useEffect, useRef, useState } from "react"
import { usePathname } from "next/navigation"
import { Loader2 } from "lucide-react"
import { CheckIcon, Loader2 } from "lucide-react"

import { PostCodesType } from "types"
import { handleSave } from "@/lib/utils"

import { Button } from "../ui/button"

interface SaveButtonProps {
isSaving: boolean
postCodes: PostCodesType[]
onSave: () => void
onSaved: () => void
}

function SaveButton({ isSaving, postCodes, onSave, onSaved }: SaveButtonProps) {
function SaveButton({ postCodes }: SaveButtonProps) {
const pathname = usePathname()
const markdownId = pathname?.split("/")[2]
const saveButtonRef = useRef<HTMLButtonElement>(null)
const [isSaved, setIsSaved] = useState<boolean>(false)
const [isSaving, setIsSaving] = useState<boolean>(false)

useEffect(() => {
const intervalId = setInterval(() => {
Expand All @@ -27,19 +26,31 @@ function SaveButton({ isSaving, postCodes, onSave, onSaved }: SaveButtonProps) {
return () => clearInterval(intervalId)
}, [saveButtonRef])

const savingIcon =
isSaving && !isSaved ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : isSaved && isSaving ? (
<CheckIcon className="mr-2 h-4 w-4" />
) : null

return (
<Button
disabled={isSaving}
variant={isSaving ? "outline" : "default"}
ref={saveButtonRef}
onClick={async () => {
onSave?.()
setIsSaving(true)
await handleSave(postCodes, markdownId!)
onSaved?.()
setIsSaved(true)
const timeoutId = setTimeout(() => {
setIsSaved(false)
setIsSaving(false)
}, 1000)
return () => clearTimeout(timeoutId)
}}
className="mr-4"
>
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}{" "}
{savingIcon}
{isSaving ? "Saving" : "Save"}
</Button>
)
Expand Down
122 changes: 54 additions & 68 deletions components/site-features.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,48 @@
import React from "react"
import { CodeIcon } from "@radix-ui/react-icons"
import {
CodeIcon,
ArrowDownToLineIcon,
LanguagesIcon,
ShareIcon,
PenLine,
SparklesIcon,
StarIcon,
TimerIcon,
Users2Icon,
} from "lucide-react"

const FEATURES = [
{
title: "Generate or Document codes",
description: "You can generate codes and document from your document.",
icon: <CodeIcon className="h-9 w-9" />,
},
{
title: "Export to any format",
description:
"You can export your document Markdown, HTML, Lexer data, etc.",
icon: <ArrowDownToLineIcon className="h-8 w-8" />,
},
{
title: "Translate",
description: "You can translate your document to any language.",
icon: <LanguagesIcon className="h-8 w-8" />,
},
{
title: "AI suggessions and corrections",
description:
"You can get AI suggessions and corrections for your document.",
icon: <PenLine className="h-8 w-8" />,
},
{
title: "Ask AI playground",
description: "You can ask AI playground to get answers for your questions.",
icon: <SparklesIcon className="h-8 w-8" />,
},
{
title: "Realtime collaboration",
description: "You can collaborate with your team in realtime.",
icon: <Users2Icon className="h-8 w-8" />,
},
]

function SiteFeatures() {
return (
<section
Expand All @@ -22,73 +57,24 @@ function SiteFeatures() {
Here are some of the features that make MarkDX the most powerful
</p>
</div>
<div className="py-2" />
<div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-[64rem] md:grid-cols-3">
<div className="relative overflow-hidden rounded-lg border bg-background p-2">
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
<CodeIcon className="h-8 w-8" />
<div className="space-y-2">
<h3 className="font-bold">Generate or Document codes</h3>
<p className="text-sm text-muted-foreground">
You can generate codes and document from your document.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border bg-background p-2">
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
<ShareIcon className="h-8 w-8" />
<div className="space-y-2">
<h3 className="font-bold">Export to any format</h3>
<p className="text-sm text-muted-foreground">
You can export your document Markdown, HTML, Lexer data, etc.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border bg-background p-2">
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
<LanguagesIcon className="h-8 w-8" />
<div className="space-y-2">
<h3 className="font-bold">Translate</h3>
<p className="text-sm text-muted-foreground">
You can translate your document to any language.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border bg-background p-2">
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
<StarIcon className="h-8 w-8" />
<div className="space-y-2">
<h3 className="font-bold">AI suggessions and corrections</h3>
<p className="text-sm text-muted-foreground">
You can get AI suggessions and corrections for your document.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border bg-background p-2">
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
<SparklesIcon className="h-8 w-8" />
<div className="space-y-2">
<h3 className="font-bold">Ask AI playground</h3>
<p className="text-sm text-muted-foreground">
You can ask AI playground to get answers for your questions.
</p>
</div>
</div>
</div>
<div className="relative overflow-hidden rounded-lg border bg-background p-2">
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
<TimerIcon className="h-8 w-8" />
<div className="space-y-2">
<h3 className="font-bold">Realtime collaboration</h3>
<p className="text-sm text-muted-foreground">
You can collaborate with your team in realtime.
</p>
{FEATURES.map((feature) => (
<div
key={feature.title}
className="relative overflow-hidden rounded-xl bg-background p-2 shadow-border-medium"
>
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
{feature.icon}
<div className="space-y-2">
<h3 className="font-bold">{feature.title}</h3>
<p className="text-sm text-muted-foreground">
{feature.description}
</p>
</div>
</div>
</div>
</div>
))}
</div>
</section>
)
Expand Down

1 comment on commit 944d3f8

@vercel
Copy link

@vercel vercel bot commented on 944d3f8 Nov 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

markdx – ./

markdx-git-main-arshadyaseen.vercel.app
markdx-arshadyaseen.vercel.app
markdx.vercel.app
www.markdx.site
markdx.site

Please sign in to comment.