Start on image gallery

.eslintrc.js

@@ -22,20 +22,20 @@ module.exports = {
     'eslint:recommended',
     'plugin:react/recommended',
     'plugin:jsx-a11y/recommended',
-    'plugin:prettier/recommended',
+    //'plugin:prettier/recommended',
     'plugin:storybook/recommended',
   ],
-  plugins: ['prettier'],
+  //plugins: ['prettier'],
   rules: {
     'react/no-unescaped-entities': 0,
     'no-unused-vars': 0,
-    'prettier/prettier': [
-      'error',
-      {},
-      {
-        usePrettierrc: true,
-      },
-    ],
+    // 'prettier/prettier': [
+    //   'error',
+    //   {},
+    //   {
+    //     usePrettierrc: true,
+    //   },
+    // ],
     'react/react-in-jsx-scope': 'off',
     'jsx-a11y/accessible-emoji': 'off',
     'react/prop-types': 'off',

package.json

@@ -2,7 +2,7 @@
   "name": "vite-reactts-eslint-prettier",
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "start http://localhost:3000 && vite ",
     "build": "tsc && vite build",
     "serve": "vite preview",
     "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",

src/App.css

@@ -21,7 +21,11 @@ p {
 .header {
   font-size: 3rem;
 }
-
+html,body,#root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;;
+}
 .body {
   margin: 20px 0 10px;
   font-size: 0.9rem;

src/ImageDetails.tsx

@@ -8,11 +8,25 @@ export const ImageDetails: React.FunctionComponent<{}> = (props) => {
       css={css`
         display: flex;
         flex-direction: column;
-        background-color: lightgray;
         width: 300px;
         margin-left: 10px;
       `}>
-      <div>current image</div>
+      <img
+        about="s"
+        src={`https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=164&h=164&fit=crop&auto=format?w=164&h=164&fit=crop&auto=format`}
+        alt={'foo'}
+        loading="lazy"
+        css={css`
+          margin-bottom: 15px;
+        `}
+      />
+      <div
+        css={css`
+          text-align: center;
+        `}>
+        1000 x 100 pixels<br></br>
+        1.2 Megabytes<br></br>JPEG
+      </div>
     </div>
   );
 };

src/ImageScreen.tsx

@@ -12,6 +12,7 @@ export const ImageScreen: React.FunctionComponent<{}> = (props) => {
         flex-direction: row;
         width: 100%;
         height: 500px; // enhance
+        padding: 20px;
       `}>
       <ImageSearch />
       <Divider orientation="vertical" flexItem />

src/ImageSearch.tsx

@@ -1,24 +1,53 @@
 import { css } from '@emotion/react';
-import { Divider, ImageList, ImageListItem } from '@mui/material';
+import {
+  Button,
+  Divider,
+  IconButton,
+  ImageList,
+  ImageListItem,
+  TextField,
+} from '@mui/material';
 import React from 'react';
-
+import { SearchResults } from './SearchResults';
+import SearchIcon from '@mui/icons-material/Search';
 export const ImageSearch: React.FunctionComponent<{}> = (props) => {
   return (
     <div
       css={css`
         flex-grow: 1;
       `}>
-      <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
-        {[1, 2, 3, 4, 5, 6].map((item) => (
-          <ImageListItem key={item}>
-            <img
-              src={`https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=164&h=164&fit=crop&auto=format?w=164&h=164&fit=crop&auto=format`}
-              alt={item.toString()}
-              loading="lazy"
+      <div
+        css={css`
+          display: flex;
+          flex-direction: row;
+        `}>
+        <TextField
+          id="outlined-basic"
+          label="Search"
+          variant="outlined"
+          size="small"
+          sx={{ width: '300px' }}></TextField>
+        {/* MUI IconButton by itself can't be contained. So we use a normal
+        Button with no text. */}
+        <Button
+          variant="contained"
+          size="small"
+          startIcon={
+            <SearchIcon
+              css={css`
+                width: 30px;
+                height: 30px;
+              `}
             />
-          </ImageListItem>
-        ))}
-      </ImageList>
+          }
+          css={css`
+            span {
+              margin: 0; // center the icon
+            }
+            margin-left: 5px;
+          `}></Button>
+      </div>
+      <SearchResults />
     </div>
   );
 };

src/SearchResults.tsx

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+import { Divider, ImageList, ImageListItem } from '@mui/material';
+import React from 'react';
+
+export const SearchResults: React.FunctionComponent<{}> = (props) => {
+  return (
+    <div
+      css={css`
+        flex-grow: 1;
+      `}>
+      <ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
+        {[1, 2, 3, 4, 5, 6].map((item) => (
+          <ImageListItem key={item}>
+            <img
+              src={`https://images.unsplash.com/photo-1558642452-9d2a7deb7f62?w=164&h=164&fit=crop&auto=format?w=164&h=164&fit=crop&auto=format`}
+              alt={item.toString()}
+              loading="lazy"
+            />
+          </ImageListItem>
+        ))}
+      </ImageList>
+    </div>
+  );
+};

src/stories/Button.tsx

@@ -1,5 +1,5 @@
 import './button.css';
-
+import { css } from '@emotion/react';
 import React from 'react';
 
 interface ButtonProps {
@@ -38,6 +38,9 @@ export const Button = ({
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
     <button
+      css={css`
+        margin-top: 200px;
+      `}
       type="button"
       className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}