From ccd80471aceca220b393ecf2b3e28a8dbed4bad8 Mon Sep 17 00:00:00 2001 From: evgenius1424 Date: Tue, 29 Oct 2024 17:16:17 +0100 Subject: [PATCH] feat: add hide/reveal logic on words --- apps/learnbefore/package.json | 3 +- apps/learnbefore/src/components/word-card.tsx | 65 +++++++++++++++++++ apps/learnbefore/src/main.tsx | 10 +-- apps/learnbefore/src/pages/chat-page.tsx | 20 +----- apps/learnbefore/vite.config.ts | 2 +- package.json | 2 +- packages/ui/src/components/ui/badge.tsx | 36 ++++++++++ pnpm-lock.yaml | 3 + 8 files changed, 115 insertions(+), 26 deletions(-) create mode 100644 apps/learnbefore/src/components/word-card.tsx create mode 100644 packages/ui/src/components/ui/badge.tsx diff --git a/apps/learnbefore/package.json b/apps/learnbefore/package.json index dbf34eb..6974872 100644 --- a/apps/learnbefore/package.json +++ b/apps/learnbefore/package.json @@ -16,6 +16,7 @@ "i18next": "^23.11.5", "i18next-browser-languagedetector": "^8.0.0", "i18next-http-backend": "^2.5.2", + "lucide-react": "^0.383.0", "postcss": "^8.4.38", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -25,11 +26,11 @@ "tesseract.js": "^5.1.0" }, "devDependencies": { + "@repo/eslint-config": "workspace:*", "@repo/types": "workspace:*", "@repo/typescript-config": "workspace:*", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", - "@repo/eslint-config": "workspace:*", "@typescript-eslint/eslint-plugin": "^7.8.0", "@typescript-eslint/parser": "^7.8.0", "@vitejs/plugin-react": "^4.3.0", diff --git a/apps/learnbefore/src/components/word-card.tsx b/apps/learnbefore/src/components/word-card.tsx new file mode 100644 index 0000000..4564d23 --- /dev/null +++ b/apps/learnbefore/src/components/word-card.tsx @@ -0,0 +1,65 @@ +import React, { useState } from "react" +import { Eye, EyeOff, BookOpen, Check, X } from "lucide-react" +import { + Card, + CardContent, + CardFooter, + CardHeader, + CardTitle, +} from "@ui/components/ui/card" +import { Button } from "@ui/components/ui/button" +import { Word } from "@repo/types/words.ts" + +type WordCardProps = { + word: Word +} + +export const WordCard: React.FC = ({ word }) => { + const [showMeaning, setShowMeaning] = useState(false) + + const handleCardClick = (e: React.MouseEvent) => { + if (!(e.target as HTMLElement).closest("button")) { + setShowMeaning(!showMeaning) + } + } + return ( + + + {word.word} +
+ + +
+ + {showMeaning && ( + +

{word.translation}

+

{word.meaning}

+ + )} + + + + + + ) +} diff --git a/apps/learnbefore/src/main.tsx b/apps/learnbefore/src/main.tsx index 7fd285e..53503a8 100644 --- a/apps/learnbefore/src/main.tsx +++ b/apps/learnbefore/src/main.tsx @@ -12,9 +12,9 @@ if (!PUBLISHABLE_KEY) { } ReactDOM.createRoot(document.getElementById("root")!).render( - - - - - , + // + + + , + // , ) diff --git a/apps/learnbefore/src/pages/chat-page.tsx b/apps/learnbefore/src/pages/chat-page.tsx index 7a2761c..4e12572 100644 --- a/apps/learnbefore/src/pages/chat-page.tsx +++ b/apps/learnbefore/src/pages/chat-page.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from "react" import { AppShell } from "../components/app-shell" import { Message, Word } from "@repo/types/words.ts" -import { Card, CardContent } from "@repo/ui/components/ui/card" import { Input } from "@ui/components/ui/input.tsx" import { Button } from "@ui/components/ui/button.tsx" import { PaperclipIcon } from "../icons/paperclip-icon.tsx" @@ -11,6 +10,7 @@ import { fetchJson } from "../helpers/fetch-json.ts" import { useScrollToRef } from "../helpers/use-scroll-to-ref.ts" import { useTextFileUpload } from "../helpers/use-text-file-upload.ts" import { ChatWelcomeMessage } from "../components/chat-welcome-message.tsx" +import { WordCard } from "../components/word-card.tsx" export const ChatPage: React.FC = () => { const [messages, setMessages] = useState(null) @@ -132,7 +132,7 @@ export const ChatPage: React.FC = () => {
{message.words.map((word, wordIndex) => ( - + ))}
@@ -182,19 +182,3 @@ export const ChatPage: React.FC = () => { ) } - -const WordCard: React.FC<{ word: Word }> = ({ word }) => ( - - -
-
-

- {word.word} - {word.translation?.length > 2 ? ` - ${word.translation}` : null} -

-

{word.meaning}

-
-
- - -) diff --git a/apps/learnbefore/vite.config.ts b/apps/learnbefore/vite.config.ts index 8569246..66e4e9b 100644 --- a/apps/learnbefore/vite.config.ts +++ b/apps/learnbefore/vite.config.ts @@ -13,7 +13,7 @@ export default defineConfig({ server: { proxy: { "/api": { - target: `http://91.92.136.244:${PORT}`, + target: `http://localhost:${PORT}`, changeOrigin: true, ws: true, }, diff --git a/package.json b/package.json index 0c26aeb..91da265 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "private": true, "scripts": { "build": "turbo build", - "dev": "turbo dev", + "dev": "turbo dev --env-mode=loose", "lint": "turbo lint", "volta:install": "curl https://get.volta.sh | bash", "format": "prettier --write \"**/*.{ts,tsx,md}\"" diff --git a/packages/ui/src/components/ui/badge.tsx b/packages/ui/src/components/ui/badge.tsx new file mode 100644 index 0000000..2d31b5f --- /dev/null +++ b/packages/ui/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@ui/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + }, +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da093bd..dde0dbb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: i18next-http-backend: specifier: ^2.5.2 version: 2.5.2(encoding@0.1.13) + lucide-react: + specifier: ^0.383.0 + version: 0.383.0(react@18.3.1) postcss: specifier: ^8.4.38 version: 8.4.38