Merge pull request #41 from webdevhome:add-links

Add links, fix style issues

Author: alinnert

src/components/Header/AppAction.tsx

@@ -20,12 +20,12 @@ export const AppAction: FC<Props> = ({
       className={classNames(
         'flex items-center',
         'p-2',
-        'hover:bg-gray-200 active:bg-gray-300',
-        'dark:hover:bg-gray-600 dark:active:bg-gray-500',
         'rounded-md',
         'select-none',
         {
+          'hover:bg-gray-200 active:bg-gray-300': !active,
           'bg-brand-500 hover:bg-brand-600 active:bg-brand-700': active,
+          'dark:hover:bg-gray-600 dark:active:bg-gray-500': !active,
           'dark:hover:bg-brand-600 dark:active:bg-brand-700': active,
           'text-white': active,
           'text-gray-800 dark:text-gray-100': !active,

src/components/Search/Search.tsx

@@ -5,7 +5,7 @@ import { Link } from '../Links/Link'
 import { SearchDivider } from './SearchDivider'
 import { SearchHint } from './SearchHint'
 import { SearchHints } from './SearchHints'
-import { SearchTargetLabel } from './SearchTargetItem'
+import { SearchTargetLabel } from './SearchTargetLabel'
 import { useSearch } from './useSearch'
 
 export const Search: FC = () => {

src/components/Search/SearchTargetItem.tsx renamed to src/components/Search/SearchTargetLabel.tsx

@@ -30,7 +30,7 @@ export const SearchTargetLabel: FC<Props> = ({ title, icon, color }) => {
 
     return (
       <span
-        className="mx-2 p-1 w-[31px] h-[31px] bg-white rounded"
+        className="mr-2 p-1 w-[31px] h-[31px] bg-white rounded shrink-0"
         style={{ color }}
       >
         <ReactSVG src={iconUrl} className="search-target-item__icon" />
@@ -49,30 +49,38 @@ export const SearchTargetLabel: FC<Props> = ({ title, icon, color }) => {
   return (
     <div
       className={classNames(
-        'col-start-2 flex items-center',
-        'px-8',
+        'flex flex-col gap-y-4 items-start sm:flex-row sm:items-center',
+        'sm:px-8',
         'text-xl',
         'text-gray-700 dark:text-gray-100',
       )}
     >
-      <span
+      <div
         onClick={handleBackClick}
         className={classNames(
           'flex items-center',
           'mr-4 px-2 py-1',
-          'hover:bg-gray-100 dark:hover:bg-gray-500',
-          'active:bg-gray-200 dark:hover:bg-gray-400',
+          'bg-gray-100 hover:bg-gray-200 active:bg-gray-300',
+          'dark:bg-gray-600 dark:hover:bg-gray-500 dark:active:bg-gray-400',
           'rounded',
-          'cursor-default',
+          'cursor-default select-none',
         )}
       >
         <span className="mr-1">
           <MdiIcon path={mdiArrowLeft} />
         </span>
         Back
-      </span>
-      Search on {searchTargetIcon}
-      <span className="text-brand-600 dark:text-brand-300">{title}</span>:
+      </div>
+
+      <div className="flex items-center flex-wrap gap-y-2">
+        <span className="mr-2">Search on</span>
+        <span className="flex items-center">
+          {searchTargetIcon}
+          <span>
+            <span className="text-brand-600 dark:text-brand-300">{title}</span>:
+          </span>
+        </span>
+      </div>
     </div>
   )
 }

src/links.json

@@ -412,6 +412,13 @@
           "url": "https://docs.emmet.io/cheat-sheet",
           "description": "The official cheat sheet for Emmet - the editor shortcuts to quickly write HTML."
         },
+        {
+          "title": "BEM",
+          "url": "https://getbem.com/introduction",
+          "description": "A CSS naming convention that groups classes using namespaces.",
+          "icon": "bem",
+          "color": "#000000"
+        },
         {
           "title": "this vs that",
           "url": "https://thisthat.dev",
@@ -561,6 +568,13 @@
           "icon": "windicss",
           "color": "#48B0F1"
         },
+        {
+          "title": "MUI",
+          "url": "https://mui.com",
+          "description": "React component library with different design languages, including Material UI, and an unstyled version of every component.",
+          "icon": "mui",
+          "color": "#007FFF"
+        },
         {
           "title": "Bootstrap",
           "url": "https://getbootstrap.com",
@@ -1638,6 +1652,16 @@
           "icon": "html5",
           "color": "#e34f26"
         },
+        {
+          "title": "Web Weekly",
+          "url": "https://webweekly.email"
+        },
+        {
+          "title": "JAMstacked",
+          "url": "https://jamstack.email",
+          "icon": "jamstack",
+          "color": "#F0047F"
+        },
         {
           "title": "CSS Weekly",
           "url": "https://css-weekly.com",
@@ -1714,6 +1738,12 @@
           "icon": "python",
           "color": "#3776AB"
         },
+        {
+          "title": "Ruby Weekly",
+          "url": "https://rubyweekly.com",
+          "icon": "ruby",
+          "color": "#CC342D"
+        },
         {
           "title": "Postgres Weekly",
           "url": "https://postgresweekly.com",