Skip to content

add style #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
M7madMomani2 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add style #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
401 changes: 201 additions & 200 deletions components/CodeEditor.js
View file
Open in desktop

Large diffs are not rendered by default.

194 changes: 114 additions & 80 deletions components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,120 @@
import Link from "next/link";
import { useState } from "react";
export default function Footer() {
const [mode, setMode] = useState("auto");
return (
<div className="pt-12">
<footer id="footer" className="relative z-50 pt-24 bg-white shadow">
<div className="py-16 border-t border-b border-gray-200 border-gray-700 ">
<div className="container px-4 mx-auto xl:px-12 2xl:px-4">
<div className="lg:flex">
<div className="flex w-full mb-16 lg:w-1/2 lg:mb-0">
<div className="w-full px-6 lg:w-1/2">
<ul>
<li>
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">anything</a>
</Link>
</li>
<li className="mt-6">
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">anything</a>
</Link>
</li>



</ul>
</div>
<div className="w-full px-6 lg:w-1/2">
<ul>
<li>
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">anything </a>
</Link>
</li>
<li className="mt-6">
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">anything</a>
</Link>
</li>

</ul>
</div>
</div>
<div className="flex w-full lg:w-1/2">
<div className="w-full px-6 lg:w-1/2">
<ul>
<li>
<a href="#" className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">
anything
</a>
</li>
<li className="mt-6">
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">anything</a>
</Link>
</li>
</ul>
</div>
<div className="flex flex-col justify-between w-full px-6 lg:w-1/2">
<div className="flex items-center mb-6">
<a href="#">
<div className="cursor-pointer text-white-800 text-white-50 hover:text-brand ">
<svg className="footer-icon feather feather-github" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</div>
</a>
<a href="#">
<div className="pl-4">
<svg className="cursor-pointer footer-icon feather feather-twitter text-white-800 text-white-50 hover:text-brand " xmlns="http://www.w3.org/2000/svg" width={24} height={24} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
const [mode, setMode] = useState("auto");
return (
<div className="pt-12">
<footer id="footer" className="relative z-50 pt-24 bg-white shadow">
<div className="py-16 border-t border-b border-gray-200 border-gray-700 ">
<div className="container px-4 mx-auto xl:px-12 2xl:px-4">
<div className="lg:flex">
<div className="flex w-full mb-16 lg:w-1/2 lg:mb-0">
<div className="w-full px-6 lg:w-1/2">
<ul>
<li>
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">
It’s a website where people–mostly software
engineers–practice their coding skills. each with
multiple solutions.
</a>
</Link>
</li>
<li className="mt-6">
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">
Our active users cite the following reasons for
preferring Kuro: more questions, better quality, plus
a strong user base.
</a>
</Link>
</li>
</ul>
</div>
</footer>
<div className="w-full px-6 lg:w-1/2">
<ul>
<li>
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">
anything{" "}
</a>
</Link>
</li>
<li className="mt-6">
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">
anything
</a>
</Link>
</li>
</ul>
</div>
</div>
<div className="flex w-full lg:w-1/2">
<div className="w-full px-6 lg:w-1/2">
<ul>
<li>
<a
href="#"
className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50"
>
anything
</a>
</li>
<li className="mt-6">
<Link href="#">
<a className="text-xs leading-none lg:text-sm hover:text-brand text-white-800 text-white-50">
anything
</a>
</Link>
</li>
</ul>
</div>
<div className="flex w-full lg:w-1/2">
<div className="w-full px-6 lg:w-1/2">
<a href="#">
<div className="cursor-pointer text-white-800 text-white-50 hover:text-brand ">
<svg
className="footer-icon feather feather-github"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</div>
</a>
<a href="#">
<div className="pl-4">
<svg
className="cursor-pointer footer-icon feather feather-twitter text-white-800 text-white-50 hover:text-brand "
xmlns="http://www.w3.org/2000/svg"
width={24}
height={24}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
)
</footer>
</div>
);
}

73 changes: 49 additions & 24 deletions components/TimerComponent/BtnComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,58 @@
import React from 'react';
import React from "react";

function BtnComponent(props) {
return (
<div className="align-items">
{(props.status === 0)?
<button className="stopwatch-btn stopwatch-btn-gre"
onClick={props.start}>Start</button> : ""
}
<div className="flex ">
{props.status === 0 ? (
<button
className="bg-blue-500 p-5 text-white rounded focus:bg-green-700 w-36 "
onClick={props.start}
>
Start
</button>
) : (
""
)}

{(props.status === 1)?
<div>
<button className="stopwatch-btn stopwatch-btn-red"
onClick={props.stop}>Stop</button>
<button className="stopwatch-btn stopwatch-btn-yel"
onClick={props.reset}>Reset</button>
</div> : ""
}
{props.status === 1 ? (
<div className="flex space-x-2 md:space-x-4">
<button
className="bg-yellow-500 p-5 text-white rounded focus:bg-red-700 w-36"
onClick={props.stop}
>
Stop
</button>
<button
className="bg-red-500 p-5 text-white rounded focus:bg-red-700 w-36"
onClick={props.reset}
>
Reset
</button>
</div>
) : (
""
)}

{(props.status === 2)?
<div>
<button className="stopwatch-btn stopwatch-btn-gre"
onClick={props.resume}>Resume</button>
<button className="stopwatch-btn stopwatch-btn-yel"
onClick={props.reset}>Reset</button>
</div> : ""
}

{props.status === 2 ? (
<div className="flex space-x-2 md:space-x-2 ">
<button
className="bg-blue-500 p-5 text-white rounded focus:bg-red-700 w-36"
onClick={props.resume}
>
Resume
</button>
<button
className="bg-blue-500 p-5 text-white rounded focus:bg-red-700 w-36"
onClick={props.reset}
>
Reset
</button>
</div>
) : (
""
)}
</div>
);
}

export default BtnComponent;
export default BtnComponent;
30 changes: 17 additions & 13 deletions components/TimerComponent/DisplayComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import React from 'react';
import React from "react";

function DisplayComponent(props) {
const h = () => {
if(props.time.h === 0){
return '';
}else {
return <span>{(props.time.h >= 10)? props.time.h : "0"+ props.time.h}</span>;
}
}
if (props.time.h === 0) {
return "";
} else {
return (
<span>{props.time.h >= 10 ? props.time.h : "0" + props.time.h}</span>
);
}
};
return (
<div>
{h()}&nbsp;&nbsp;
<span>{(props.time.m >= 10)? props.time.m : "0"+ props.time.m}</span>&nbsp;:&nbsp;
<span>{(props.time.s >= 10)? props.time.s : "0"+ props.time.s}</span>&nbsp;:&nbsp;
<span>{(props.time.ms >= 10)? props.time.ms : "0"+ props.time.ms}</span>
<div className="bg-blue-500 p-5 text-white rounded focus:bg-red-700 w-36 justify-self-end ">
{h()}&nbsp;&nbsp;
<span>{props.time.m >= 10 ? props.time.m : "0" + props.time.m}</span>
&nbsp;:&nbsp;
<span>{props.time.s >= 10 ? props.time.s : "0" + props.time.s}</span>
&nbsp;:&nbsp;
<span>{props.time.ms >= 10 ? props.time.ms : "0" + props.time.ms}</span>
</div>
);
}

export default DisplayComponent;
export default DisplayComponent;
Empty file removed components/TimerComponent/x
View file
Open in desktop
Empty file.
Loading