Frontend: Added button component with basic style, refactored Logo into svg/svg.tsx
This commit is contained in:
parent
46dc4097c5
commit
3323f171e6
@ -4,14 +4,16 @@ import PageTitle from "@/components/ui/page-title";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<main className="flex min-h-screen flex-col items-center p-24">
|
||||
<PageTitle title="Welcome"/>
|
||||
<ContentBox title="This is a title">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
|
||||
</ContentBox>
|
||||
<ContentBox title="This is another title">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
|
||||
</ContentBox>
|
||||
<div className="flex lg:flex-row sm:flex-col xs:flex-col">
|
||||
<ContentBox title="This is a title">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
|
||||
</ContentBox>
|
||||
<ContentBox title="This is another title">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
|
||||
</ContentBox>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,12 +1,22 @@
|
||||
"use client"
|
||||
|
||||
import Button from "@/components/ui/button";
|
||||
import ContentBox from "@/components/ui/content-box";
|
||||
import PageTitle from "@/components/ui/page-title";
|
||||
|
||||
export default function Tools() {
|
||||
|
||||
const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
|
||||
e.preventDefault();
|
||||
console.log("Clicked");
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<PageTitle title="Tools"/>
|
||||
<ContentBox title="This is a title">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
|
||||
<ContentBox title="This one has a button!">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
|
||||
<Button onClick={(e)=>handleClick(e)}>Click Me!</Button>
|
||||
</ContentBox>
|
||||
<ContentBox title="This is another title">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure deserunt esse illum pariatur libero provident maxime est aliquam labore odit, optio atque incidunt iusto debitis! Repudiandae quibusdam nulla accusantium quae.</p>
|
||||
|
||||
15
wretched-machines-frontend/src/components/svg/svg.tsx
Normal file
15
wretched-machines-frontend/src/components/svg/svg.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type LogoProps = {
|
||||
className?: string
|
||||
};
|
||||
|
||||
const Logo = (props: LogoProps) => <svg className={cn("fill-current h-3 w-3", props.className)} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
|
||||
const HamburgerIcon = (props: LogoProps) => <svg className={cn("fill-current h-8 w-8 mr-2", props.className)} width="54" height="54" viewBox="0 0 110 108" xmlns="http://www.w3.org/2000/svg"><path fill="#817e6f" stroke="#817e6f" d="M44.041 3.733C19.347 8.36 1.002 35.479 4.889 61.612c6.132 41.231 55.737 58.121 86.414 29.423 28.694-26.841 16.128-76.613-21.838-86.502-5.508-1.435-19.66-1.88-25.424-.8" fillRule="evenodd"/><path fill="#4f4b42" stroke="#4f4b42" d="M29.315 46.985C22.272 49.893 24.796 61 32.5 61c3.81 0 7.5-3.702 7.5-7.524 0-4.839-5.941-8.448-10.685-6.491M77 46.709C69.367 49.516 70.885 61 78.889 61c7.002 0 10.016-8.104 4.712-12.667-2.736-2.354-3.862-2.631-6.601-1.624m-57.403 6.135c-.346.56-.142 1.319.453 1.687 1.538.95 2.53-.351 1.246-1.635-.718-.718-1.277-.735-1.699-.052m23.986.022c-.431.697-.513 1.537-.183 1.867.895.895 1.871-.421 1.387-1.871-.338-1.016-.574-1.016-1.204.004M66 54c0 .55.675 1 1.5 1s1.5-.45 1.5-1-.675-1-1.5-1-1.5.45-1.5 1m23.5 0c.34.55 1.041 1 1.559 1s.941-.45.941-1-.702-1-1.559-1-1.281.45-.941 1" fillRule="evenodd"/></svg>
|
||||
|
||||
|
||||
export {
|
||||
Logo,
|
||||
HamburgerIcon
|
||||
};
|
||||
16
wretched-machines-frontend/src/components/ui/button.tsx
Normal file
16
wretched-machines-frontend/src/components/ui/button.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
children?: React.ReactNode;
|
||||
onClick?: React.MouseEventHandler<HTMLButtonElement>
|
||||
};
|
||||
|
||||
const Button = (props: ButtonProps) => {
|
||||
// TODO(Eero): Handle disabled, primary style, secondary style, hover, clicked, animation.
|
||||
return(
|
||||
<button className={cn("text-white bg-666666 p-1 hover:bg-black cursor-pointer outline-offset-2 hover:outline outline-black border-black outline-2 active:text-eth active:bg-white active:outline-white",props.className)} onClick={props.onClick}>{props.children}</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Button;
|
||||
@ -7,7 +7,7 @@ interface ContentBoxProps {
|
||||
|
||||
const ContentBox = (props: ContentBoxProps)=>{
|
||||
return(
|
||||
<div className={cn("shadow-lg m-10")}>
|
||||
<div className={cn("shadow-lg m-10 flex-col")}>
|
||||
<div className={cn("bg-666666 text-white p-8 pt-4 pb-4 text-xl text-left")}>{props.title}</div>
|
||||
<div className={cn("border-solid border-1 border-black p-8 text-eth")}>
|
||||
{props.children}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import Link from "next/link";
|
||||
import { cn } from "@/lib/utils"
|
||||
import { HamburgerIcon, Logo } from "@/components/svg/svg";
|
||||
|
||||
|
||||
const Break = ()=> <hr className={cn("w-100")}></hr>
|
||||
@ -39,12 +40,12 @@ const Navbar = ()=>{
|
||||
<Break/>
|
||||
<nav className="flex items-center justify-between flex-wrap bg-666666 p-6">
|
||||
<div className="flex items-center flex-shrink-0 text-white mr-6">
|
||||
<svg className="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 110 108" xmlns="http://www.w3.org/2000/svg"><path fill="#817e6f" stroke="#817e6f" d="M44.041 3.733C19.347 8.36 1.002 35.479 4.889 61.612c6.132 41.231 55.737 58.121 86.414 29.423 28.694-26.841 16.128-76.613-21.838-86.502-5.508-1.435-19.66-1.88-25.424-.8" fill-rule="evenodd"/><path fill="#4f4b42" stroke="#4f4b42" d="M29.315 46.985C22.272 49.893 24.796 61 32.5 61c3.81 0 7.5-3.702 7.5-7.524 0-4.839-5.941-8.448-10.685-6.491M77 46.709C69.367 49.516 70.885 61 78.889 61c7.002 0 10.016-8.104 4.712-12.667-2.736-2.354-3.862-2.631-6.601-1.624m-57.403 6.135c-.346.56-.142 1.319.453 1.687 1.538.95 2.53-.351 1.246-1.635-.718-.718-1.277-.735-1.699-.052m23.986.022c-.431.697-.513 1.537-.183 1.867.895.895 1.871-.421 1.387-1.871-.338-1.016-.574-1.016-1.204.004M66 54c0 .55.675 1 1.5 1s1.5-.45 1.5-1-.675-1-1.5-1-1.5.45-1.5 1m23.5 0c.34.55 1.041 1 1.559 1s.941-.45.941-1-.702-1-1.559-1-1.281.45-.941 1" fill-rule="evenodd"/></svg>
|
||||
<HamburgerIcon/>
|
||||
<span className="font-semibold text-xl tracking-tight">Wretched Machines</span>
|
||||
</div>
|
||||
<div className="block lg:hidden">
|
||||
<button className="flex items-center px-3 py-2 border rounded text-gray-200 border-gray-400 hover:text-white hover:border-white">
|
||||
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
<Logo/>
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user