feat: initial commit

package.json

@@ -22,8 +22,13 @@
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.5",

src/components/App.tsx

@@ -1,70 +1,18 @@
-import Avatar from 'components/Avatar'
-import logo from 'assets/logo.svg'
+import {BrowserRouter, useRoutes} from "react-router-dom";
+import routesConfig from "../config/routesConfig";
+import Navbar from "./Navbar";
 
-const randoms = [
-  [1, 2],
-  [3, 4, 5],
-  [6, 7]
-]
+const AppRoutes = () => {
+  return useRoutes(routesConfig);
+};
 
 function App() {
+
   return (
-    <div className="relative overflow-hidden bg-white">
-      <div className="h-screen sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
-        <div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
-          <div className="sm:max-w-lg">
-            <div className="my-4">
-              <Avatar size="large" src={logo} />
-            </div>
-            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
-              Welcome!
-            </h1>
-            <p className="mt-4 text-xl text-gray-500">
-              This is a boilerplate build with Vite, React 18, TypeScript,
-              Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier.
-            </p>
-          </div>
-          <div>
-            <div className="my-10">
-              <a
-                href="vscode://"
-                className="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-center font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-700 focus:ring-offset-2"
-              >
-                Start building for free
-              </a>
-              <div
-                aria-hidden="true"
-                className="pointer-events-none mt-10 md:mt-0 lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl"
-              >
-                <div className="absolute sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
-                  <div className="flex items-center space-x-6 lg:space-x-8">
-                    {randoms.map((random, number) => (
-                      <div
-                        key={`random-${random[number]}`}
-                        className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8"
-                      >
-                        {random.map((number) => (
-                          <div
-                            key={`random-${number}`}
-                            className="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100"
-                          >
-                            <img
-                              src={`https://picsum.photos/600?random=${number}`}
-                              alt=""
-                              className="size-full bg-indigo-100 object-cover object-center"
-                            />
-                          </div>
-                        ))}
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <BrowserRouter>
+      <Navbar/>
+      <AppRoutes/>
+    </BrowserRouter>
   )
 }
 

src/components/Avatar/__snapshots__/test.tsx.snap

@@ -1,42 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`<Avatar /> > should render the empty Avatar 1`] = `
-<span
-  class="inline-block overflow-hidden bg-gray-100 rounded-full w-12 h-12"
-  data-testid="empty-avatar"
->
-  <svg
-    class="size-full text-gray-300"
-    fill="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
-    />
-  </svg>
-</span>
-`;
-
-exports[`<Avatar /> > should render the large Avatar 1`] = `
-<img
-  alt="Avatar"
-  class="inline-block rounded-full w-14 h-14"
-  src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
-/>
-`;
-
-exports[`<Avatar /> > should render the medium Avatar as default 1`] = `
-<img
-  alt="Avatar"
-  class="inline-block rounded-full w-12 h-12"
-  src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
-/>
-`;
-
-exports[`<Avatar /> > should render the small Avatar 1`] = `
-<img
-  alt="Avatar"
-  class="inline-block rounded-full w-10 h-10"
-  src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
-/>
-`;

src/components/Avatar/index.tsx

@@ -1,47 +0,0 @@
-import { classNames } from 'utils'
-
-type Size = 'small' | 'medium' | 'large'
-
-type AvatarProps = {
-  size?: Size
-  src?: string
-  alt?: string
-}
-
-const sizes: Record<Size, string> = {
-  small: 'w-10 h-10',
-  medium: 'w-12 h-12',
-  large: 'w-14 h-14'
-}
-
-const EmptyAvatar = ({ size = 'medium' }: Pick<AvatarProps, 'size'>) => (
-  <span
-    data-testid="empty-avatar"
-    className={classNames(
-      'inline-block overflow-hidden bg-gray-100 rounded-full',
-      sizes[size]
-    )}
-  >
-    <svg
-      className="size-full text-gray-300"
-      fill="currentColor"
-      viewBox="0 0 24 24"
-    >
-      <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
-    </svg>
-  </span>
-)
-
-export default function Avatar({ size = 'medium', src, alt }: AvatarProps) {
-  if (!src) {
-    return <EmptyAvatar size={size} />
-  }
-
-  return (
-    <img
-      className={classNames('inline-block rounded-full', sizes[size])}
-      src={src}
-      alt={alt}
-    />
-  )
-}

src/components/Avatar/test.tsx

@@ -1,64 +0,0 @@
-import { render, screen } from '@testing-library/react'
-
-import Avatar from '.'
-
-describe('<Avatar />', () => {
-  const props = {
-    src: 'https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0',
-    alt: 'Avatar'
-  }
-
-  it('should render the medium Avatar as default', () => {
-    const { container } = render(<Avatar {...props} />)
-
-    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
-
-    expect(container.firstChild).toHaveClass(
-      'inline-block w-12 h-12 rounded-full'
-    )
-
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('should render the small Avatar', () => {
-    const { container } = render(<Avatar size="small" {...props} />)
-
-    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
-
-    expect(container.firstChild).toHaveClass(
-      'inline-block w-10 h-10 rounded-full'
-    )
-
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('should render the medium Avatar', () => {
-    const { container } = render(<Avatar size="medium" {...props} />)
-
-    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
-
-    expect(container.firstChild).toHaveClass(
-      'inline-block w-12 h-12 rounded-full'
-    )
-  })
-
-  it('should render the large Avatar', () => {
-    const { container } = render(<Avatar size="large" {...props} />)
-
-    expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
-
-    expect(container.firstChild).toHaveClass(
-      'inline-block w-14 h-14 rounded-full'
-    )
-
-    expect(container.firstChild).toMatchSnapshot()
-  })
-
-  it('should render the empty Avatar', () => {
-    const { container } = render(<Avatar />)
-
-    expect(screen.getByTestId('empty-avatar')).toBeInTheDocument()
-
-    expect(container.firstChild).toMatchSnapshot()
-  })
-})

src/components/Navbar/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import {Link} from 'react-router-dom';
+import githubIcon from '../../assets/github-mark.png'; // Adjust the path to your GitHub icon
+
+const Navbar: React.FC = () => {
+  return (
+    <AppBar position="static" style={{backgroundColor: 'white', color: 'black'}}>
+      <Toolbar>
+        <Typography fontSize={20} sx={{flexGrow: 1}}>OmniTools</Typography>
+
+        <Button color="inherit">
+          <Link to="/features" style={{textDecoration: 'none', color: 'inherit'}}>Features</Link>
+        </Button>
+        <Button color="inherit">
+          <Link to="/about-us" style={{textDecoration: 'none', color: 'inherit'}}>About Us</Link>
+        </Button>
+
+        <IconButton
+          color="inherit"
+          href="https://github.com/iib0011/omni-tools"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img src={githubIcon} alt="GitHub" style={{height: '24px', marginRight: '8px'}}/>
+          <Typography variant="button">Star us</Typography>
+        </IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Navbar;

src/config/routesConfig.tsx

@@ -0,0 +1,24 @@
+import {RouteObject} from "react-router-dom";
+import {Navigate} from "react-router-dom";
+import {ImagesConfig} from "../pages/images/ImagesConfig";
+import {lazy} from "react";
+
+const Home = lazy(() => import("../pages/home"));
+
+const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <Home/>,
+  },
+  {
+    path: "images",
+    children: ImagesConfig
+  },
+  {
+    path: "*",
+    element: <Navigate to="404"/>,
+  },
+];
+
+export default routes;
+

src/pages/home/index.tsx

@@ -0,0 +1,27 @@
+import {Box, Icon, Input, Stack, TextField} from "@mui/material";
+import Typography from "@mui/material/Typography";
+import SearchIcon from '@mui/icons-material/Search';
+
+export default function Home() {
+  return (<Box padding={5} display={'flex'} flexDirection={'column'} alignItems={'center'} justifyContent={'center'}
+               width={'100%'}>
+    <Box width={"60%"}>
+      <Stack mb={1} direction={'row'} spacing={1}> <Typography fontSize={30}>Transform Your Workflow
+        with </Typography><Typography
+        fontSize={30}
+        color={'primary'}>Omni
+        Tools</Typography></Stack>
+      <Typography fontSize={20} mb={2}>
+        Boost your productivity with Omni Tools—the ultimate toolkit for getting things done quickly! Access thousands
+        of
+        user-friendly utilities for editing images, text, lists, and data, all directly from your browser.
+      </Typography>
+
+      <TextField fullWidth placeholder={'Search all tools'} sx={{borderRadius: 2}} InputProps={{
+        endAdornment: (
+          <SearchIcon/>
+        ),
+      }}/>
+    </Box>
+  </Box>)
+}

src/pages/images/ImagesConfig.tsx

@@ -0,0 +1,10 @@
+import {RouteObject} from "react-router-dom";
+import {lazy} from "react";
+import {PngConfig} from "./png/PngConfig";
+
+const PngHome = lazy(() => import("./index"));
+
+export const ImagesConfig: RouteObject[] = [
+  {path: '', element: <PngHome/>},
+  {path: 'png', children: PngConfig},
+]

src/pages/images/index.tsx

@@ -0,0 +1,5 @@
+import {Box} from "@mui/material";
+
+export default function ImageHome() {
+  return (<Box></Box>)
+}

src/pages/images/png/PngConfig.tsx

@@ -0,0 +1,10 @@
+import {RouteObject} from "react-router-dom";
+import {lazy} from "react";
+
+const ChangeColorsInPng = lazy(() => import("./change-colors-in-png"));
+const PngHome = lazy(() => import("./"));
+
+export const PngConfig: RouteObject[] = [
+  {path: '', element: <PngHome/>},
+  {path: 'change-colors-in-png', element: <ChangeColorsInPng/>}
+]

src/pages/images/png/change-colors-in-png/index.tsx

@@ -0,0 +1,5 @@
+import { Box } from "@mui/material";
+
+export default function ChangeColorsInPng(){
+  return(<Box></Box>)
+}

src/pages/images/png/index.tsx

@@ -0,0 +1,5 @@
+import {Box} from "@mui/material";
+
+export default function PngHome() {
+  return (<Box></Box>)
+}