-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #100 from wizelineacademy/dev
- Loading branch information
Showing
8 changed files
with
179 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import Link from "next/link"; | ||
import ArticleIcon from "../components/icons/ArticleIcon"; | ||
import BookIcon from "../components/icons/BookIcon"; | ||
import VideoIcon from "../components/icons/VideoIcon"; | ||
|
||
interface InterfacePipResource { | ||
title: string | null; | ||
description: string | null; | ||
type: string | null; | ||
} | ||
|
||
const PipResource = ({ title, description, type }: InterfacePipResource) => { | ||
const renderIcon = () => { | ||
switch (type) { | ||
case "video": | ||
return <VideoIcon size="h-10 w-10" color="text-primary" />; | ||
case "book": | ||
return <BookIcon size="h-10 w-10" color="text-primary" />; | ||
case "article": | ||
return <ArticleIcon size="h-10 w-10" color="text-primary" />; | ||
default: | ||
return <ArticleIcon size="h-10 w-10" color="text-primary" />; | ||
} | ||
}; | ||
|
||
const renderButtonLabel = () => { | ||
switch (type) { | ||
case "video": | ||
return "Watch it"; | ||
case "book": | ||
return "Get it"; | ||
case "article": | ||
return "Read it"; | ||
default: | ||
return "Read it"; | ||
} | ||
}; | ||
|
||
return ( | ||
<div className="box-border flex h-48 w-52 shrink-0 flex-col rounded-xl bg-white p-3 shadow-lg"> | ||
<header className="flex items-center"> | ||
{renderIcon()} | ||
<p className="text-md ms-3 text-wrap font-semibold">{title}</p> | ||
</header> | ||
<p className="font-regular mb-2 mt-3 h-full overflow-hidden text-ellipsis text-xs text-[#9E9E9E]"> | ||
{description} | ||
</p> | ||
<button className="mx-auto w-fit rounded-full bg-primary px-7 py-1 text-xs font-medium text-white"> | ||
<Link href="/">{renderButtonLabel()}</Link> | ||
</button> | ||
</div> | ||
); | ||
}; | ||
|
||
export default PipResource; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
interface InterfacePipTask { | ||
title: string | null; | ||
description: string | null; | ||
isDone: boolean | null; | ||
handleCheck: () => void; | ||
} | ||
|
||
const PipTask = ({ | ||
title, | ||
description, | ||
isDone, | ||
handleCheck, | ||
}: InterfacePipTask) => { | ||
return ( | ||
<div className="box-border h-48 w-52 shrink-0 rounded-xl bg-white px-2 py-9 shadow-lg"> | ||
<header className="flex items-center"> | ||
<p className="text-md text-wrap font-semibold">{title}</p> | ||
<div className="ml-auto inline-flex items-center"> | ||
<label className="relative flex cursor-pointer items-center"> | ||
<input | ||
type="checkbox" | ||
onChange={handleCheck} | ||
className="h-6 w-6 transform cursor-pointer appearance-none rounded-full border border-primary border-primary/80 bg-primary-light/20 outline-primary transition-all duration-200 ease-in-out checked:bg-primary hover:scale-110" | ||
checked={isDone || false} // default to false if isDone is null | ||
/> | ||
</label> | ||
</div> | ||
</header> | ||
<p className="font-regular mt-2 text-ellipsis text-wrap text-xs text-[#9E9E9E]"> | ||
{description} | ||
</p> | ||
</div> | ||
); | ||
}; | ||
|
||
export default PipTask; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
interface InterfaceProgressBar { | ||
width: number; // percentage | ||
height: number; // height in talwindcss | ||
} | ||
|
||
const ProgressBar = ({ width, height }: InterfaceProgressBar) => { | ||
return ( | ||
<div className="w-100 rounded-full bg-gray-200 p-1.5"> | ||
<div | ||
className={`h-${height} rounded-full bg-gradient-to-r from-primary to-secondary transition-all delay-100 ease-linear`} | ||
style={{ width: `${width}%` }} | ||
/> | ||
</div> | ||
); | ||
}; | ||
|
||
export default ProgressBar; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
interface InterfaceArticle { | ||
size: string; | ||
color: string; | ||
} | ||
|
||
const ArticleIcon = ({ size, color }: InterfaceArticle) => ( | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="none" | ||
viewBox="0 0 24 24" | ||
strokeWidth={1.5} | ||
stroke="currentColor" | ||
className={`${color} ${size}`} | ||
> | ||
<path | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" | ||
/> | ||
</svg> | ||
); | ||
|
||
export default ArticleIcon; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
interface InterfaceBookIcon { | ||
color: string; | ||
size: string; | ||
} | ||
const BookIcon = ({ color, size }: InterfaceBookIcon) => ( | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="none" | ||
viewBox="0 0 24 24" | ||
strokeWidth={1.5} | ||
stroke="currentColor" | ||
className={`${size} ${color}`} | ||
> | ||
<path | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" | ||
/> | ||
</svg> | ||
); | ||
|
||
export default BookIcon; |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
interface InterfaceVideoIcon { | ||
color: string; | ||
size: string; | ||
} | ||
|
||
const VideoIcon = ({ color, size }: InterfaceVideoIcon) => { | ||
return ( | ||
<svg | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="none" | ||
viewBox="0 0 24 24" | ||
strokeWidth={1.5} | ||
stroke="currentColor" | ||
className={`${size} ${color}`} | ||
> | ||
<path | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" | ||
/> | ||
</svg> | ||
); | ||
}; | ||
|
||
export default VideoIcon; |