-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update configuration and widget layout
- Loading branch information
1 parent
3b4c960
commit cc1cd96
Showing
14 changed files
with
326 additions
and
101 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,6 +27,7 @@ yarn-error.log* | |
|
|
||
| # local env files | ||
| .env*.local | ||
| .env | ||
|
|
||
| # vercel | ||
| .vercel | ||
|
|
||
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 |
|---|---|---|
| @@ -1,36 +1,52 @@ | ||
| This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). | ||
| # New Tab Extension (chromium) | ||
|
|
||
| ## Description | ||
|
|
||
| This project is a new tab extension that enhances the functionality of your browser's new tab page. It allows you to customize the appearance and add useful features to make your browsing experience more productive. | ||
|
|
||
| ## Getting Started | ||
|
|
||
| First, run the development server: | ||
| To get started with this project, follow the steps below: | ||
|
|
||
| ### Prerequisites | ||
|
|
||
| - [Node.js](https://nodejs.org) installed on your machine. | ||
| - [pnpm](https://pnpm.io) installed on your machine. | ||
|
|
||
| ### Installation | ||
|
|
||
| 1. Clone the repository: | ||
|
|
||
| ```bash | ||
| git clone https://github.com/your-username/newtab-extension.git | ||
| ``` | ||
|
|
||
| 2. Navigate to the project directory: | ||
|
|
||
| ```bash | ||
| npm run dev | ||
| # or | ||
| yarn dev | ||
| # or | ||
| pnpm dev | ||
| # or | ||
| bun dev | ||
| ``` | ||
| ```bash | ||
| cd newtab-extension | ||
| ``` | ||
|
|
||
| Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | ||
| 3. Install the dependencies: | ||
|
|
||
| You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. | ||
| ```bash | ||
| pnpm install | ||
| ``` | ||
|
|
||
| This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. | ||
| ### Usage | ||
|
|
||
| ## Learn More | ||
| 1. Load the extension in your browser: | ||
|
|
||
| To learn more about Next.js, take a look at the following resources: | ||
| - Open your browser and go to the extensions page. | ||
| - Enable the developer mode. | ||
| - Click on "Load unpacked" and select the `dist` directory in the project. | ||
|
|
||
| - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | ||
| - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. | ||
| 2. Enjoy the enhanced new tab experience! | ||
|
|
||
| You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! | ||
| ## Contributing | ||
|
|
||
| ## Deploy on Vercel | ||
| Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request. | ||
|
|
||
| The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. | ||
| ## License | ||
|
|
||
| Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. | ||
| This project is licensed under the [MIT License](LICENSE). |
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
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 @@ | ||
| import { Card, CardContent } from "@/components/ui/card"; | ||
|
|
||
| type Props = {}; | ||
|
|
||
| function ClockWidget({}: Props) { | ||
| return ( | ||
| <Card className="col-span-2 col-start-1 row-span-1 row-start-1 pt-0.5 2xl:pt-3 2xl:row-start-1 bg-background"> | ||
| <CardContent> | ||
| <div className="flex flex-col items-center justify-center h-full grow"> | ||
| <div className="-mb-1 text-2xl font-semibold 2xl:-mb-0 2xl:text-5xl"> | ||
| 12<span className="animate-pulse">:</span>00 | ||
| </div> | ||
| <div className="font-medium 2xl:text-xl text-muted-foreground"> | ||
| Monday, 1st January | ||
| </div> | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| export default ClockWidget; |
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
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 |
|---|---|---|
| @@ -1,79 +1,86 @@ | ||
| import * as React from "react" | ||
| import * as React from "react"; | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const Card = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "rounded-lg border bg-card text-card-foreground shadow-sm", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| Card.displayName = "Card" | ||
| <div | ||
| ref={ref} | ||
| className={cn( | ||
| "rounded-lg border bg-card text-card-foreground shadow-sm hover:border-primary transition duration-200", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| Card.displayName = "Card"; | ||
|
|
||
| const CardHeader = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex flex-col space-y-1.5 p-6", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardHeader.displayName = "CardHeader" | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex flex-col space-y-1.5 p-6", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardHeader.displayName = "CardHeader"; | ||
|
|
||
| const CardTitle = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLHeadingElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <h3 | ||
| ref={ref} | ||
| className={cn( | ||
| "text-2xl font-semibold leading-none tracking-tight", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardTitle.displayName = "CardTitle" | ||
| <h3 | ||
| ref={ref} | ||
| className={cn( | ||
| "text-2xl font-semibold leading-none tracking-tight", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardTitle.displayName = "CardTitle"; | ||
|
|
||
| const CardDescription = React.forwardRef< | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| HTMLParagraphElement, | ||
| React.HTMLAttributes<HTMLParagraphElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <p | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardDescription.displayName = "CardDescription" | ||
| <p | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardDescription.displayName = "CardDescription"; | ||
|
|
||
| const CardContent = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> | ||
| )) | ||
| CardContent.displayName = "CardContent" | ||
| <div ref={ref} className={cn("p-6 pt-0", className)} {...props} /> | ||
| )); | ||
| CardContent.displayName = "CardContent"; | ||
|
|
||
| const CardFooter = React.forwardRef< | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| HTMLDivElement, | ||
| React.HTMLAttributes<HTMLDivElement> | ||
| >(({ className, ...props }, ref) => ( | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex items-center p-6 pt-0", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| CardFooter.displayName = "CardFooter" | ||
| <div | ||
| ref={ref} | ||
| className={cn("flex items-center p-6 pt-0", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| CardFooter.displayName = "CardFooter"; | ||
|
|
||
| export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } | ||
| export { | ||
| Card, | ||
| CardHeader, | ||
| CardFooter, | ||
| CardTitle, | ||
| CardDescription, | ||
| CardContent, | ||
| }; |
Oops, something went wrong.