mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-21 18:55:16 +02:00
refactor: replace button elements with Button component for improved consistency and styling across UI components
This commit is contained in:
Anish Sarkar
parent
198c38b335
commit
f98bde1e04
7 changed files with 125 additions and 84 deletions
|
|
@ -161,17 +161,18 @@ function HotkeyRow({
|
|||
<RotateCcw className="size-3" />
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
ref={inputRef}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
title={recording ? "Press shortcut keys" : "Click to edit shortcut"}
|
||||
onClick={() => setRecording(true)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={() => setRecording(false)}
|
||||
className={
|
||||
recording
|
||||
? "flex h-7 items-center rounded-md border border-transparent bg-primary/5 outline-none ring-0 focus:outline-none focus-visible:outline-none focus-visible:ring-0"
|
||||
: "flex h-7 cursor-pointer items-center rounded-md border border-transparent bg-transparent outline-none ring-0 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"
|
||||
? "h-7 border border-transparent bg-primary/5 px-0 outline-none ring-0 focus:outline-none focus-visible:outline-none focus-visible:ring-0"
|
||||
: "h-7 cursor-pointer border border-transparent bg-transparent px-0 outline-none ring-0 transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none focus-visible:ring-0"
|
||||
}
|
||||
>
|
||||
{recording ? (
|
||||
|
|
@ -179,7 +180,7 @@ function HotkeyRow({
|
|||
) : (
|
||||
<ShortcutKbd keys={displayKeys} className="ml-0 px-1.5 text-foreground/85" />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -388,10 +389,11 @@ export default function DesktopLoginPage() {
|
|||
disabled={isLoggingIn}
|
||||
className="h-9 pr-9"
|
||||
/>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setShowPassword((v) => !v)}
|
||||
className="absolute inset-y-0 right-0 flex items-center pr-2.5 text-muted-foreground hover:text-foreground"
|
||||
className="absolute inset-y-0 right-0 h-auto bg-transparent px-2.5 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? (
|
||||
|
|
@ -399,7 +401,7 @@ export default function DesktopLoginPage() {
|
|||
) : (
|
||||
<Eye className="size-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -144,11 +144,12 @@ const MobileCitationDrawer: FC = () => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setOpen(true)}
|
||||
className={cn(
|
||||
"isolate inline-flex cursor-pointer items-center gap-2 rounded-lg px-3 py-2",
|
||||
"isolate h-auto cursor-pointer gap-2 rounded-lg px-3 py-2",
|
||||
"bg-muted/40 outline-none",
|
||||
"transition-colors duration-150",
|
||||
"hover:bg-accent hover:text-accent-foreground",
|
||||
|
|
@ -194,7 +195,7 @@ const MobileCitationDrawer: FC = () => {
|
|||
<span className="text-muted-foreground text-sm tabular-nums">
|
||||
{citations.length} source{citations.length !== 1 && "s"}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<Drawer open={open} onOpenChange={setOpen}>
|
||||
<DrawerContent className="max-h-[85vh] flex flex-col">
|
||||
|
|
@ -204,11 +205,12 @@ const MobileCitationDrawer: FC = () => {
|
|||
</DrawerHeader>
|
||||
<div className="overflow-y-auto flex-1 min-h-0 px-1 pb-6">
|
||||
{citations.map((citation) => (
|
||||
<button
|
||||
<Button
|
||||
key={citation.id}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => handleNavigate(citation)}
|
||||
className="group flex w-full items-center gap-2.5 rounded-md px-3 py-2.5 text-left transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-muted focus-visible:outline-none"
|
||||
className="group h-auto w-full justify-start gap-2.5 px-3 py-2.5 text-left hover:bg-accent hover:text-accent-foreground focus-visible:bg-muted"
|
||||
>
|
||||
{citation.favicon ? (
|
||||
// biome-ignore lint/performance/noImgElement: external favicon from arbitrary domain
|
||||
|
|
@ -230,7 +232,7 @@ const MobileCitationDrawer: FC = () => {
|
|||
<p className="text-muted-foreground truncate text-xs">{citation.domain}</p>
|
||||
</div>
|
||||
<ExternalLink className="text-muted-foreground size-3.5 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" />
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</DrawerContent>
|
||||
|
|
@ -506,9 +508,10 @@ export const AssistantMessage: FC = () => {
|
|||
>
|
||||
{/* Fixed trigger slot prevents any vertical reflow when visibility changes */}
|
||||
<div className="mr-2 mb-1 flex h-7 justify-end">
|
||||
<button
|
||||
<Button
|
||||
ref={isDesktop ? commentTriggerRef : undefined}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={
|
||||
showCommentTrigger
|
||||
? isDesktop
|
||||
|
|
@ -519,7 +522,7 @@ export const AssistantMessage: FC = () => {
|
|||
aria-hidden={!showCommentTrigger}
|
||||
tabIndex={showCommentTrigger ? 0 : -1}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors",
|
||||
"h-auto gap-1.5 rounded-full px-3 py-1 text-sm transition-colors",
|
||||
"opacity-0 pointer-events-none",
|
||||
showCommentTrigger && "opacity-100 pointer-events-auto",
|
||||
isDesktop && isInlineOpen
|
||||
|
|
@ -537,7 +540,7 @@ export const AssistantMessage: FC = () => {
|
|||
) : (
|
||||
<span>Add comment</span>
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Desktop floating comment panel — overlays on top of chat content */}
|
||||
|
|
|
|||
|
|
@ -161,14 +161,16 @@ const PremiumQuotaPinnedAlert: FC = () => {
|
|||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm">{alert.message}</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className="inline-flex size-6 items-center justify-center text-muted-foreground transition-colors hover:text-accent-foreground"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-6 text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
|
||||
aria-label="Dismiss premium quota alert"
|
||||
onClick={() => clearPremiumAlertForThread(currentThreadId)}
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -280,9 +282,11 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
|
|||
return (
|
||||
<div className="border-t border-border/50">
|
||||
<div className="flex w-full items-center gap-2.5 px-4 py-2.5">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className="flex flex-1 items-center gap-2.5 text-left cursor-pointer select-none"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-auto flex-1 justify-start gap-2.5 px-0 py-0 text-left cursor-pointer select-none hover:bg-transparent"
|
||||
onClick={() => setConnectorDialogOpen(true)}
|
||||
>
|
||||
<Unplug className="size-4 text-muted-foreground shrink-0" />
|
||||
|
|
@ -300,15 +304,17 @@ const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) =
|
|||
</Avatar>
|
||||
))}
|
||||
</AvatarGroup>
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleDismiss}
|
||||
className="shrink-0 ml-0.5 p-1.5 -mr-1 text-muted-foreground/40 hover:text-accent-foreground transition-colors cursor-pointer"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-auto shrink-0 ml-0.5 -mr-1 p-1.5 text-muted-foreground/40 hover:bg-transparent hover:text-accent-foreground cursor-pointer"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -326,14 +332,16 @@ const PendingScreenImageStrip: FC = () => {
|
|||
>
|
||||
{/* biome-ignore lint/performance/noImgElement: data URL thumbnails from capture */}
|
||||
<img src={url} alt="" className="size-full object-cover" draggable={false} />
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setUrls((prev) => prev.filter((_, i) => i !== index))}
|
||||
className="absolute right-0.5 top-0.5 flex size-5 items-center justify-center rounded-full bg-background/90 text-muted-foreground shadow-sm transition-opacity hover:text-accent-foreground sm:opacity-0 sm:group-hover:opacity-100"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0.5 top-0.5 size-5 rounded-full bg-background/90 text-muted-foreground shadow-sm transition-opacity hover:bg-background/90 hover:text-accent-foreground sm:opacity-0 sm:group-hover:opacity-100"
|
||||
aria-label="Remove screenshot"
|
||||
>
|
||||
<X className="size-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -352,21 +360,25 @@ const ClipboardChip: FC<{ text: string; onDismiss: () => void }> = ({ text, onDi
|
|||
<span className="text-xs font-medium text-muted-foreground">From clipboard</span>
|
||||
<div className="flex-1" />
|
||||
{isLong && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
className="flex items-center text-muted-foreground hover:text-accent-foreground transition-colors"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-5 text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
|
||||
>
|
||||
{expanded ? <ChevronUp className="size-3.5" /> : <ChevronDown className="size-3.5" />}
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
onClick={onDismiss}
|
||||
className="flex items-center text-muted-foreground hover:text-accent-foreground transition-colors"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-5 text-muted-foreground hover:bg-transparent hover:text-accent-foreground"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="px-3 pb-2">
|
||||
<p className="text-xs text-foreground/80 whitespace-pre-wrap wrap-break-word leading-relaxed">
|
||||
|
|
@ -1173,13 +1185,15 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
|
|||
</Popover>
|
||||
)}
|
||||
{hasWebSearchTool && (
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
aria-label={isWebSearchEnabled ? "Disable web search" : "Enable web search"}
|
||||
aria-pressed={isWebSearchEnabled}
|
||||
onClick={() => toggleTool("web_search")}
|
||||
className={cn(
|
||||
"rounded-full transition-[background-color,border-color,color] flex items-center gap-1 px-2 py-1 border h-8 select-none",
|
||||
"rounded-full transition-[background-color,border-color,color] flex items-center gap-1 px-2 py-1 border h-8 select-none hover:bg-transparent",
|
||||
isWebSearchEnabled
|
||||
? "bg-sky-500/15 border-sky-500/60 text-sky-500"
|
||||
: "bg-transparent border-transparent text-muted-foreground hover:text-accent-foreground"
|
||||
|
|
@ -1212,7 +1226,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
|
|||
</motion.span>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</button>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{!hasModelConfigured && (
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ import {
|
|||
FOLDER_MENTION_DOCUMENT_TYPE,
|
||||
type MentionedDocumentInfo,
|
||||
} from "@/atoms/chat/mentioned-documents.atom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
|
||||
import type { Document, SearchDocumentTitlesResponse } from "@/contracts/types/document.types";
|
||||
|
|
@ -484,7 +485,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={docKey}
|
||||
ref={(el) => {
|
||||
if (el && selectableIndex >= 0) {
|
||||
|
|
@ -492,6 +493,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => !isAlreadySelected && handleSelectMention(mention)}
|
||||
onMouseEnter={() => {
|
||||
if (!isAlreadySelected && selectableIndex >= 0) {
|
||||
|
|
@ -500,7 +502,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}}
|
||||
disabled={isAlreadySelected}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
|
||||
"h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
|
||||
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
||||
isHighlighted && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
|
|
@ -511,7 +513,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
<span className="flex-1 text-sm truncate" title={doc.title}>
|
||||
{doc.title}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
|
@ -541,7 +543,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={docKey}
|
||||
ref={(el) => {
|
||||
if (el && selectableIndex >= 0) {
|
||||
|
|
@ -549,6 +551,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => !isAlreadySelected && handleSelectMention(mention)}
|
||||
onMouseEnter={() => {
|
||||
if (!isAlreadySelected && selectableIndex >= 0) {
|
||||
|
|
@ -557,7 +560,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}}
|
||||
disabled={isAlreadySelected}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
|
||||
"h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
|
||||
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
||||
isHighlighted && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
|
|
@ -568,7 +571,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
<span className="flex-1 text-sm truncate" title={doc.title}>
|
||||
{doc.title}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
|
@ -595,7 +598,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
const isHighlighted = !isAlreadySelected && selectableIndex === highlightedIndex;
|
||||
|
||||
return (
|
||||
<button
|
||||
<Button
|
||||
key={folderKey}
|
||||
ref={(el) => {
|
||||
if (el && selectableIndex >= 0) {
|
||||
|
|
@ -603,6 +606,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}
|
||||
}}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => !isAlreadySelected && handleSelectMention(folder)}
|
||||
onMouseEnter={() => {
|
||||
if (!isAlreadySelected && selectableIndex >= 0) {
|
||||
|
|
@ -611,7 +615,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
}}
|
||||
disabled={isAlreadySelected}
|
||||
className={cn(
|
||||
"w-full flex items-center gap-2 px-3 py-2 text-left transition-colors rounded-md",
|
||||
"h-auto w-full justify-start gap-2 px-3 py-2 text-left transition-colors",
|
||||
isAlreadySelected ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
|
||||
isHighlighted && "bg-accent text-accent-foreground"
|
||||
)}
|
||||
|
|
@ -622,7 +626,7 @@ export const DocumentMentionPicker = forwardRef<
|
|||
<span className="flex-1 text-sm truncate" title={folder.title}>
|
||||
{folder.title}
|
||||
</span>
|
||||
</button>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -853,14 +853,15 @@ export function ModelSelector({
|
|||
: "opacity-100 translate-y-0 pointer-events-auto"
|
||||
)}
|
||||
>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
aria-label="Scroll providers up"
|
||||
onClick={() => scrollProviderSidebar("backward")}
|
||||
className="flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground/90 hover:text-accent-foreground hover:bg-accent transition-colors"
|
||||
className="h-4 w-4 rounded-sm p-0 text-muted-foreground/90 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ChevronUp className="size-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{isMobile && (
|
||||
|
|
@ -913,12 +914,13 @@ export function ModelSelector({
|
|||
))}
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => setSelectedProvider(provider)}
|
||||
tabIndex={-1}
|
||||
className={cn(
|
||||
"relative flex items-center justify-center rounded-md transition-all duration-150",
|
||||
"relative h-auto rounded-md transition-all duration-150",
|
||||
isMobile ? "p-2 shrink-0" : "p-1.5 w-full",
|
||||
isActive
|
||||
? "bg-primary/10 text-primary"
|
||||
|
|
@ -934,7 +936,7 @@ export function ModelSelector({
|
|||
className: "size-4",
|
||||
})
|
||||
)}
|
||||
</button>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side={isMobile ? "bottom" : "right"}>
|
||||
{isAll ? "All Models" : formatProviderName(provider)}
|
||||
|
|
@ -954,14 +956,15 @@ export function ModelSelector({
|
|||
: "opacity-100 translate-y-0 pointer-events-auto"
|
||||
)}
|
||||
>
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
aria-label="Scroll providers down"
|
||||
onClick={() => scrollProviderSidebar("forward")}
|
||||
className="flex h-4 w-4 items-center justify-center rounded-sm text-muted-foreground/90 hover:text-accent-foreground hover:bg-accent transition-colors"
|
||||
className="h-4 w-4 rounded-sm p-0 text-muted-foreground/90 hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<ChevronDown className="size-3" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{isMobile && (
|
||||
|
|
@ -1175,13 +1178,14 @@ export function ModelSelector({
|
|||
},
|
||||
] as const
|
||||
).map(({ value, icon: Icon, label }) => (
|
||||
<button
|
||||
<Button
|
||||
key={value}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
// onClick={() => setActiveTab(value)}
|
||||
onClick={() => handleTabChange(value)}
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-1.5 text-sm font-medium transition-all duration-200 border-b-[1.5px]",
|
||||
"h-auto rounded-none px-0 py-0 gap-1.5 text-sm font-medium transition-all duration-200 border-b-[1.5px] hover:bg-transparent",
|
||||
activeTab === value
|
||||
? "border-foreground dark:border-white text-foreground"
|
||||
: "border-transparent text-muted-foreground hover:text-accent-foreground"
|
||||
|
|
@ -1189,7 +1193,7 @@ export function ModelSelector({
|
|||
>
|
||||
<Icon className="size-3.5" />
|
||||
{label}
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import type { TEquationElement } from "platejs";
|
|||
import { PlateElement, type PlateElementProps, useSelected } from "platejs/react";
|
||||
import * as React from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function EquationElement({ children, ...props }: PlateElementProps<TEquationElement>) {
|
||||
|
|
@ -74,20 +75,23 @@ export function EquationElement({ children, ...props }: PlateElementProps<TEquat
|
|||
{...inputProps}
|
||||
/>
|
||||
<div className="mt-1 flex justify-end gap-1">
|
||||
<button
|
||||
className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-accent"
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-auto px-2 py-1 text-xs text-muted-foreground"
|
||||
onClick={onDismiss}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="rounded bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90"
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-auto px-2 py-1 text-xs"
|
||||
onClick={onSubmit}
|
||||
type="button"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -162,20 +166,23 @@ export function InlineEquationElement({ children, ...props }: PlateElementProps<
|
|||
{...inputProps}
|
||||
/>
|
||||
<span className="mt-1 flex justify-end gap-1">
|
||||
<button
|
||||
className="rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-accent"
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-auto px-2 py-0.5 text-xs text-muted-foreground"
|
||||
onClick={onDismiss}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="rounded bg-primary px-2 py-0.5 text-xs text-primary-foreground hover:bg-primary/90"
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="h-auto px-2 py-0.5 text-xs"
|
||||
onClick={onSubmit}
|
||||
type="button"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</Button>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { ExpandedGifOverlay, useExpandedGif } from "@/components/ui/expanded-gif-overlay";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ExpandedMediaOverlay, useExpandedMedia } from "@/components/ui/expanded-gif-overlay";
|
||||
|
||||
const carouselItems = [
|
||||
{
|
||||
|
|
@ -70,7 +71,7 @@ function HeroCarouselCard({
|
|||
src: string;
|
||||
onExpandedChange?: (expanded: boolean) => void;
|
||||
}) {
|
||||
const { expanded, open, close } = useExpandedGif();
|
||||
const { expanded, open, close } = useExpandedMedia();
|
||||
const videoRef = useRef<HTMLVideoElement>(null);
|
||||
const [hasLoaded, setHasLoaded] = useState(false);
|
||||
|
||||
|
|
@ -147,7 +148,7 @@ function HeroCarouselCard({
|
|||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{expanded && <ExpandedGifOverlay src={src} alt={title} onClose={close} />}
|
||||
{expanded && <ExpandedMediaOverlay src={src} alt={title} onClose={close} />}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
|
|
@ -204,22 +205,26 @@ function HeroCarousel() {
|
|||
</div>
|
||||
|
||||
<div className="relative z-5 mt-4 flex items-center justify-center gap-2">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => !isGifExpanded && goToPrev()}
|
||||
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
||||
className="size-11 rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
||||
aria-label="Previous slide"
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
<div className="flex items-center">
|
||||
{carouselItems.map((_, i) => (
|
||||
<button
|
||||
key={`dot_${i}`}
|
||||
{carouselItems.map((carouselItem, i) => (
|
||||
<Button
|
||||
key={carouselItem.src}
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => !isGifExpanded && goTo(i)}
|
||||
className="flex h-11 min-w-[28px] items-center justify-center touch-manipulation"
|
||||
className="h-11 min-w-[28px] bg-transparent p-0 hover:bg-transparent touch-manipulation"
|
||||
aria-label={`Go to slide ${i + 1}`}
|
||||
>
|
||||
<span
|
||||
|
|
@ -229,18 +234,20 @@ function HeroCarousel() {
|
|||
: "w-2.5 bg-neutral-300 hover:bg-neutral-400 dark:bg-neutral-600 dark:hover:bg-neutral-500"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => !isGifExpanded && goToNext()}
|
||||
className="flex size-11 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm transition-colors hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
||||
className="size-11 rounded-full border border-neutral-200 bg-white text-neutral-700 shadow-sm hover:bg-neutral-100 touch-manipulation dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
|
||||
aria-label="Next slide"
|
||||
>
|
||||
<ChevronRight className="size-5" />
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue