feat(index-page): add themes for NavCards and setup at IndexPage

DISCOVERY-335
feature-sliced · Sep 19, 2022 · 522b19d · 522b19d
1 parent 5e85424
commit 522b19d
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 39 deletions.
diff --git a/i18n/en/docusaurus-plugin-content-docs/current/intro.mdx b/i18n/en/docusaurus-plugin-content-docs/current/intro.mdx
@@ -14,51 +14,63 @@ import NavCard from "@site/src/shared/ui/nav-card/tmpl.mdx"
 import { RocketOutlined, ThunderboltOutlined, FundViewOutlined } from "@ant-design/icons";
 import Link from "@docusaurus/Link";
 
-<NavCard 
-    title="Get Started" 
+<NavCard
+    theme="primary"
+    Icon="🍰"
+    title="New to FSD?" 
+    description="Learn the basics with quick overview of methodology"
+    to="/docs/get-started/overview"
+/>
+
+<!-- TODO: move to features/doc-index -->
+
+<br />
+
+<NavCard
+    theme="mini"
+    title="🚀 Get Started" 
     description="A tour over the basic concepts and structure as well as a comprehensive review of a React sample project"
     to="/docs/get-started"
-    Icon={"🚀"}
     tags={['Overview', 'Quick start', 'FAQ']}
 />
-<NavCard 
-    title="Guides" 
+<NavCard
+    theme="mini"
+    title="🎯 Guides" 
     description="Practical guides and application examples"
     to="/docs/guides"
-    Icon={"🎯"}
     tags={['Examples', 'Migration', 'Tech']}
 />
-<NavCard 
-    title="Concepts" 
+<NavCard
+    theme="mini"
+    title="🧩 Concepts" 
     description="Core concepts for better understanding and more efficient application"
     to="/docs/concepts"
-    Icon={"🧩"}
     tags={['Decomposition', 'Isolation', 'Public API']}
 />
-<NavCard 
-    title="Reference" 
+<NavCard
+    theme="mini"
+    title="📚 Reference" 
     description="Reference details of core concepts"
     to="/docs/reference"
-    Icon={"📚"}
     tags={['Glossary', 'Layer', 'Segment']}
 />
-<NavCard 
-    title="About" 
+<NavCard
+    theme="mini"
+    title="🍰 About" 
     description="The philosophy of the methodology, its goals and place in the modern front-end"
     to="/docs/about"
-    Icon={"🍰"}
     tags={['Mission', 'Alternatives', 'Promote']}
 />
-<NavCard 
-    title="Community" 
+<NavCard
+    theme="mini"
+    title="💫 Community" 
     description="Resources and additional materials, contributed by the community"
     to="/community"
-    Icon={"💫"}
     tags={['Awesome', 'Team', 'Examples']}
 />
-<NavCard 
-    title="Examples" 
+<NavCard
+    theme="mini"
+    title="🛠 Examples" 
     description="Projects built with Feature-Sliced Design"
     to="/examples"
-    Icon={"🛠"}
 />
diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/intro.mdx b/i18n/ru/docusaurus-plugin-content-docs/current/intro.mdx
@@ -15,50 +15,62 @@ import { RocketOutlined, ThunderboltOutlined, FundViewOutlined } from "@ant-desi
 import Link from "@docusaurus/Link";
 
 <NavCard
-    title="Быстрый старт"
+    theme="primary"
+    Icon="🍰"
+    title="Новичок в FSD?" 
+    description="Изучите основы и краткий обзор методологии"
+    to="/docs/get-started/overview"
+/>
+
+<!-- TODO: move to features/doc-index -->
+
+<br />
+
+<NavCard
+    theme="mini"
+    title="🚀 Быстрый старт"
     description="Тур по основным понятиям и структуре, а также подробный разбор проекта на React"
     to="/docs/get-started"
-    Icon={"🚀"}
     tags={['Основы', 'Быстрый старт', 'Мотивация']}
 />
 <NavCard
-    title="Гайды"
+    theme="mini"
+    title="🎯 Гайды"
     description="Практические гайды и примеры по применению Feature-Sliced Design"
     to="/docs/guides"
-    Icon={"🎯"}
     tags={['v1','Легаси','Примеры']}
 />
 <NavCard
-    title="Концепции"
+    theme="mini"
+    title="🧩 Концепции"
     description="Ключевые концепции для более эффективного понимания и применения"
     to="/docs/concepts"
-    Icon={"🧩"}
     tags={['Декомпозиция','Изоляция','Public API']}
 />
 <NavCard
-    title="Справочник"
+    theme="mini"
+    title="📚 Справочник"
     description="Справочная информация по ключевым понятиям"
     to="/docs/reference"
-    Icon={"📚"}
     tags={['Глоссарий','Слои','Сегменты']}
 />
 <NavCard
-    title="О методологии"
+    theme="mini"
+    title="🍰 О методологии"
     description="Философия методологии, ее цели и место в современном фронтенде"
     to="/docs/about"
-    Icon={"🍰"}
     tags={['Миссия','Продвижение & Интеграция']}
 />
 <NavCard
-    title="Сообщество"
+    theme="mini"
+    title="💫 Сообщество"
     description="Ресурсы и дополнительные материалы, предоставленные сообществом"
     to="/community"
-    Icon={"💫"}
     tags={['Awesome','Команда', 'Участие в проекте']}
 />
 <NavCard
-    title="Примеры"
+    theme="mini"
+    title="🛠 Примеры"
     description="Примеры проектов, спроектированных по Feature-Sliced Design"
     to="/examples"
-    Icon={"🛠"}
 />
diff --git a/src/shared/ui/nav-card/index.jsx b/src/shared/ui/nav-card/index.jsx
@@ -8,9 +8,10 @@ import styles from "./styles.module.scss";
 /**
  * NavCard for linking
  * @see https://docusaurus.io/docs/next/markdown-features/react#importing-markdown
+ * @param {import('./types').Props} props
  */
 export const NavCard = (props) => {
-    const { title, description, to, Icon, tags, className, disabled } = props;
+    const { title, description, to, Icon, tags, className, disabled, theme = "default" } = props;
     const handleClick = useCallback(() => {
         ga.sendEvent({
             category: ga.CATEGORIES.full,
@@ -22,7 +23,12 @@ export const NavCard = (props) => {
 
     return (
         <Link
-            className={clsx(styles.root, className, disabled && styles.rootDisabled)}
+            className={clsx(
+                styles.root,
+                className,
+                disabled && styles.rootDisabled,
+                styles[`${theme}Theme`],
+            )}
             to={to}
             onClick={handleClick}
         >

diff --git a/src/shared/ui/nav-card/styles.module.scss b/src/shared/ui/nav-card/styles.module.scss
@@ -46,6 +46,39 @@
     margin-bottom: 0;
 }
 
-html[data-theme="dark"] .root {
-    background: var(--ifm-color-gray-900);
+
+// themes
+.miniTheme {
+    padding: 20px 30px;
+
+
+    & .title {
+        font-size: 1rem;
+    }
+
+    & .details {
+        filter: grayscale(1);
+    }
+
+    &:hover .details {
+        filter: grayscale(0);
+    }
+}
+
+.primaryTheme {
+    background-color: var(--ifm-color-primary);
+    color: #fff;
+
+    &:hover {
+        color: #fff;
+        box-shadow: 0 2px 10px 0 var(--ifm-color-primary-neutral);
+    }
 }
+
+// dark-mode
+html[data-theme="dark"] .root {
+    &.defaultTheme,
+    &.miniTheme {
+        background: var(--ifm-color-gray-900);
+    }
+}
diff --git a/src/shared/ui/nav-card/types.d.ts b/src/shared/ui/nav-card/types.d.ts
@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+
+export type Props = {
+    title: ReactNode;
+    description: ReactNode;
+    to: string;
+    Icon: string | any;
+    tags?: string;
+    className?: string;
+    disabled?: boolean;
+    theme?: "default" | "mini" | "primary";
+};