From 890d3c271f6d99e53fba6ffc406bfea2c2e96e62 Mon Sep 17 00:00:00 2001 From: Harry Yep Date: Sun, 14 Apr 2024 16:03:47 +0800 Subject: [PATCH] fix: styles (#300) --- app/[locale]/(home)/search/page.tsx | 4 ++-- app/[locale]/layout.tsx | 2 +- components/layout/message.tsx | 4 ++-- components/layout/search/block/images.tsx | 13 ++++++++----- components/layout/search/block/related.tsx | 3 +-- components/layout/search/block/sources.tsx | 11 +++++++---- utils/app/icon.ts | 0 7 files changed, 21 insertions(+), 16 deletions(-) delete mode 100644 utils/app/icon.ts diff --git a/app/[locale]/(home)/search/page.tsx b/app/[locale]/(home)/search/page.tsx index 225a53d4..76a0e529 100644 --- a/app/[locale]/(home)/search/page.tsx +++ b/app/[locale]/(home)/search/page.tsx @@ -11,7 +11,7 @@ export const dynamic = 'force-dynamic'; export default function Search() { return ( -
+
@@ -19,7 +19,7 @@ export default function Search() {
-
+
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index a7af2e01..73407933 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -9,7 +9,7 @@ export default function LocaleLayout({ }>) { return ( - {children} + {children} ); } diff --git a/components/layout/message.tsx b/components/layout/message.tsx index 5a6ac0ec..9da183de 100644 --- a/components/layout/message.tsx +++ b/components/layout/message.tsx @@ -17,7 +17,7 @@ export const renderMarkdownMessage = (content: string, hightlight?: string, setH rehypePlugins={[rehypeKatex]} components={{ p: ({ children, ...props }: any) => ( -
+
{children}
), @@ -89,7 +89,7 @@ export const renderMarkdownMessage = (content: string, hightlight?: string, setH ), img: ({ children, ...props }: any) => ( -
+
) : ( ))} diff --git a/components/layout/search/block/sources.tsx b/components/layout/search/block/sources.tsx index 7b6fc8fd..9e45c802 100644 --- a/components/layout/search/block/sources.tsx +++ b/components/layout/search/block/sources.tsx @@ -9,6 +9,7 @@ import { useTranslations } from 'next-intl'; import { BlockTitle } from '@/components/layout/search/block/block-title'; import { UserAvatar } from '@/components/layout/user-avatar'; import store from '@/hooks/store'; +import { useMediaQuery } from '@/hooks/window'; import { TavilyResult } from '@/types/search/resources'; export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => { @@ -18,8 +19,10 @@ export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => { const [sameCitationId, setSameCitationId] = useAtom(store.sameCitationAtom); - const shown = isAllResources ? results : results.slice(0, 3); - const hidden = isAllResources ? [] : results.slice(3); + const isDesktop = useMediaQuery('(min-width: 768px)'); + + const shown = isAllResources ? results : isDesktop ? results.slice(0, 3) : results.slice(0, 2); + const hidden = isAllResources ? [] : isDesktop ? results.slice(3) : results.slice(2); const hiddenCount = hidden.length; @@ -33,7 +36,7 @@ export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => { href={result.url} passHref target='_blank' - className={`h-auto w-3/12 cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-700 dark:hover:text-neutral-200/90 ${sameCitationId == encodeURIComponent(result.url) ? 'dark:bg-neutral-700' : 'dark:bg-neutral-800/70'}`} + className={`h-auto w-1/2 cursor-pointer space-y-3 rounded-md bg-neutral-200/70 p-2 transition duration-200 ease-in-out hover:bg-neutral-200/30 dark:text-neutral-200/80 dark:shadow-lg dark:hover:bg-neutral-700 dark:hover:text-neutral-200/90 md:w-3/12 ${sameCitationId == encodeURIComponent(result.url) ? 'dark:bg-neutral-700' : 'dark:bg-neutral-800/70'}`} onMouseEnter={() => setSameCitationId(encodeURIComponent(result.url))} onMouseLeave={() => setSameCitationId('')} > @@ -69,7 +72,7 @@ export const Sources = ({ results }: Readonly<{ results: TavilyResult[] }>) => { ) : (