11import React from "react" ;
2+
23import clsx from "clsx" ;
4+
35import Translate , { translate } from "@docusaurus/Translate" ;
46import Link from "@docusaurus/Link" ;
57import Image from "@theme/IdealImage" ;
68import Heading from "@theme/Heading" ;
79import { Button , ButtonGroup , Grid , Stack , useMediaQuery , useTheme } from "@mui/material" ;
810import SettingsIcon from "@mui/icons-material/Settings" ;
911import TipsAndUpdatesIcon from "@mui/icons-material/TipsAndUpdates" ;
10-
1112import useBaseUrl from "@docusaurus/useBaseUrl" ;
1213
13- const Editions = [
14- {
15- name : "Budgie" ,
16- url : "budgie" ,
17- urlConfig : "budgie/configuration" ,
18- urlTips : "budgie/tips-and-tricks" ,
19- description : (
20- < Translate id = "edition.budgie.description" >
21- A feature-rich, luxurious desktop using the most modern technologies.
22- </ Translate >
23- ) ,
24- } ,
25- {
26- name : "Plasma" ,
27- url : "plasma" ,
28- urlConfig : "plasma/configuration" ,
29- urlTips : "plasma/tips-and-tricks" ,
30- description : (
31- < Translate id = "edition.plasma.description" >
32- A sophisticated desktop experience for the tinkerers. Simple by default, powerful when needed.
33- </ Translate >
34- ) ,
35- } ,
36- {
37- name : "GNOME" ,
38- url : "gnome" ,
39- urlConfig : "gnome/configuration" ,
40- urlTips : "gnome/tips-and-tricks" ,
41- description : (
42- < Translate id = "edition.gnome.description" > A simple, streamlined desktop for more modern hardware.</ Translate >
43- ) ,
44- } ,
45- {
46- name : "MATE" ,
47- url : "mate" ,
48- urlConfig : "mate/configuration" ,
49- urlTips : "mate/tips-and-tricks" ,
50- description : (
51- < Translate id = "edition.mate.description" > A traditional desktop for advanced users and older hardware.</ Translate >
52- ) ,
53- } ,
54- {
55- name : "Xfce" ,
56- url : "xfce" ,
57- urlConfig : "xfce/configuration" ,
58- urlTips : "xfce/tips-and-tricks" ,
59- description : (
60- < Translate id = "edition.xfce.description" >
61- A lightweight desktop that aims to be fast while still being friendly.
62- </ Translate >
63- ) ,
64- } ,
65- ] ;
14+ import FaSettingsIcon from "@mui/icons-material/Settings" ;
15+ import FaTipsAndUpdatesIcon from "@mui/icons-material/TipsAndUpdates" ;
6616
67- type EditionCardProps = {
68- name : string ;
69- url : string ;
70- urlConfig : string ;
71- urlTips : string ;
72- description : JSX . Element ;
73- } ;
17+ import Editions from "@site/src/data/editions" ;
18+ import { Edition } from "@site/src/types" ;
19+
20+ type EditionCardProps = Edition ;
7421
7522const EditionCard = ( { name, url, urlConfig, urlTips, description } : EditionCardProps ) => {
7623 const theme = useTheme ( ) ;
7724 const hideIcons = useMediaQuery ( theme . breakpoints . down ( "xl" ) ) ;
7825 const image = useBaseUrl ( `/img/${ name } .jpg` ) ;
7926
8027 return (
81- < Grid xs = { 6 } >
28+ < Grid size = { { xs : 6 } } >
8229 < Stack className = { clsx ( "card" ) } height = { 1 } >
8330 < Stack className = { clsx ( "card__image" ) } >
8431 < Link to = { url } >
@@ -107,14 +54,14 @@ const EditionCard = ({ name, url, urlConfig, urlTips, description }: EditionCard
10754 >
10855 < Button
10956 href = { urlConfig }
110- startIcon = { ! hideIcons ? < SettingsIcon /> : undefined }
57+ startIcon = { ! hideIcons ? < FaSettingsIcon /> : undefined }
11158 sx = { { borderRadius : "10px" , paddingInline : 2 } }
11259 >
11360 < Translate id = "edition.card.configuration" > Configuration</ Translate >
11461 </ Button >
11562 < Button
11663 href = { urlTips }
117- startIcon = { ! hideIcons ? < TipsAndUpdatesIcon /> : undefined }
64+ startIcon = { ! hideIcons ? < FaTipsAndUpdatesIcon /> : undefined }
11865 sx = { { borderRadius : "10px" , paddingInline : 2 } }
11966 >
12067 < Translate id = "edition.card.tipsntricks" > Tips & Tricks </ Translate >
@@ -129,7 +76,7 @@ const EditionCard = ({ name, url, urlConfig, urlTips, description }: EditionCard
12976export const EditionCardsRow = ( ) => {
13077 return (
13178 < Grid container columns = { { xs : 6 , sm : 6 , md : 6 , lg : 12 } } spacing = { 2 } >
132- { Editions . map ( ( edition ) => (
79+ { Editions . map ( ( edition : Edition ) => (
13380 < EditionCard key = { edition . name } { ...edition } />
13481 ) ) }
13582 </ Grid >
0 commit comments