lucxjo/friends-best
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

Updated website design. Added a birthday command generator

Browse source
This commit is contained in:
Ludoviko 2021-09-17 19:16:10 +01:00
parent 3a7194b33d
commit d424504547
No known key found for this signature in database
GPG key ID: 1E66DEA3F5D623D1
16 changed files with 5764 additions and 3650 deletions
Download patch file Download diff file Expand all files Collapse all files

35
pages/birthdays.tsx Normal file
View file

@ -0,0 +1,35 @@
import { Title, Paragraph, Heading } from "../components";
import DatePicker from 'react-datepicker'
import { useState } from "react";
import "react-datepicker/dist/react-datepicker.css"
import CopyToClipboard from "react-copy-to-clipboard";
import moment from "moment";
import Head from "next/head";
export default function BirthdaysPage() {
const [date, setDate] = useState(new Date());
return (
<>
<Head>
<meta name="description" content="A command generator for UtiliBots' birthday bot." />
<meta property="og:description" content="A command generator for UtiliBots' birthday bot."/>
</Head>
<div className="min-h-screen min-w-full bg-gray-400 dark:bg-gray-800">
<Title>Birthdays</Title>
<Paragraph>You can generate your birthday command here for UtiliBots&apos; birthday bot.</Paragraph>
<Heading>I was born on the...</Heading>
<Paragraph>The format is <strong>DD/MM</strong>.</Paragraph>
<DatePicker className="mx-4" selected={date} onChange={
// @ts-ignore
date => setDate(date)
}
dateFormat="dd/MM" />
<Heading>Command to set my birthday: </Heading>
<Paragraph>{`bd!setup ${Intl.DateTimeFormat().resolvedOptions().timeZone} ${moment(date).format("MM/DD")}`}</Paragraph>
<CopyToClipboard text={`bd!setup ${Intl.DateTimeFormat().resolvedOptions().timeZone} ${date.getMonth()+1}/${date.getDate()}`}>
<button className="mx-4 px-4 dark:text-gray-300 dark:bg-gray-500 bg-white">Copy!</button>
</CopyToClipboard>
</div>
</>
);
}