Skip to content

Commit

Permalink
feat: page responsive style changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@mvriu5
mvriu5 committed Jul 31, 2024
1 parent 69e937b commit 55601ee
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 176 deletions.
1 change: 1 addition & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
/.idea
/.github
/public
/.next
.gitignore
.eslintrc.json
next.config.mjs
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "griller",
"license": "MIT",
"version": "1.0.3",
"version": "1.0.4",
"private": false,
"repository": {
"url": "https://github.com/mvriu5/griller"
Expand Down
357 changes: 182 additions & 175 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default function Home() {
<Image src={"/logo.png"} width={50} height={50} alt={"logo"}/>
<div className={"flex flex-col space-y-1"}>
<span className={"text-lg text-zinc-700 font-medium"}>Griller</span>
<span className={"text-sm text-zinc-500"}>A fully customizable React Toast Component</span>
<span className={"hidden sm:block text-sm text-zinc-500"}>A fully customizable React Toast Component</span>
</div>
</div>

Expand All @@ -43,192 +43,199 @@ export default function Home() {
</div>


<div className={"flex flex-row justify-between pb-8"}>
<div className={"flex flex-row space-x-2"}>
<Button title={"Test"}
icon={<FlaskConical size={15} className={"mr-2"}/>}
<motion.div
initial={{opacity: 0, filter: 'blur(10px)', y: 50}}
animate={{opacity: 1, filter: 'blur(0px)', y: 0}}
transition={{duration: 0.65}}
className={"flex flex-col space-y-4"}
>
<div className={"flex flex-row justify-between space-x-2 pb-8"}>
<div className={"flex flex-row space-x-2"}>
<Button title={"Test"}
icon={<FlaskConical size={15} className={"mr-2"}/>}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title'
})}
className={"text-zinc-200 bg-zinc-900 hover:bg-zinc-800 hover:text-zinc-100"}
/>
<Button title={"Docs"}
icon={<SquareArrowOutUpRight size={16} className={"mr-2"}/>}
/>
</div>

<div
className={"flex flex-row space-x-8 items-center bg-zinc-50 px-2 py-1 text-zinc-500 rounded-lg border border-zinc-200 overflow-hidden"}>
<span className={"font-mono text-sm truncate"}>npm install griller</span>
<CopyButton copyText={"npm install griller"}/>
</div>
</div>

<CodeBlock title={"Code Example"}
fileName={"layout.tsx"}
filePath={"/layout-example.txt"}
/>

<CodeBlock fileName={"component.tsx"}
filePath={"/component-example.txt"}
/>

<div className={"flex flex-wrap space-x-2 space-y-2 items-center pt-8"}>
<span className={"text-sm text-zinc-700"}>Position</span>
<Button title={"top-left"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "tl"
})}
/>
<Button title={"top-center"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title'
secondTitle: 'This is the second toast title',
position: "tc"
})}
className={"text-zinc-200 bg-zinc-900 hover:bg-zinc-800 hover:text-zinc-100"}
/>
<Button title={"Docs"}
icon={<SquareArrowOutUpRight size={16} className={"mr-2"}/>}
<Button title={"top-right"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "tr"
})}
/>
<Button title={"bottom-left"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "bl"
})}
/>
<Button title={"bottom-center"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "bc"
})}
/>
<Button title={"bottom-right"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "br"
})}
/>
</div>

<div
className={"flex flex-row space-x-8 items-center bg-zinc-50 px-2 py-1 text-zinc-500 rounded-lg border border-zinc-200"}>
<span className={"font-mono text-sm"}>npm install griller</span>
<CopyButton copyText={"npm install griller"}/>
<div className={"flex flex-row space-x-2 items-center"}>
<span className={"text-sm text-zinc-700"}>Duration</span>
<Button title={"1s"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
duration: 1000
})}
/>
<Button title={"3s"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
duration: 3000
})}
/>
<Button title={"5s"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
duration: 5000
})}
/>
</div>
</div>

<CodeBlock title={"Code Example"}
fileName={"layout.tsx"}
filePath={"/layout-example.txt"}
/>

<CodeBlock fileName={"component.tsx"}
filePath={"/component-example.txt"}
/>

<div className={"flex flex-wrap space-x-2 space-y-2 items-center pt-8"}>
<span className={"text-sm text-zinc-700"}>Position</span>
<Button title={"top-left"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "tl"
})}
/>
<Button title={"top-center"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "tc"
})}
/>
<Button title={"top-right"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "tr"
})}
/>
<Button title={"bottom-left"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "bl"
})}
/>
<Button title={"bottom-center"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "bc"
})}
/>
<Button title={"bottom-right"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
position: "br"
})}
/>
</div>

<div className={"flex flex-row space-x-2 items-center"}>
<span className={"text-sm text-zinc-700"}>Duration</span>
<Button title={"1s"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
duration: 1000
})}
/>
<Button title={"3s"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
duration: 3000
})}
/>
<Button title={"5s"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
duration: 5000
})}
/>
</div>

<div className={"flex flex-row space-x-2 items-center"}>
<span className={"text-sm text-zinc-700"}>Buttons</span>
<Button title={"Close"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
closeButton: true,
duration: 60000
})}
/>
<Button title={"Action"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
actionButton: true
})}
/>
<Button title={"Close & Action"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
closeButton: true,
duration: 60000,
actionButton: true
})}
/>
</div>
<div className={"flex flex-row space-x-2 items-center"}>
<span className={"text-sm text-zinc-700"}>Buttons</span>
<Button title={"Close"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
closeButton: true,
duration: 60000
})}
/>
<Button title={"Action"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
actionButton: true
})}
/>
<Button title={"Close & Action"}
onClick={() => addToast({
icon: <ShieldAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
closeButton: true,
duration: 60000,
actionButton: true
})}
/>
</div>

<div className={"flex flex-row space-x-2 items-center pb-16"}>
<span className={"text-sm text-zinc-700"}>Icon</span>
<Button title={"Alert"}
onClick={() => addToast({
icon: <TriangleAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
<Button title={"Message"}
onClick={() => addToast({
icon: <MessageSquare size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
<Button title={"Branch"}
onClick={() => addToast({
icon: <GitBranch size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
<Button title={""}
icon={<Ban size={16}/>}
className={"py-2"}
onClick={() => addToast({
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
</div>
<div className={"flex flex-row space-x-2 items-center pb-16"}>
<span className={"text-sm text-zinc-700"}>Icon</span>
<Button title={"Alert"}
onClick={() => addToast({
icon: <TriangleAlert size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
<Button title={"Message"}
onClick={() => addToast({
icon: <MessageSquare size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
<Button title={"Branch"}
onClick={() => addToast({
icon: <GitBranch size={24}/>,
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
<Button title={""}
icon={<Ban size={16}/>}
className={"py-2"}
onClick={() => addToast({
title: 'Toast Notification',
secondTitle: 'This is the second toast title',
})}
/>
</div>

<div className={"w-full h-20 flex flex-row pt-4 space-x-2 border-t border-zinc-200 text-sm text-zinc-500"}>
<span>Made by</span>
<motion.span
className={"text-zinc-700 underline cursor-pointer"}
onClick={() => window.location.href = 'https://ahsmus.com'}
whileHover={{y: -4}}
>
mvriu5
</motion.span>
</div>
<div className={"w-full h-20 flex flex-row pt-4 space-x-2 border-t border-zinc-200 text-sm text-zinc-500"}>
<span>Made by</span>
<motion.span
className={"text-zinc-700 underline cursor-pointer"}
onClick={() => window.location.href = 'https://ahsmus.com'}
whileHover={{y: -4}}
>
mvriu5
</motion.span>
</div>
</motion.div>
</div>
);
}

0 comments on commit 55601ee

Please sign in to comment.