diff --git a/2017/src/App.css b/2017/src/App.css index f439623..c6ebadc 100644 --- a/2017/src/App.css +++ b/2017/src/App.css @@ -322,6 +322,25 @@ header h1 { color: var(--score-weak-accent); } +.example-btn { + display: inline-block; + padding: 0.1rem 0.5rem; + font-size: 0.8rem; + font-family: inherit; + background: var(--surface-alt); + color: var(--text); + border: 1px solid var(--border); + border-radius: 999px; + cursor: pointer; + transition: background 0.15s, border-color 0.15s; +} + +.example-btn:hover { + background: var(--primary); + color: var(--primary-ink); + border-color: var(--primary); +} + /* Loading */ .loading { text-align: center; diff --git a/2017/src/components/custom-query.jsx b/2017/src/components/custom-query.jsx index 081bd08..b07d56b 100644 --- a/2017/src/components/custom-query.jsx +++ b/2017/src/components/custom-query.jsx @@ -20,6 +20,22 @@ ORDER BY khtn DESC LIMIT 10`, sql: `SELECT so_bao_danh, ho_ten, lich_su, dia_ly, gdcd, khxh FROM student WHERE khxh IS NOT NULL ORDER BY khxh DESC LIMIT 10`, + }, + { + label: "Top 10 điểm Toán - Long An", + sql: `SELECT so_bao_danh, ho_ten, ngay_sinh, toan +FROM student +WHERE so_bao_danh LIKE '49%' AND toan IS NOT NULL +ORDER BY toan DESC LIMIT 10`, + }, + { + label: "Top 100 khối A - Long An", + sql: `SELECT so_bao_danh, ho_ten, toan, vat_ly, hoa_hoc, + ROUND(toan + vat_ly + hoa_hoc, 2) AS tong_khoi_a +FROM student +WHERE so_bao_danh LIKE '49%' + AND toan IS NOT NULL AND vat_ly IS NOT NULL AND hoa_hoc IS NOT NULL +ORDER BY tong_khoi_a DESC LIMIT 100`, }, { label: "Thí sinh đạt 9+ điểm Toán", diff --git a/2017/src/components/search-form.jsx b/2017/src/components/search-form.jsx index 2f65c90..8a75269 100644 --- a/2017/src/components/search-form.jsx +++ b/2017/src/components/search-form.jsx @@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react"; const DEBOUNCE_MS = 300; const MIN_SBD_DIGITS = 3; const MIN_NAME_CHARS = 2; +const EXAMPLES = ["49008235", "Nguyễn Minh Tiến"]; // Detect input mode for dynamic hint shown under the field function detectMode(raw) { @@ -92,6 +93,26 @@ export function SearchForm({ onSearch, onClear, disabled }) {
{hint} + {mode === "empty" && ( + <> + {" · VD: "} + {EXAMPLES.map((ex, i) => ( + + + {i < EXAMPLES.length - 1 ? " hoặc " : ""} + + ))} + > + )}
);