marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 14:09:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: initial commit

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-06-19 19:10:14 +01:00
parent 2cb7ce23db
commit 3757717bcf
16 changed files with 959 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/App.tsx
View File

@@ -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>
)
}

42
src/components/Avatar/__snapshots__/test.tsx.snap
View File

@@ -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"
/>
`;

47
src/components/Avatar/index.tsx
View File

@@ -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}
/>
)
}

64
src/components/Avatar/test.tsx
View File

@@ -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()
})
})

37
src/components/Navbar/index.tsx Normal file
View File

@@ -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;