Skip to content

Commit

Permalink
Improve Logo and Link
Browse files Browse the repository at this point in the history
  • Loading branch information
@BlackRam-oss
BlackRam-oss committed Dec 15, 2023
1 parent 97163dc commit 5d90395
Show file tree
Hide file tree
Showing 5 changed files with 100 additions and 42 deletions.
25 changes: 25 additions & 0 deletions src/components/Animation/Typewriter.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { useEffect, useState } from 'react';

type IProps = {
text: string;
delay: number;
};

export default function Typewriter(props: IProps) {
const { text, delay } = props;
const [currentText, setCurrentText] = useState('');
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
if (currentIndex < text.length) {
const timeout = setTimeout(() => {
setCurrentText(prevText => prevText + text[currentIndex]);
setCurrentIndex(prevIndex => prevIndex + 1);
}, delay);

return () => clearTimeout(timeout);
}
}, [currentIndex, delay, text]);

return <span>{currentText}</span>;
};
10 changes: 5 additions & 5 deletions src/components/Copyright.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Link, Typography } from "@mui/joy";
import { Typography } from "@mui/joy";
import { gitHubLink } from "constant";
import DRLink from "./DRLink";

function Copyright() {
return (
Expand All @@ -8,12 +9,11 @@ function Copyright() {
sx={{ alignSelf: 'center' }}
>
{"Copyright © "}
<Link
textColor={"text.secondary"}
href={gitHubLink + "/drincs-website"}
<DRLink
to={gitHubLink + "/drincs-website"}
>
DRincs WebSite
</Link>{" "}
</DRLink>{" "}
{new Date().getFullYear()}
</Typography>
);
Expand Down
21 changes: 21 additions & 0 deletions src/components/DRLink.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { ColorPaletteProp } from '@mui/joy';
import Link from '@mui/joy/Link';
import { LinkProps, Link as RouterLink } from 'react-router-dom';

export interface IProps extends LinkProps {
color?: ColorPaletteProp
}

export default function DRLink(props: IProps) {
const {
...rest
} = props

return (

<Link
{...rest}
component={RouterLink}
/>
);
}
65 changes: 32 additions & 33 deletions src/components/DRNavbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import Fab from '@mui/material/Fab';
import Zoom from '@mui/material/Zoom';
import { materialUseTheme } from 'Theme';
import React from 'react';
import { Link, To, useLocation, useNavigate } from 'react-router-dom';
import { To, useLocation, useNavigate } from 'react-router-dom';
import AuthService, { getUserName, isLoggedIn } from 'services/AuthService';
import DRErrorComponent from './DRErrorComponent';
import DRLink from './DRLink';
import DRLogo from './String/DRLogo';

// https://mui.com/components/app-bar/
Expand Down Expand Up @@ -84,16 +85,18 @@ function DRNavbar(props: IDRNavbarProps) {
component="div"
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
>
<Link
<DRLink
to={"/"}
key={"logo_link"}
style={{
textDecoration: 'none',
color: "white",
}}
>
<DRLogo />
</Link>
<DRLogo
fontSize={24}
/>
</DRLink>
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
<Grid
Expand All @@ -103,22 +106,16 @@ function DRNavbar(props: IDRNavbarProps) {
alignItems="center"
>
{pages.map((page) => (
<Link
to={page.path}
key={page.title + "_link"}
style={{
textDecoration: 'none',
color: "white",
<Button
key={page.title}
onClick={() => {
navigate(page.path);
handleCloseNavMenu()
}}
sx={{ my: 2, color: 'white', display: 'inline-table' }}
>
<Button
key={page.title}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'inline-table' }}
>
{page.title}
</Button>
</Link>
{page.title}
</Button>
))}
{extern_link.map((page) => (
<Button
Expand Down Expand Up @@ -176,23 +173,23 @@ function DRNavbar(props: IDRNavbarProps) {
}}
>
{pages.map((page) => (
<Link
to={page.path}
key={page.title + "_link"}
style={{
textDecoration: 'none',
color: "white",
}}
<MenuItem
key={page.title}
onClick={handleCloseNavMenu}
>
<MenuItem
key={page.title}
onClick={handleCloseNavMenu}
<DRLink
to={page.path}
key={page.title + "_link"}
style={{
textDecoration: 'none',
color: "white",
}}
>
<Typography textAlign="center">
{page.title}
</Typography>
</MenuItem>
</Link>
</DRLink>
</MenuItem>
))}
{extern_link.map((page) => (
<MenuItem
Expand All @@ -214,16 +211,18 @@ function DRNavbar(props: IDRNavbarProps) {
component="div"
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
>
<Link
<DRLink
to={"/"}
key={"logo_link"}
style={{
textDecoration: 'none',
color: "white",
}}
>
<DRLogo />
</Link>
<DRLogo
fontSize={24}
/>
</DRLink>
</Typography>
{!isLoggedIn() &&
<Box sx={{ display: { xs: 'flex', md: 'none' } }}>
Expand Down
21 changes: 17 additions & 4 deletions src/components/String/DRLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,21 @@
import { Typography, TypographyProps, TypographyTypeMap } from "@mui/joy";
import { Theme, useMediaQuery } from "@mui/material";
import Typewriter from "components/Animation/Typewriter";

export default function DRLogo() {
interface IProps extends TypographyProps<TypographyTypeMap['defaultComponent'], {
component?: React.ElementType;
}> {
}

export default function DRLogo(props: IProps) {
const lgScreen = useMediaQuery((theme: Theme) => theme.breakpoints.up("lg"));
return (
<>
<strong>DR</strong>incs
</>
<Typography
{...props}
>
<strong>DR</strong>
{lgScreen && <Typewriter text={"incs Productions"} delay={100} />}
{!lgScreen && <Typewriter text={"incs"} delay={100} />}
</Typography>
);
}

0 comments on commit 5d90395

Please sign in to comment.